Die WordPress Bilder-Lightbox farblich anpassen

Mit der WordPress-Version 6.4 haben die Entwickler eine Lightbox-Funktion direkt ins CMS eingebaut. Mit dieser integrierten Lightbox lassen sich Bilder jetzt ganz einfach per Klick vergrößern ohne zusätzliche Installation eines Plugins. Wie man beim Lightbox-Effekt die Overlay-Farbe anpassen kann, erkläre ich kurz in einem Beispiel.

Die Bilder lassen sich in WordPress ab Version 6.4. nun auch als Lightbox-Popups anzeigen. Sobald Ihr einen Bild-Block platziert habt, geht Ihr in der rechten Seitenleiste zu den Blockeinstellungen des Bildes. Hier gibt es jetzt einen kleine Schalter namens „Bei Klick erweitern“. Damit aktiviert man die Lightbox-Funktion für dieses Bild.

Standardmäßig ist der Hintergrundfarbe des Lightbox-Overlays auf weiss einstellt. Wer eine anderen Farbe wie z.B. einen grauen Hintergrund verwenden möchte, kann mit einem CSS-Code die Farbe ändern.

/* Setze den Hintergrund des Leuchtkastens auf ein halbtransparentes Schwarz */
.wp-lightbox-overlay .scrim {
    background-color: rgba(0, 0, 0, 0.7) !important; /* Darkens the background for better contrast with light images */
}

/* Gestalte die Schaltfläche zum Schließen der Lightbox mit Rahmen, Hintergrundfarbe und Schatten */
.wp-lightbox-overlay .close-button {
    border: 2px solid #000;  /* Fügt eine durchgehende Umrandung hinzu */
    background-color: #fff !important; /* Setzt die Schaltflächenfarbe auf weiß */
    border-radius: 50%; /* Den Schließen-Button rund machen */

}

/* Ändert die Farbe des Buttons beim Hover und Focus mit der Maus */
.wp-lightbox-overlay .close-button:hover,
.wp-lightbox-overlay .close-button:focus {
    background-color: #eeeeee !important; /* Erhellt die Farbe des Buttons bei Maus-Hover/Fokus */
    outline: none; /* Entfernt die standardmäßige Fokusrandlinie. */
}

Schreibe einen Kommentar