Lightbox umgestalten

Die Lightbox ist das Anzeigefenster, das sich über das Blog legt, wenn man in einer nicht-dynamischen Vorlage ein Bild angeklickt hat, das man in das Blog hochgeladen hatte. Normalerweise hat die Lightbox einen teiltransparenten dunklen Hintergrund. Unten, in der Bildauswahlleiste ist der Hintergrund schwarz ohne Transparenz.

---

Oben rechts ist ein X, das signalisiert, dass man dort die Lightbox wieder ausblenden kann. Eigentlich kann man egal wohin neben das Bild klicken, damit die Lightbox verschwindet, aber das weiß jemand, der es noch nie ausprobiert hat, nicht. Deshalb ist das Einblenden des X sinnvoll.

In einem meiner Blogs verhinderte meine Navbarblende, dass man das X in der Lightbox sah, wenn man auf ein Bild geklickt hat. Die Navbarblende wurde dann ebenfalls angezeigt und verdeckte das X. Das passierte nur im geöffneten Post, nicht, wenn man von der Startseite aus auf das Bild klickte. Ich habe überlegt, wie ich die Navbarblende im geöffneten Post unter die Lightbox legen kann. Dabei entstand das Interesse, umgekehrt die Lightbox zu gestalten. Das X auf eine höhere Schicht zu legen oder mit mehr Abstand nach oben zu positionieren.

Im Quelltext des Blog sieht man das CSS der Lightbox nicht, auch nicht, wenn man den Quelltext erst anzeigen lässt, wenn die Lightbox gerade angezeigt wird.

Man findet im Quelltext aber den Link zum CSS der Lightbox: https://www.blogger.com/static/v1/v-css/2392111094-lightbox_bundle.css  Außerdem kann man das CSS für bestimmte Stellen sehr wohl via Rechtsklick anzeigen lassen, wenn man die Webentwickler-Werkzeuge aktiviert hat und nach dem Rechtsklick auf "Element untersuchen" (Formulierung bei Firefox) klickt.

Wenn man weiß, wie die einzelnen Bereiche heißen, kann man für Sie CSS-Kommandos unter Vorlage > Anpassen Erweitert > CSS hinzufügen eintragen. Für die meisten benötigt man das Anhängsel !important, damit sie wirken können.

Ich habe hier im Blog jetzt beispielsweise die Lightbox auf eine höhere Schicht gelegt, die Hintegrundfarben für den Hauptabschnitt und für die Bildauswahlleiste geändert, ein kleines Hintergrundbild hinzugefügt, das vermittelt, wo man gerade ist und das X mehr ins Blickfeld gerückt. Außerdem habe ich den Rahmen um die Bilder entfernt und die Farbe der Zahlen über der Bildauswahlleiste der neuen Hintergrundfarbe angepasst und ihre Größe erhöht.

Vorher (mit Anzeige für "Element untersuchen")

Nachher (mit Anzeige für "Element untersuchen"

CSS-Code für diese Änderung

/* - - - - - - - - - - - - - -
LIGHTBOX - Anfang
 - - - - - - - - - - - - - - */
/* Lightbox allgemein */
.CSS_LIGHTBOX {
z-index:12 !important;
}
/* Hauptbereich */
.CSS_LIGHTBOX_BG_MASK {
background: #ffffff url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmaaDO_RqmHiNQchCfgGROZtuD9xUOAj36dDudCIImefQwS84VfUo7psPRQbX95o7PZu9t7BjXk8V8c4nXbQnFBh0b4S4kawssmrNo1ZjlMxAMr40Nj4OmFm5oE8XayWcYJinbXkA4kVgK/s1600/lightbox-hintergrund.png") 5px 15px scroll no-repeat !important;
opacity: 1.0 !important;
filter: alpha(opacity=90) !important;
}
/* X */
.CSS_LIGHTBOX_BTN_CLOSE {
margin-top: 20px;
margin-right: 20px;
}
/* Skalierte Bilder */
.CSS_LIGHTBOX_SCALED_IMAGE_IMG {
outline: 0px solid #ffffff !important;
}
/* Zahlen über Bildauswahlleiste */
.CSS_LIGHTBOX_INDEX_INFO {
color: #000000 !important;
font-size:15px !important;
}
/* Bildauswahlleiste */
.CSS_LIGHTBOX_FILMSTRIP {
background-color: #DFEAF5 !important;
}
/* - - - - - - - - - - - - - -
LIGHTBOX - Ende
 - - - - - - - - - - - - - - */

Ute Ziemes, sg.utez.de, 2015-02-14