Cambiar el aspecto del Lightbox de Blogger

            En un artículo reciente hablábamos de cómo podíamos habilitar o deshabilitar el sistema de visualización de imágenes que ha incluido Blogger recientemente, el lightbox.
Si al final has optado por mantenerlo activado pero no estas conforme con la combinación de colores que tiene, o simplemente te gustaría modificarlo para que se adapte mejor al diseño de tu blog.  Hay una forma relativamente sencilla para hacerlo y es lo que voy a explicar hoy en este artículo.

Para modificar el diseño del Lightbox debemos modificar el código HTML de nuestra plantilla, tranquilos que son cambios muy sutiles y apenas nos costará trabajo hacerlos. Lo primero que debemos hacer es acceder es acceder a la Edición HTML de la plantilla a través de la opción Plantilla y el botón Edición de HTML. Una vez dentro, marcamos la casilla Expandir plantillas de artilugios y buscamos ]]>, justo antes de esta etiqueta debemos introducir las siguientes líneas de código en función del parámetro que deseemos cambiar, podemos modificar:
1.- Color de fondo y la opacidad (opacity)
.CSS_LIGHTBOX_BG_MASK {
background-color: #E0ECF8 !important;
opacity: 0.9!important;
filter: alpha(opacity=90) !important;
}

            2.- Color y tamaño del borde que rodean las imágenes cuando se visualizan

.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; — color del borde de la imagen
-moz-box-shadow: 10px 10px 5px #000000;
box-shadow: 10px 10px 5px #000000;
}

            3.- Para modificar el botón de cierre del lightbox, podemos poner cualquier imagen que queramos, tan solo hay que introducir la url de la misma.

.CSS_LIGHTBOX_BTN_CLOSE {
background: url(
URL) no-repeat !important;
width: 24px !important;
height: 24px !important;
}

            4.- Color de fondo de la barra con las imágenes en miniatura

.CSS_LIGHTBOX_FILMSTRIP {background-color: #000 !important;}

            5.- Cambiar el color del texto con la informacion de la imagen

.CSS_LIGHTBOX_ATTRIBUTION_INFO, .CSS_LIGHTBOX_ATTRIBUTION_LINK {color: #000!important;}


            6.- Cambiar el color del número de imágenes.

.CSS_LIGHTBOX_INDEX_INFO {color: #000 !important;}

 

Con estos sencillos cambios, en rojo he resaltado los valores que se han modificado, pasaremos a tener un lightbox personalizado y único, como se puede ver en la siguiente imagen.



Fuente: Ciudad Blogger