Como personalizar o Lightbox

Yo! Yo! Mais um tutorial da maratona, esse já é bem conhecido, mas nunca cheguei a postar aqui no blog. Vou mostrar como personalizar o Lightbox, para quem não sabe o Lightbox é a galeria que abre ao clicar em uma imagem do blog. Em todo blog tem Lightbox, mas não vem personalizado apenas com o fundo preto. Como por exemplo desse blog: Preview  agora personalizado: Preview. Fica bem diferente não é? Todo corpo é mudado, fundo, a barra que mostra as imagens, a fronteira das imagens, texto, transparência e o botão de fechar. Bom então sem mais delongas vamos ao tutorial?

1. Tudo o que devemos fazer é substituir os estilos padrões com o nosso personalizado. Primeiramente vá ate a em Layout e depois Editar HTML, usando o atalho CTRL+F procure por:

Códigos

</ Head>

2. Agora acima dessa tag cole o seguinte código:

Códigos

<Style>
/ * Cor de fundo * /
.CSS_LIGHTBOX_BG_MASK {
background-color: #ffffff importante;
background-image: url ( image-url) importante;
! opacidade: 0,8 ! important;
filter: alpha (opacity = 90) ! important;
}
 / * Imagens Border * /
.CSS_LIGHTBOX_SCALED_IMAGE_IMG {
outline: 0px #fff sólido importante;!
-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;-webkit-box -shadow: 0px 0px 3px # 000000;-moz-box-shadow: 0px 0px 3px # 000000;box-shadow: 0px 0px 3px # 000000;}
/ * botão Fechar * /
 .CSS_LIGHTBOX_BTN_CLOSE {
background: url ( image-url ) no-repeat importante!;
width: 24px importante!;altura: 24px importante;}
 / * Miniaturas Bar Cor * /
.CSS_LIGHTBOX_FILMSTRIP {
background-color: #ccc importante;}
/ * Cor do texto * /
.CSS_LIGHTBOX_ATTRIBUTION_INFO, .CSS_LIGHTBOX_ATTRIBUTION_LINK {
color: # 000 importante;}
/ * Índice Info (número de imagens) * /
.CSS_LIGHTBOX_INDEX_INFO {
color: # 555555 ! important; }
</ style>

O código auto se explica, então fica fácil compreender. As partes em vermelho são imagem a primeira é do fundo a área que fica meio transparente, pode colocar uma imagenzinha ou textura se desejar. Já a segunda em vermelho é o botão de fechar. A parte em verde é as bordas aredondadas (fronteira) da imagem quando abrir. Já em azul é a leve sombra que fica ao fundo da imagem. Em laranja é o tamanho e largura do botão de fechar. Roxo  é a barra de miniatura, ela só vai aparecer quando tiver mais de uma imagem na postagem. Rosa cor do texto. Mostarda  é a cor de uma numeração de quantas imagens tem na postagem ou seja só vai aparecer quando tiver mais de uma imagem.

Sobre a transparência de fundo, se você adicionar um valor mais baixo (0,8). O fundo vai ficar mais transparente, okay?

Você também pode colocar sobre o ]]></b:skin>, mas é necessário remover <Style> e </Style>

É só isso XoXo <3