Arreglando el problema de transparencia del lightbox de Blogger en IE8 y versiones anteriores

Recientemente Blogger actualizó el Lightbox, y ahora es opcional usarlo, si eres de los que decidiste mantenerlo, como en mi caso,  necesitas saber que existe cierto inconveniente en Internet Explorer 8, y versiones anteriores de ese navegador.



Resulta que en esas versiones de Internet Explorer, la capa que cubre la ventana, al tener activo el lightbox se ve totalmente negra, sin opacidad/transparencia, lo cual no se ve muy bien que digamos, ya que es la transparencia, la que permite que el usuario sepa que debajo está el contenido del Blog, y también le dá elegancia al asunto ¿verdad?. Este es un ejemplo de como luce en esas versiones del Navegador:

Eso se debe a que Blogger no agregó cierto linea de código especial (filtro) que se necesita en IE8 y versiones anteriores a esta, para darle transparencia a la capa negra, y esto lo podemos comprobar en el CSS que nos envían, y que podemos ver si inspeccionamos el elemento:



.CSS_LIGHTBOX_BG_MASK {

width: 100%;

height: 100%;

position: absolute;

top: 0;

left: 0;

opacity: .9;

background-color: black;

}



¿Cómo lo arreglamos?, es muy sencillo, simplemente tenemos que poner esa linea, que hace que se vea la transparencia en la capa negra:

.CSS_LIGTBOX_BG_MASK {
filter:alpha(opacity=90);
}

El código CSS anterior, lo puedes agregar, si vas al Diseñador de Plantillas > Avanzado > Añadir CSS. Después de eso, la capa negra lucirá transparente también en IE8 y sus versiones anteriores ;)




Ya que andamos con el tema del lightbox,  si quieres, con unas cuantas lineas puedes personalizar el marco de la imagen, para que esta pueda destacar, ya que por defecto solo tiene una linea negra. Este es el CSS que nos envían, para la imagen ampliada dentro del visor:



.CSS_LIGHTBOX_SCALED_IMAGE_IMG {

cursor: pointer;

outline: 1px solid black;

position: relative;

}



Sabiendo como está identificada la imagen, facilmente podemos agregar estilos, y los vas a agregar, yendo al Diseñador de Plantillas > Avanzado> Añadir CSS:

.CSS_LIGHTBOX_SCANED_IMAGE_IMG {
border: 4px solid #FFF; /*creamos un marco usando borde*/
}

La linea negra que trae por defecto, aparece, porque usan una propiedad llamada outline, y al agregar el borde, esa linea negra va a quedar alrededor del borde, si no te gusta, se puede quitar si agregas:

outline: 0 !important;

En este caso, tenemos que reforzar el valor, usando !important para que se cumpla, ya que Blogger envía el valor: 1px solid black.



Ahora, tus visitantes que usen IE8 o versiones anteriores, podrán ver la transparencia de la capa negra que cubre la ventana, al tener activo el ligthbox ;) y también, quizás la imagen ampliada tenga un borde personalizado (si lo hiciste).