Dynamische Ansichten: Neue Image-Gadget-Anzeige aufhellen

Seit ca. 20.04.2013 lässt Blogger die Bildanzeige des Image-Gadgets anders realisieren als zuvor, nämlich mit einer Art Postseite, wie man sie von den Ansichten Flipcard, Magazine, Snapshot, Timeslide kennt.

Meine hübsch klein zurechtgeschnittenen Gadget-Bildchen sehen auf der riesigen Postseite jetzt natürlich verloren aus. Schade; denn ich hatte auch die Gadgetgröße ganz prima angepasst. Das geht per CSS ja wunderbar.

---

Was sich Blogger bei der Änderung gedacht hat, weiß der Henker. Schließlich könnte man dann da ja genausogut einen Link auf einen Post oder eine Seite mit einem Bild setzen. Da das Fenster im Quelltext aber Lightbox heißt, vermute ich, dass Blogger gerade damit experimentiert, eine Lightbox für die DynAn zur Verfügung zu stellen. Da man im Image-Gadget bislang aber nur ein einziges Bild einstellen kann, bringt einem das derzeit an der Stelle wenig.

Zu der Überdimensioniertheit der Anzeigenart kommt noch die widersinnige Abdunklung des Bilds; die in den Posts Flipcard, Magazine, Snapshot, Timeslide Standard ist.

So kann man wenigstens die Abdunklung aufheben:

Eintragen unter Blogger-Dashboard > Blog-Menü (Pfeil) > Vorlage > Anpassen > Erweitert > CSS hinzufügen:

/* - - - - - Neue Image-Gadget-Anzeige - - Schleier entfernt - - - - - */
#lightbox.open .lightbox-backdrop {
opacity: 0.0;
}

Erläuterung: Der Standard ist übrigens opacity: 0.7;. Wenn man es gerne nur leichter verdunkelt hat, als üblich, dann kann man da einen Wert zwischen 0.0 und 0.7 eintragen. In dem Code, den ich oben eingetragen habe, ist der Wert auf Null gestellt und die Verdunklung somit komplett weg.

Bilder dazu:

opacity:0.7; (Standard)

opacity:0.1; (Verdunklung stark gemildert)

Will man die Anzeige auch sonst etwas mehr an das eigene Design anpassen, kann man die Hintergrundfarbe des Inhalts und die Hintergrundfarbe des Titels sowie die Farbe der Titelschrift mit den folgenden Kommandos ändern, die man dann zusätzlich unter "CSS hinzufügen" eintragen muss:

/* - - - - - Neue Image-Gadget-Anzeige - - Hintergrundfarbe des Inhalts festgelegt - - - - - */
.lightbox-content {
background-color:#ffffff;
}
/* - - - - - Neue Image-Gadget-Anzeige - - Farbe und Hintergrundfarbe des Titels festgelegt - - - - - */
.lightbox-header {
color:#ffffff;
background-color:#000000;
}

Erläuterung: Ich habe hier für den Hintergrund Schwarz (#000000) und für die Schrift Weiß (#ffffff) eingetragen. Da muss man stattdessen die Farben eintragen, die man da gerne hätte.

Bild dazu:

opacity:0.0; (Verdunklung komplett entfernt) und Farben angepasst

Ute Ziemes, sg.utez.de, 21.04.2013