Logo: Wie mehrere Logos abhängig von einer Seite anzeigen lassen?

[Jens Pielawa]

Hallo an alle,
ich soll eine Webseite erstellen, die an verschiedenen Stellen drei unterschiedliche Logos im Men�header anzeigen soll, abh�ngig von der angew�hlten Seite. Z. B. ist das grundlegende Logo auf den meisten Seiten zu sehen; wenn es um einen „Verein” geht, soll ein anderes eingesetzt werden; wenn es um eine „Schule” geht ein drittes.
Meine Gedanken: ich legte drei fast identische Seitenlayouts an und baue mir nur noch drei Module, die die drei unterschiedlichen Logos aufrufen bzw. beinhalten. Den betreffenden Seiten „Verein” oder „Schule” verpasse ich die jeweiligen Seitenlayouts mit den passenden Logo-Modulen.
So weit, so gut – im Modul „Logo” finde ich aber nur das HTML vor:

<div class="logo"><a href="./"></a></div>

An welcher Stelle muss ich denn abtauchen, um das Logo in der gew�nschten Weise zu mehreren Versionen zu �berreden? Ist das im CSS verdrahtet? Ab hier wei� ich nicht weiter.

[Tom]

Hi!

Guter Ansatz. W�rde ich auch so machen.
Das Logo ist als Hintergrundbild eingef�gt und kann per CSS �berschrieben werden:

.logo a {background-image: url();}

<div class="logo logo_1"><a href="./"></a></div>

.logo.logo_1 a {background-image: url();}

Zu beachten ist noch die mobile Version und ggf. der Stickyheader. Die jeweiligen CSS-Klassen die ggf. n�tig sind kann man gut �ber die Browser-Developerleiste ausfindig machen.

Sch�ne Gr��e
Tom

[Jens Pielawa]

Hallo Tom,

besten Dank, hat super funktioniert nach einem Stotterstart (mit Tippfehlern im CSS meinerseits), aber nun l�uft es exakt so wie gedacht. Je nachdem man welche Seite anw�hlt, tauscht sich das (nat�rlich gr��engleiche) Logo.

[Jens Pielawa]

Funktioniert doch nicht mehr wie gew�nscht...
Nach weiterem Ausbau unter https://neuewebsite.kisum-kreativhaus.de/ m�chte ich zwei Logos verwenden. Diese sind in der custom.css wie folgt angelegt:

 .logo {
margin-top: auto;
margin-bottom: auto;
float: left;
transition: All 0.3s ease;
-webkit-transition: All 0.3s ease;
}

.logo.logo-verein a {
background-image: url(../logos/KISUM-Logo-Verein-weiss.png);
width: 100%;
height: 100%;
display: block;
background-repeat: no-repeat;
background-size: 100%;
background-position: left;
}

.logo.logo-musikschule a {
background-image: url(../logos/KISUM-Logo-Musikschule-Weimar-weiss.png);
width: 100%;
height: 100%;
display: block;
background-repeat: no-repeat;
background-size: 100%;
background-position: left;
}

Dann gibt es zwei Module, die nur diesen Code drin haben:

<div class="logo logo-musikschule"><a href="./"></a></div>

<div class="logo logo-verein"><a href="./"></a></div>

Es gibt zwei fast identische Seitenlayouts, mit den jeweils wechselnden/passenden Logo-Modulen.

Problem: Ich m�chte eine wei�e Version dieses Logos neu nehmen, weil der Header nun dunkelblau geworden ist. Stattdessen wird immer die vorige schwarze Version genommen, die jedoch partout nicht ersetzt werden m�chte. Cache geleert etc., nichts hilft.
Wo ist wom�glich hier der Fehler?

[Tim]

Es gibt zwei fast identische Seitenlayouts,

Darin unterschiedliche Body-Klassen angeben f�r eine eine Fallunterscheidung:

Layout Verein -> Body-Klasse "verein". Layout Musikschule -> Body-Klasse "musikschule"

