Como cambiar el color del lightbox de Blogger

Hoy os traigo un tutorial que creo que os va a gustar mucho. Ojalá no me equivoque ;)

Pero antes de nada, ¿qué es el lightbox?

El lightbox es esa cajita o marco negro que sale cuando pinchamos en las fotos de Blogger:

Se puede activar o desactivar fácilmente (en Configuración - Entradas y comentarios - Mostrar imágenes con lightbox - Sí o No):

Y cuando se activa, sale como acabamos de ver, una cajita o marco negro cuando pinchamos sobre una foto.

Yo lo tengo desactivado porque si ponemos una imagen muy grande, al pinchar en ella no se verá a tamaño completo, y como suelo poner pantallazos, a veces es conveniente que podáis verlos bien. No obstante y como en la mayoría de los blogs/casos, lo suyo es poner las imágenes más pequeñas (por eso que vemos en el Curso Dos de no usar mucho espacio y que no tengáis que pagar luego y que además el blog no cargue lento), pues se puede dejar puesto.

De hecho la mayoría de los blogs de Blogger que conozco lo tienen activado.

Pero veo que todo el mundo lo deja negro.

Que no queda mal, pero bueno, que me he imaginado que quizá alguna, si sabe cómo cambiarlo, quizá quiera hacerlo ;)

Además es muy fácil. Vamos allá.

Cómo cambiar el color del lighbox o cajita de fotos de Blogger:

Lo primero que tenéis que saber es que se pueden cambiar 3 colores.

Fijaos como la zona de abajo, donde salen las demás fotos del post si es que en él hay más de una, es de un tono un poco más oscuro que el resto.

Entonces, eso se puede poner de un color, el resto de la caja de otro.

Y además, y aunque normalmente no se ve porque es negro igual que la caja, también se puede cambiar el color del reborde de la caja:

De este modo por ejemplo podríamos ponerlo así:

Es tan tan fácil como copiar este código de CSS que os he escrito y cambiar los colores o el grosor del reborde:

.CSS_LIGHTBOX_BG_MASK {
background-color:#dfdede !important;
/*pdb*/
}

.CSS_LIGHTBOX_FILMSTRIP {
background-color: #c6c6c6 !important;
/*pdb*/
}

.CSS_LIGHTBOX_SCALED_IMAGE_IMG {
cursor: pointer;
outline: 3px solid #8d8d8d !important;
position: relative;
/*pdb*/
}

Entonces, ahí en realidad van tres codiguitos.

El primero, el que dice "Lightbox bg mask" ese es el que corresponde a la caja en sí. Yo la he puesto del gris de las rayas del fondo de mi blog. Pero vosotras deberéis cambiar ese código que os he puesto en rosita por el color que queráis.

El segundo codiguito, el que dice "Lightbox filmstrip" pertenece a la franja de abajo donde salen las demás fotos. Y lo mismo: deberéis cambiar el código que os he puesto en rosa al color que vosotras queráis (yo ya veis que lo he puesto gris un poco más oscuro)

Y por último, el tercer codiguito pertenece al reborde.

Aquí podeis o ponerlo del mismo color que el primero (caja) para que no se vea, tal y como hace Blogger en la caja negra que nos pone por defecto, o ponerle un color.

Y si le ponéis color, podéis cambiarle el grosor. Por defecto sale 2px, pero yo lo he puesto de 3 en el ejemplo. O en el ejemplo de más arriba aún, el que tiene el reborde rojo, ahí está de 5.

La verdad que también podéis cambiar el solid por dotted o dashed etc. como todas las líneas siempre (lo vimos en el post de cómo poner un reborde alrededor de la columna central del blog) pero ya sabéis que yo opino que cuantas menos pijaditas... ;)

¿Veis qué fácil?

¿Os ha gustado? ¿Lo vais a cambiar de color en vuestro blog? Contadme :)

Mil besos,