Wordpress Logo Farbe invertieren

alls du das Logo aus der Datei mandry-eletrotechnik-logo_beschnitten_2.jpg direkt in WordPress (zum Beispiel für ein dunkles Max Mega Menu) einbinden möchtest, ohne erst Grafikprogramme zu wälzen, gibt es einen genialen Trick: Du kannst die Farben direkt im Browser über ein paar Zeilen CSS umdrehen.

Füge diesen CSS-Code einfach im WordPress-Customizer unter Zusätzliches CSS (oder in den Theme-Einstellungen) ein. Du musst dem Logo im WordPress-Header dafür lediglich eine CSS-Klasse geben (z. B. inverted-logo) oder das Logo-Bild direkt ansprechen:

CSS

/* Invertiert das Logo: Hintergrund wird schwarz, Schrift wird weiß */
.inverted-logo {
    filter: invert(1) contrast(2);
    background-color: #000000; /* Erzwingt den schwarzen Hintergrund, falls das Bild transparent wäre */
    padding: 10px; /* Optional: Gibt dem Logo etwas Luft zum schwarzen Rand */
}

Wie dieser CSS-Befehl auf das Logo wirkt:

invert(1): Dreht alle Farben exakt um. Der weiße Hintergrund von mandry-eletrotechnik-logo_beschnitten_2.jpg wird tiefschwarz. Die schwarze Hauptschrift „MANDRY“ wird reinweiß.
contrast(2): Sorgt dafür, dass die ehemals goldenen Icons (das Haus und die Glühbirne) sowie der Schriftzug „Elektrotechnik“, die durch das reine Invertieren leicht bläulich-grau werden würden, übersteuert und ebenfalls strahlend weiß dargestellt werden.

Das ist die schnellste Methode, um das Logo direkt live auf der Website im gewünschten Look (schwarzer Grund, alles andere weiß) zu testen!alls du das Logo aus der Datei mandry-eletrotechnik-logo_beschnitten_2.jpg direkt in WordPress (zum Beispiel für ein dunkles Max Mega Menu) einbinden möchtest, ohne erst Grafikprogramme zu wälzen, gibt es einen genialen Trick: Du kannst die Farben direkt im Browser über ein paar Zeilen CSS umdrehen.

CSS

/* Invertiert das Logo: Hintergrund wird schwarz, Schrift wird weiß */
.inverted-logo {
    filter: invert(1) contrast(2);
    background-color: #000000; /* Erzwingt den schwarzen Hintergrund, falls das Bild transparent wäre */
    padding: 10px; /* Optional: Gibt dem Logo etwas Luft zum schwarzen Rand */
}

Wie dieser CSS-Befehl auf das Logo wirkt:

invert(1): Dreht alle Farben exakt um. Der weiße Hintergrund von mandry-eletrotechnik-logo_beschnitten_2.jpg wird tiefschwarz. Die schwarze Hauptschrift „MANDRY“ wird reinweiß.
contrast(2): Sorgt dafür, dass die ehemals goldenen Icons (das Haus und die Glühbirne) sowie der Schriftzug „Elektrotechnik“, die durch das reine Invertieren leicht bläulich-grau werden würden, übersteuert und ebenfalls strahlend weiß dargestellt werden.

Das ist die schnellste Methode, um das Logo direkt live auf der Website im gewünschten Look (schwarzer Grund, alles andere weiß) zu testen!

Wenn der Hintergrund auf deiner Website nicht tiefschwarz ist (sondern zum Beispiel ein dunkles Anthrazit oder ein sehr dunkles Grau), sieht ein rein schwarzer Kasten um das Logo natürlich unschön aus.

Um das anzupassen, müssen wir den background-color-Wert im CSS genau auf den Farbton deiner Website einstellen. Zudem passen wir den Filter so an, dass das Weiß der Schrift erhalten bleibt, das Logo sich aber nahtlos in deinen spezifischen Hintergrund einfügt.

Hier ist das angepasste CSS. Ersetze einfach den alten Code im Customizer damit:

CSS

.inverted-logo {
    /* Invertiert das Bild (Weiß wird zu Schwarz, Schwarz zu Weiß) */
    filter: invert(1) contrast(2);
    
    /* HIER DEINEN HINTERGRUND-FARBCODE EINTRAGEN: */
    background-color: #222222; 
    
    padding: 10px;
    display: inline-block; /* Sorgt dafür, dass der Hintergrund sauber am Logo anliegt */
}

Wie du den exakten Farbcode herausfindest:

Falls du den genauen Hex-Code (z. B. #1a1a1a oder #2c3e50) deines Seitenleisten- oder Header-Hintergrunds nicht auswendig weißt, kannst du ihn so ermitteln:

Mach einen Rechtsklick auf den Hintergrund deiner Website (neben dem Logo) und wähle „Untersuchen“ (Inspect).
Auf der rechten Seite in den Entwicklertools siehst du die CSS-Regeln. Suche nach dem Begriff background oder background-color.
Kopiere diesen Code (inklusive des #-Zeichens) und füge ihn oben im CSS-Code hinter background-color: ein.

Alternativ-Tipp ohne Hintergrund-Kasten: Falls der Hintergrund deiner Website ohnehin schon dunkel ist und das Logo nur weiße Schrift auf diesem dunklen Grund haben soll (ohne einen eigenen Kasten mitzubringen), kannst du den Hintergrund im CSS auch komplett weglassen. Das sieht oft noch eleganter aus:

CSS

.inverted-logo {
    filter: invert(1) contrast(2);
    background-color: transparent; /* Macht den Bildhintergrund unsichtbar */
}