Personalizar el Lightbox de Blogger fácilmente

personalizar lightbox Blogger facilmente Personalizar el Lightbox de Blogger fácilmente

Demostración

El lightbox de blogger cumple muy bien su función, lo malo es que no es muy personalizable, así que a pedido de un usuario de modificado parte del css del lightbox, también lo he comentado para que sea fácil de entender.


Cabe mencionar que los cambios que le he realizado son sutiles, no he exagerado nada, solo he mejorado visualmente lo que ya tenemos. El código que he escrito tiene como finalidad que todos lo puedan modificar como mas les guste.


Instalar

Solo ve a la edición html de tu plantilla, busca ]]></b:skin> y arriba de eso pega el siguiente codigo:


/*!
* Custom Style: Official Blogger lightbox
* by zkreations
*/
/*fondo: navegacion, boton cerrar*/
.CSS_LIGHTBOX_BTN_CLOSE,
.CSS_LIGHTBOX_FILMSTRIP {
    background-color: rgba(0, 0, 0, .5)!important; /*color de fondo*/
    -webkit-transition: background .3s!important; /*animacion*/
    transition: background .3s!important;
}
/*Hover => fondo: navegacion, boton cerrar*/
.CSS_LIGHTBOX_BTN_CLOSE:hover,
.CSS_LIGHTBOX_FILMSTRIP:hover {
    background-color: rgba(0, 0, 0, .8)!important; /*color hover*/
}
/*Seleccion de la navegacion*/
.CSS_LIGHTBOX_FILMSTRIP_CONTROLS_FRAME {
    border: 3px solid #fff!important; /*borde del selector*/
    border-radius: 2px!important;
    box-shadow: 0 1px 2px 0 #000!important; /*sombra*/
}
/*Informacion de la cantidad de fotos*/
.CSS_LIGHTBOX_ATTRIBUTION_INDEX_CONTAINER {
    font-size: 18px!important;
    font-family: arial!important;
    padding: .5em 0!important; 
}
/*Contenedor principal de la imagen*/
.CSS_LIGHTBOX_SCALED_IMAGE_IMG {
    border: 0 transparent!important; /*borde de la imagen*/
    outline: transparent 0!important; /*linea interior de la imagen*/
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .5)!important;  /*sombra*/
}
.CSS_LIGHTBOX_SCALED_IMAGE {
    overflow: initial!important; 
}
/*Mascara del contenedor principal*/
.CSS_LIGHTBOX_BG_MASK {
    opacity: 1!important;
    background-color: rgba(0, 0, 0, .8)!important; /*color del fondo*/
}
.goog-inline-block>.goog-inline-block {
    margin-top: 12px!important; 
}
/*Botón cerrar*/
.CSS_LIGHTBOX_BTN_CLOSE {
    background-image: url(https://goo.gl/25jH1C)!important; /*imagen del boton*/
    width: 60px!important; /*ancho del boton*/
    height: 60px!important; /*alto del boton*/
    right: 0!important;
    top: 0!important;
    background-position: center!important; 
}
/*texto de informacion*/
.CSS_LIGHTBOX_INDEX_INFO {
    color: #fff!important; /*color del texto*/
    width: 100%!important; 
}
/*fix: información de la cantidad de imagenes*/
.CSS_HCONT_CHILD,
.CSS_HCONT_CHILDREN_HOLDER {
    margin: 0 auto!important;
    float: none!important; 
}

Guarda los cambios y listo, eso seria todo. Para ver los cambios, es necesario habilitar el lightbox para imágenes de blogger.


Explicación

Utilice en todas las propiedades el valor !important porque los estilos del lightbox de blogger se insertan al final del documento html, y mediante la lógica de estilos en cascada no se pueden sobrescribir, por ello utilice !important, ya que es el que tiene mayor valor por lo tanto sobreescribe los estilos de blogger.


En cuanto a los estilos, le agregue un nuevo botón para "cerrar", y animé tanto el hover del botón como la barra de selección de imágenes. También retire el borde negro de la vista completa y lo reemplace con sombras, ya que considero que se ve mejor.


Personalización

Como mencione al principio, el código está comentado para que puedan saber a qué parte pertenece cada cosa y puedan modificarlo a gusto, por ejemplo, si quisiera un borde blanco en todas las imágenes, el código que nos permite modificar esa parte seria este:


/*Contenedor principal de la imagen*/
.CSS_LIGHTBOX_SCALED_IMAGE_IMG {
    border: 0 transparent!important; /*borde de la imagen*/
    outline: transparent 0!important; /*linea interior de la imagen*/
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .5)!important;  /*sombra*/
}