.logo-verein, .logo-musikschule {display:none;}

body.verein .logo-verein {display:block;}
body.musikschule .logo-musikschule {display:block;}

[Jens Pielawa]

Darin unterschiedliche Body-Klassen angeben

Habe ich gesetzt.

.logo-verein, .logo-musikschule {display:none;}
body.verein .logo-verein {display:block;}
body.musikschule .logo-musikschule {display:block;}

Diese drei Zeilen habe ich dann in die custom.css gesetzt. Kein Effekt. Das schwarze Logo bleibt.

Frage: Kann der Theme-Designer eventuell etwas damit zu tun haben, dass der ein m�glicherweise dort hochgeladenes Logo eher interpretiert und "festklebt" als eigene Anweisungen?

Ich hatte eben mittels Theme-Designer testweise auch versucht, ein wei�es SVG-Logo hochzuladen, das wird ebenfalls nicht dargestellt. Das schwarze Logo klebt wie Pech im Header...

[Tim]

Der TD sollte im Live-Modus sein. Sprich: Gespeichert und deaktiviert.

Ich w�rde empfehlen das CSS abzuspecken. CSS vererbt sich. Man tauscht nur den Bildpfad je individueller Klasse und erbt das allgemeine Styling des Logos aus dem TD.

[Jens Pielawa]

Wo bef�nde sich denn ein mittels Theme-Designer hochgeladenes Logo und wie wird es im CSS als Hintergrund-Bild beschrieben? Diese Stelle habe ich noch nicht gefunden. Und die Anweisungen in der custom.css sind schon schlank und k�mmern sich nur um die zwei extra Logos mit body-Klassen. Ich hoffe, dass die auch irgendwie greifen.
Denn einen Wechsel der Logos sehe ich noch immer nicht. Immerhin ist schon das grundlegende wei�e Logo, das ich vorhin via TD hochgeladen hatte, jetzt mal zu sehen.

[Tim]

Alles viel zu umst�ndlich. Es braucht f�r einen Bildwechsel nicht zwingend zwei Elemente etc.
Es reicht vollkommen anhand der Body-Klasse das Bild zu tauschen.

Effektives CSS �berschreibt nur das, was wirklich neu ist bzw. �berschrieben werden soll.

Das Bild sitzt auf dem Link-Element. Daher nur das Bild darin tauschen und das Grundstyling so belassen, wie es aus dem TD kommt. Das passt ja f�r das "Standard"-Logo und die Abweichung beider Logos sind ja nur der Text. Gr��e etc. ist alles identsich.

.logo a {
transition: All 0.3s ease;
-webkit-transition: All 0.3s ease;
}
body.verein .logo a {background-image: url(../logos/KISUM-Logo-Verein-weiss.png);}
body.musikschule .logo a {background-image: url(../logos/KISUM-Logo-Musikschule-Weimar-weiss.png);}

Das Transition-Styling hat keinen sichtbaren Effekt, weil sich kein "Transition-relevantes"-Styling �ndert. Das kannst du auch entfernen. Dann reichen die Unterscheidungen der Bilder.

ps. in der aktuellen Konstellation tauscht das Bild unter Verein nicht, weil dort weiterhin das "Musikschul" Logo platziert ist. (siehe Anhang)

[Jens Pielawa]

Alles viel zu umst�ndlich.

.logo a {
transition: All 0.3s ease;
-webkit-transition: All 0.3s ease;
}
body.verein .logo a {background-image: url(../logos/KISUM-Logo-Verein-weiss.png);}
body.musikschule .logo a {background-image: url(../logos/KISUM-Logo-Musikschule-Weimar-weiss.png);}

Habe ich so eingebaut, vielen Dank.

ps. in der aktuellen Konstellation tauscht das Bild unter Verein nicht, weil dort weiterhin das "Musikschul" Logo platziert ist. (siehe Anhang)

Wenn ich auch nicht das passende Modul richtig im Seitenlayout einbinde… Jetzt funktioniert es endlich wie gewollt. Besten Dank!