Como personalizar a Light Box

Olá gente!

Estou feliz pois abriu um restaurante japonês perto da minha casa, mais ao mesmo tempo estou pasma em saber que tivemos mais plágios...ainda bem que sempre credito os blogs quando pego alguma coisa deles, é, mais eu trouxe um tutorial muito útil que achei no O Meu Brilhante Mundo faz um tempo, e usei aqui no blog várias vezes, o resultado fica ótimo então resolvi postar, e para quem não sabe o que é uma light box, clique na imagem:

viram o visualizador como é?! vamos aprender como modificar seu visualizador para ficar assim, claro que você poderá escolher todas as cores, é mais fácil do que imaginam, vamos aprender?

Primeiro, siga os passos explicados nessa imagem que encontrei no O.M.B.M

Depois entre no seu editar HTML e procure por:

</head>

Agora cole abaixo dele:

<style>

</style>

Todos os códigos de personalização vão ser colados entres essas duas tags: 

Ex:  <style>  Aqui vãos os códigos  </style>.

Agora chegou a hora de personalizar!

Fundo:

Cole entre as tags o seguinte código:

.CSS_LIGHTBOX_BG_MASK {

opacity: 0.5 !important;

background-color: #222 !important;

}

Verde: Código da cor

Rosa: O tanto de opacidade

Barra de navegação:

Cole entre as tag's:

.CSS_LIGHTBOX_FILMSTRIP {

background:#991d1d !important;;

line-height: 0;

overflow: hidden;

position: relative;

width: 100%;

height: 60px;

}

Só edite oque está de verde.

Botão de fechar:

Cole entre as tag's:

.CSS_LIGHTBOX_BTN_CLOSE {

cursor: pointer;background: url('URL') no-repeat !important;;

width: 32px !important;

height: 32px !important;

top: 3px;

position: absolute;

z-index: 100;

}

E no URL substitua pelo botão que quiser, achei no google alguns botões para vocês:

(créditos)

              

(Créditos)

créditos secundários: www

ah, e não se esqueçam de curtir nossa chocopágina do facebook clicando aqui, depois irei postar jogos legais lá para vocês!