Globedia.com

×
×

Error de autenticación

Ha habido un problema a la hora de conectarse a la red social. Por favor intentalo de nuevo

Si el problema persiste, nos lo puedes decir AQUÍ

×
cross

Suscribete para recibir las noticias más relevantes

×
Recibir alertas

¿Quieres recibir una notificación por email cada vez que Recursos Blog escriba una noticia?

Cambiar el aspecto del Lightbox de Blogger

21/10/2011 15:30 0 Comentarios Lectura: ( palabras)

image 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.

imageimage

Fuente: Ciudad Blogger


Sobre esta noticia

Autor:
Recursos Blog (173 noticias)
Fuente:
recursos-blog.blogspot.com
Visitas:
5549
Licencia:
¿Problemas con esta noticia?
×
Denunciar esta noticia por

Denunciar

Comentarios

Aún no hay comentarios en esta noticia.