Come personalizzare il Lightbox nativo di Blogger.

Da ieri è tornato nuovamente su tutti i siti della piattaforma Blogger il Lightbox nativo. Si tratta di cliccare su una qualsiasi immagine priva di collegamento per visualizzarla a grandezza naturale in uno sfondo scuro. Ricordo che questo effetto può essere disabilitato andando su Impostazioni > Post e commenti > Open Images in Lightbox e selezionando il NO.

Di default in tutti i blog che hanno lasciato questo effetto, vengono mostrati gli stessi stili per quanto riguarda il colore di sfondo, l'opacità, le icone, la barra della galleria ecc. Attraverso opportuni CSS si può personalizzare il Lightbox per renderlo più adatto ai colori e allo stile del nostro blog.

    Qui di seguito posto uno screenshot in cui vengono mostrati gli elementi che si possono modificare

Si tratta del colore dello sfondo, del colore del link dell'immagine, del colore del numero delle immagini, dell'icona di chiusura, del colore della barra della galleria e dello stile del bordo e della ombreggiatura. Questa ultima personalizzazione non sarà correttamente visibile con Internet Explorer.

Si va su Modello > Modifica HTML, si cerca la riga ]]></b:skin> e, subito sopra, si incolla il seguente CSS 

/* Blogger Lightbox Personalizzato */
/* Colore di background dell'effetto */
.CSS_LIGHTBOX_BG_MASK {
background-color: #BB290B !important;
opacity: 0.8 !important;
filter: alpha(opacity=80) !important;
}
/* Stile delle immagini con arrotondamento e ombreggiatura */
.CSS_LIGHTBOX_SCALED_IMAGE_IMG {
outline: 0px solid #FFFFFF !important;
-webkit-border-radius: 12px;
-moz-border-radius:12px;
border-radius: 12px;
-webkit-box-shadow: 12px 12px 6px #000000;
-moz-box-shadow: 12px 12px 6px #000000;
box-shadow: 12px 12px 6px #000000;
}
/* Icona per chiudere il LIghtbox */
.CSS_LIGHTBOX_BTN_CLOSE {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhROKMfQvd3NbFWAJfq1u1rklx4Oc20OBLfsxBLzBIMJBs3b3bNE1C2XkpbK2Udz6CCg33l6xvQlupAU5ro8cLGIRhDGfYFtxXace_HQEUAdGFrj0Xw3Mi7UEsDBom9he9d8pKz3RA7kzs/s24/blackclose.png) no-repeat !important;
width: 24px !important;
height:24px !important;
}
/* Colore di sfondo della barra delle miniature */
.CSS_LIGHTBOX_FILMSTRIP {background-color: #191919 !important;}
/* Colore del link della immagine */
.CSS_LIGHTBOX_ATTRIBUTION_INFO, .CSS_LIGHTBOX_ATTRIBUTION_LINK {color: #191919 !important;}
/* Colore del numero delle immagini */
.CSS_LIGHTBOX_INDEX_INFO {color: #191919 !important;}

Si salva il modello. Attraverso il tag !important; si ottiene una priorità dei parametri di questo codice rispetto a quelli nativi di Blogger. I commenti colorati di viola mostrano a cosa si riferiscono i blocchi di codice sottostanti. Mi soffermo solo su quelli più importanti:

1. background-color: #BB290B !important; rappresenta il colore dello sfondo in cui si apre la finestra del Lightbox
2. opacity: 0.8 !important; filter: alpha(opacity=80) determina la opacità dello sfondo (1.0 e 100 significheranno trasparenza zero)
3. background: url(URL IMMAGINE) no-repeat !important; è l'icona di chiusura del Lightbox che può essere caricata su Picasa
4. #000000 è il colore dell'ombreggiatura mentre box-shadow: 12px 12px 6px rappresentano l'arrotondamento dei bordi che le vecchie versioni di IE non sono in grado di mostrare.

Mi ricordo infine che in un commento mi fu chiesto come fare a eliminare il link della immagine. Basterà modificare la riga relativa in questo modo

/* Colore del link della immagine */
.CSS_LIGHTBOX_ATTRIBUTION_INFO, .CSS_LIGHTBOX_ATTRIBUTION_LINK {display:none;}

Concludo ricordando che ciascun CSS può essere ulteriormente integrato inserendo altri parametri come per esempio le dimensioni della barra delle miniature o altri valori ma non ne ho testato il funzionamento. Ho però pubblicato una

• Demo dell'Effetto Lightbox di Blogger personalizzato -