Beiträge von Schwebbs

Zitat von Sempervivum

@Schwebbs Ich verstehe nicht, warum Du das so kompliziert mit CSS machen willst. Wenn es sich um ein Logo handelt, könntest Du es doch einfach mit einem img-Tag anzeigen lassen?

Danke auch für Deinen Vorschlag. Ich verstehe gerade nur nicht, wie ich das Logo dadurch dynamisch bekomme?

Zitat von AndreasB

Da hast du viele Möglichkeiten.

Eine der einfachsten Wege ist es eine css Klasse dynamisch zu setzen.
Du musst natürlich in deiner CSS zuerst die Einzelnen Klassen erstmal definieren.

JavaScript

// Wenn du noch nicht so viel JS Erfahrung hast, würde ich dir empfehlen, nich so kompliziert zu denken. 
// Das ist natürlich nur ein Beispiel, dass du 


// 1. Als erstes müssen wir natürlich erstmal die aktuelle URL abfragen.
const currentUrl = window.location.href;

// 2. Dann speichern wir uns eine default Klasse an der wir auch erkennen können,
// ob die nachfolgenden Abfragen greifen oder nicht.
let logoCssClass = 'logo--default';

// 3. Danach vergleichen wir nacheinander dir URL mit den teilen, die Wir suchen
// Wenn wir einen Teil Finden, speichern wir uns einen anderen Style in der Variablen,
if (currentUrl.indexOf('A.com') > -1) {
    logoCssClass = 'logo--a'
} else if (currentUrl.indexOf('B.com') > -1) {
    logoCssClass = 'logo--b'
} else if (currentUrl.indexOf('C.com') > -1) {
    logoCssClass = 'logo--c'
}

// 4. Anschließend  holen wir uns das Logo, dem wir den Style zuweisen wollen.
// Den Selektor musst du natürlich selber anpassen.
const logoElement = document.querySelector('.logo');

// 5. Dann setzen wir die vorbereitete Klasse auf das Element.
logoElement.classList.add(logoCssClass);

Alles anzeigen

Ich hoffe das hilft dir.

Alles anzeigen

Ich glaube, das hilft mir, danke!

Nur zu meiner Absicherung: Grob gesagt frage ich so die URL ab und je nachdem welche es ist, wird eine andere CSS-Klasse für das Logo aufgerufen. Richtig?

Zitat von AndreasB

Hallo Schwebbs,

über reines CSS ist es nicht möglich die URL abzufragen.

Du könntest aber zum Beispiel jeweils eine eigene CSS-Datei nur für das Logo anlegen und in jeder html eine andere davon einbinden.

Oder das ganze über JS dynamisch setzen.

Danke erstmal für die Tipps! Separate CSS sind in diesem Projekt leider nicht gewünscht. Wie meinst Du das mit der dynamischen Einbindung über JS? Bin bei JS leider nicht ganz so fit wie bei CSS...

Hallo zusammen,

ich habe eine Frage zur Nutzung einer globalen CSS-Datei. Ist es möglich, dass z. B. ein Logo in einem Header je nach URL-angezeigt wird? Wenn ich z. B. auf Seite A.com gehe, wird Logo A angezeigt (über die CSS-Datei bestimmt) und wenn ich auf B.com gehe, wird Logo B angezeigt. Seht Ihr eine Möglichkeit, dass per CSS zu steuern?

Ich hoffe, ich habe mich verständlich ausgedrückt!? Über Anregungen und Idee wäre ich sehr dankbar!