sexta-feira, 2 de dezembro de 2011

Personalizando lightbox padrão do blogger

Lightbox blogger

Introdução

Há alguns meses atrás, o blogger disponibilizou e oficialmente liberou um novo recurso para a plataforma, o lightbox padrão. O lightbox, por sua vez, é o mais básico possível, mas não deixa de cumprir a função de uma lightbox normal. Apesar de apresentar um barra de navegação entre as imagens bem básica, o recurso conta um sistema bem leve e compatível com os demais navegadores. Mas na minha opnião, o que realmente faltou foi um efeito de transição entre as imagens.

Mas até então não me manifestei em fazer alguma coisa pra mudar isso, porém, hoje vou mostrar como dar uma personalizada na lightbox nativa do blogger e deixar no seu jeito, como por exemplo trocar a cor do fundo da lightbox, aumentar a barra de navegação e etc. Lembrando que iremos usar apenas CSS.

Sendo assim, vamos ao tutorial e fique atento a cada passo para fazer tudo direitinho. Mas antes faça o seguinte:

1. Acesse o Painel principal do seu blog e vá em: Configurações -> Postagens e comentários -> ative a opção para mostrar imagens com a lightbox.

Permitir lightbox

 2. Entre no “Editar HTML” do seu blog e procure por:

 <body>

Agora acima dela cole:

<style>

</style>

Todos os códigos que estiverem mais abaixo vão ser colados entres essas duas tags: Ex:  <style>  Aqui vãos os códigos  </style>.

Agora vamos aos códigos para personalização:

Trocando a cor do fundo da lightbox

Alterar cor de fundo 
Vamos começar pelo fundo, trocando sua cor e seu nível de transparência. Para isso, cole o código abaixo entre as tags <style> e em seguida veja como modificar através da legenda.

.CSS_LIGHTBOX_BG_MASK {
opacity: 0.5 !important;
background-color: #222 !important;
} 

Legenda:

Vemelho: Nível de transparência (0.0 retira o fundio e o valor 1 deixa-o sem transparência).
Azul:Cor do fundo em hexadecimal.

Colocando sombra e borda nas imagens da lightbox

Alterar imagem da galeria borda e sombra
Este aplica sombra nas imagens da lighbox juntamente com uma borda. Cole o código abaixo entre as tags <style>.

.CSS_LIGHTBOX_SCALED_IMAGE_IMG {
cursor: pointer;
outline: 5px solid #fff  !important;
box-shadow: 0px 0px 19px 5px #111;
}

Legenda:

Vermelho: Espessura da borda, quando maior mais grossa e vice-versa.
Azul: Cor da borda em hexadecimal.
Verde: Cor da sombra em hexadecimal.

Personalizando a barra de navegação entre as imagens

Alterar barra de navegação

Este trecho de código abaixo permitirá que você altere a barra de navegação da lightbox. Cole o código entre as tags <style>

.CSS_LIGHTBOX_FILMSTRIP {
background:#991d1d  !important;;
line-height: 0;
overflow: hidden;
position: relative;
width: 100%;
height: 60px;
}

Legenda:

Vermeho: Cor do fundo da barra de navegação em hexadecimal.
Azul: Altura da barra (quanto maior o número mais alto a barra e vice-versa).

Trocando a imagem do botão “Fechar”

Alterar botão Fechar

O código abaixo permitirá que você altere aquele pequeno botão “Fechar” na parte superior ao canto direito da lightbox. Cole o código entre as tags <style>.

.CSS_LIGHTBOX_BTN_CLOSE {
cursor: pointer;
background: url(&#39;http://icons.iconarchive.com/icons/custom-icon-design/mini/32/Close-icon.png&#39;) no-repeat  !important;;
width: 32px !important;
height: 32px !important;
top: 3px;
position: absolute;
z-index: 100;
}

Legenda:

Vermelho:
URL do ícone fechar.
Azul: Largura do botão (recomendo colocar a largura da imagem do ícone)
Laranja: Altura do botão (recomendo colocar a altura da imagem do ícone)
Verde: Espaçamento no topo (quanto maior, mais espaçamento)

Personalizando a barra de informação da lightbox

Alterar barra de informação

O trecho de código CSS abaixo vai permitira a personalização daquela barrinha onde fica a informação de quantas imagens tem na galeria. Cole o código abaixo entre as tags <style>.

.CSS_LIGHTBOX_INDEX_INFO {
color: #fff;
font-size: 17px  !important;;
line-height: normal;
min-height: 1em;
position: relative;
text-align: center;
top: 6px;
background: #333;
border-radius: 5px;
margin-bottom: 10px;
padding: 8px;
text-shadow: 1px 1px 1px #000;
border: 1px #fff solid;
}

Legenda:

Vermelho: Cor da letra da barrinha.
Azul: Tamanho da fonte do texto.
Verde: Cor do fundo da barrinha:
Laranja: Nível de arredondamento da borda.
Marrom: Cor da sombra do texto.
Rosa: Espessura da borda da barrinha.
Lima: Cor da borda.

Observações finais

No final ficará algo assim:

<style>

.CSS_LIGHTBOX_BG_MASK {
opacity: 0.5 !important;
background-color:  #222 !important;
}

.CSS_LIGHTBOX_SCALED_IMAGE_IMG {
cursor: pointer;
outline: 5px solid #fff  !important;
box-shadow: 0px 0px 19px 5px #111;
}
.CSS_LIGHTBOX_FILMSTRIP {
background:#991d1d  !important;;
line-height: 0;
overflow: hidden;
position: relative;
width: 100%;
height: 59px;
}

.CSS_LIGHTBOX_BTN_CLOSE {
cursor: pointer;
background: url(&#39;http://icons.iconarchive.com/icons/custom-icon-design/mini/32/Close-icon.png&#39;) no-repeat  !important;;
width: 32px !important;
height: 32px !important;
top: 3px;
position: absolute;
z-index: 100;
}

.CSS_LIGHTBOX_INDEX_INFO {
color: white;
font-size: 17px  !important;;
line-height: normal;
min-height: 1em;
position: relative;
text-align: center;
top: 6px;
background: #333;
border-radius: 5px;
margin-bottom: 10px;
padding: 8px;
text-shadow: 1px 1px 1px black;
border-top: 3px white solid;
}

</style>

Após o término da personalização, salve. Caso tenha alguma dúvida ou sugestão para alterar o visual da lightbox, deixe um comentário. Espero que tenham gostado e até mais!

Marcadores: , , ,