¿Quieres recibir una notificación por email cada vez que Recursos Blog escriba una noticia?
Enun 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 finalhas optado por mantenerlo activado pero no estas conforme con la combinación decolores que tiene, o simplemente te gustaría modificarlo para que se adaptemejor al diseño de tu blog. Hay unaforma relativamente sencilla para hacerlo y es lo que voy a explicar hoy eneste artículo.
Para modificarel 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 atravé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 siguienteslíneas de código en función del parámetro que deseemos cambiar, podemosmodificar:
1.- Color defondo 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: 10px10px 5px #000000 ;
}
3.- Para modificar el botón de cierre del lightbox, podemos poner cualquier imagenque 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 lasimágenes en miniatura
.CSS_LIGHTBOX_FILMSTRIP {background-color: #000 !important;}
5.- Cambiar el color del texto con lainformacion 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 heresaltado los valores que se han modificado, pasaremos a tener un lightboxpersonalizado y único, como se puede ver en la siguiente imagen.
Fuente: Ciudad Blogger