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!