Como personalizar imagem lightbox stylesheet do seu Blogger

Olá amigos Mult-focos, vamos mostrar como personalizar o Lightbox Stylesheet do seu Blogger.

O Lighbox é aquele efeito quando clicamos na imagem do post ela sobrepõe em tamanho maior, tornando-se maior e consequentemente melhor de se visualizar. Confira o resultado aqui mesmo, clicando na imagem acima.

Bem o truque é bem fácil de adicionar e é o que veremos agora.

Vá ao painel do Blogger, selecione o blog que vai fazer a modificação se tiver mais de um.

Modelo, Editar HTML, na janela que se abrir procure por ]]></b:skin>

use Ctrl+F para facilitar sua procura.Acima de ]]></b:skin>
cole o código abaixo. Visualize e se estiver ok salve e isto é tudo.
 Lembrando que sempre é bom fazer um backup do seu template antes da modificação.
Você pode modificar (background-color: #ffffff !important;) para a cor de fundo que achar melhor
A opacidade também esta em 90 (filter: alpha(opacity=90) !important;) e outras mais se dominar Css.

/* MULT-FOCOS Lightbox
———————————————– */

/* Background Color */
.CSS_LIGHTBOX_BG_MASK {
background-color: #ffffff !important;
background-image: url(image-url-address) !important;
opacity: 0.8 !important;
filter: alpha(opacity=90) !important;
}

/* Images Border */
.CSS_LIGHTBOX_SCALED_IMAGE_IMG {
outline: 0px solid #fff !important;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0px 0px 5px #000000;
-moz-box-shadow: 0px 0px 5px #000000;
box-shadow: 0px 0px 5px #000000;
}

/* Close Button */
.CSS_LIGHTBOX_BTN_CLOSE {
background: url(image-url-address) no-repeat !important;
width: 24px !important;
height: 24px !important;
}

/* Thumbnails Bar Color */
.CSS_LIGHTBOX_FILMSTRIP {
background-color: #eaeaea !important;
border-top:1px solid #d2d2d2!important;
}

/* Text Color */
.CSS_LIGHTBOX_ATTRIBUTION_INFO, .CSS_LIGHTBOX_ATTRIBUTION_LINK {
color: #000 !important;
}

/* Index Info (number of images) */
.CSS_LIGHTBOX_INDEX_INFO {
color: #555555 !important;
}