Personalizar el Lightbox de Blogger

Ahora sí, los que han elegido usar el Lightbox de Blogger tienen un sistema de ventanas modales para mostrar las imágenes del blog de una forma distinta a la habitual.

Sí, es muy bonita y le da algo de estilo a las imágenes, pero... ¿debemos conformarnos con el color negro de la pantalla? No, la verdad es que podemos personalizar el Lightbox a nuestro entero gusto.

Me refiero a que pasaremos de esto:

A esto:

Podemos modificar todo el aspecto de la ventana modal por completo, el color de fondo, la transparencia, el botón de cerrar, el borde de las imágenes, los textos que aparecen en ella, y la barra donde se muestran las miniaturas de las imágenes.

Lo único que tenemos que hacer es sobre escribir los estilos por defecto y cambiarlos por los nuestros. Así que entramos a la Edición HTML de la plantilla y antes de ]]></b:skin> pega lo siguiente:

/* Lightbox de Blogger
----------------------------------------------- */
/* Color de fondo de la pantalla */
.CSS_LIGHTBOX_BG_MASK {
background-color: #E0ECF8 !important;
opacity: 0.9 !important;
filter: alpha(opacity=90) !important;
}

/* Estilos de las imágenes */
.CSS_LIGHTBOX_SCALED_IMAGE_IMG {
outline: 0px solid #FFF !important;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 10px 10px 5px #000000;
-moz-box-shadow: 10px 10px 5px #000000;
box-shadow: 10px 10px 5px #000000;
}

/* Icono para cerrar la ventana modal */
.CSS_LIGHTBOX_BTN_CLOSE {
background: url(URL de la imagen) no-repeat !important;
width: 24px !important;
height: 24px !important;
}

/* Color de fondo de la barra de miniaturas */
.CSS_LIGHTBOX_FILMSTRIP {background-color: #000 !important;}

/* Color del texto de la información de la imagen */
.CSS_LIGHTBOX_ATTRIBUTION_INFO, .CSS_LIGHTBOX_ATTRIBUTION_LINK {color: #000 !important;}

/* Color del índice (número de imágenes) */
.CSS_LIGHTBOX_INDEX_INFO {color: #000 !important;}

Las anotaciones en color verde explican a qué área corresponde cada parte.

El /* Color de fondo de la pantalla */ puedes cambiarlo por el que quieras, incluso puedes cambiarlo por una imagen. Si deseas hacer eso entonces cambia esta línea:

background-color: #E0ECF8 !important;

Por esta otra:

background-image:url(URL de la imagen) !important;

La opacidad está justo debajo, con un valor inferior el fondo se hará más transparente. Con el valor 1 (y 100 en filter) perderá toda transparencia.

Para el icono de cerrar la ventana se debe agregar la URL de la imagen donde se indica. Debajo se encuentra el ancho y alto (width y height) de este icono, también se debe especificar.

Si no quisieras que aparezca la información de la imagen (generalmente es la URL de ella) agrega debajo de /* Color del texto de la información de la imagen */ esto:

display: none;

Los estilos de las imágenes se pueden modificar tanto como queramos, se pueden cambiar los bordes redondeados, la sombra, etc. pero recuerda que es CSS3 así que versiones antiguas de Internet Explorer no lo verán.

Es un truco sencillo que nos puede ayudar a personalizar un aspecto más del blog para que se adapte al diseño de la plantilla, y para que nuestro Lightbox no se vea igual al de todos.

Puedes ver un demo de este Lightbox personalizado en este blog de pruebas.