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.