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 kleinen Schalter namens „Bei Klick erweitern“. Damit aktiviert man die Lightbox-Funktion für dieses Bild.
Standardmäßig ist der Hintergrundfarbe des Lightbox-Overlays auf die Farbe weiß einstellt. Wer eine andere 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. */
}