Y lo que podemos hacer es agregarle un valor nuevo a la propiedad border, de tal forma que nos quedaria asi:


/*Contenedor principal de la imagen*/
.CSS_LIGHTBOX_SCALED_IMAGE_IMG {
    border: 8px solid #fff !important; /*borde de la imagen*/
    outline: transparent 0!important; /*linea interior de la imagen*/
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .5)!important;  /*sombra*/
}

Otro ejemplo práctico, es que si quisiera que el fondo fuera blanco en lugar de negro, entonces buscaría esto:


/*Mascara del contenedor principal*/
.CSS_LIGHTBOX_BG_MASK {
    opacity: 1!important;
    background-color: rgba(0, 0, 0, .8)!important; /*color del fondo*/
}

Y agregaria un color blanco pero en formato rgba (255, 255, 255, .8), lo que nos permite ajustar la transparencia de esta forma:


/*Mascara del contenedor principal*/
.CSS_LIGHTBOX_BG_MASK {
    opacity: 1!important;
    background-color: rgba(255, 255, 255, .8)!important; /*color del fondo*/
}

En todos los casos, lo único que siempre hay tener en cuenta, es incluir el valor !important a cualquier propiedad que agreguemos.


Versión comprimida

Si por el contrario no desean modificar nada y quieren ahorrar recursos, aquí les facilito la versión comprimida, en lugar de la que habíamos agregado, el codigo comprimido es el siguiente:


/*! Custom Style: Official Blogger lightbox | by zkreations*/
.CSS_LIGHTBOX_BTN_CLOSE,.CSS_LIGHTBOX_FILMSTRIP{background-color:rgba(0,0,0,.5)!important;-webkit-transition:background .3s!important;transition:background .3s!important}.CSS_LIGHTBOX_BG_MASK,.CSS_LIGHTBOX_BTN_CLOSE:hover,.CSS_LIGHTBOX_FILMSTRIP:hover{background-color:rgba(0,0,0,.8)!important}.CSS_LIGHTBOX_FILMSTRIP_CONTROLS_FRAME{border:3px solid #fff!important;border-radius:2px!important;box-shadow:0 1px 2px 0 #000!important}.CSS_LIGHTBOX_ATTRIBUTION_INDEX_CONTAINER{font-size:18px!important;font-family:arial!important;padding:.5em 0!important}.CSS_LIGHTBOX_SCALED_IMAGE_IMG{border:0 transparent!important;outline:transparent 0!important;box-shadow:0 2px 4px 0 rgba(0,0,0,.5)!important}.CSS_LIGHTBOX_SCALED_IMAGE{overflow:initial!important}.CSS_LIGHTBOX_BG_MASK{opacity:1!important}.goog-inline-block>.goog-inline-block{margin-top:12px!important}.CSS_LIGHTBOX_BTN_CLOSE{background-image:url(https://3.bp.blogspot.com/-GeXMKHvNSJg/We_DLDf4kzI/AAAAAAAAEIA/kevMNmyv1_EB8WESj-2DHV6Qn-7XKb6TgCLcBGAs/s1600/close.png)!important;width:60px!important;height:60px!important;right:0!important;top:0!important;background-position:center!important}.CSS_LIGHTBOX_INDEX_INFO{color:#fff!important;width:100%!important}.CSS_HCONT_CHILD,.CSS_HCONT_CHILDREN_HOLDER{margin:0 auto!important;float:none!important}

Eso a sido todo por ahora amigos, un aporte pequeño pero que estoy seguro de que beneficiara a más de uno. Si te ha servido no olvides compartir, ayudaras a mas personas y te lo agradeceria mucho tambien. Gracias por pasar.