Lightbox personalizada

Ohayou, minna-san ^^ O blog não morrerá tão cedo, apesar das minhas ausências constantes, e caso alguém não tenha notado, sempre que eu volto trago mais de um tutorial de uma vez. Então, hoje faremos assim: vou ensinar a personalizar a lightbox, trarei alguns menus e efeitos, vou fazer um post que ensina a editar vídeos no SonyVegas, e se sobrar tempo ainda ensino a dominar perfeitamente os básicos. 

Este tutorial é sobre a lightbox - tirei o tuto [daqui], mas eu juntei os vários códigos e coloquei as explicações no próprio, assim podem adicionar tudo de uma vez. Também fiz pequenas alterações no modelo, e podem ver o resultado [aqui] - sintam-se livres para mudar as cores. Quem precisar de botões diferentes, pode criar os seus, ou tirar destes links: www www

Ativando a lightbox

Vá em Configurações > Postagens e Comentários > Na parte de postagens, confira se está selecionado "Sim" na linha "Mostrar imagens com a Lightbox" , caso contrário, coloque sim e salve.

Personalizando o modelo

Vá em Modelo > Editar HTML > Use Ctrl+F para procurar por /b:skin e acrescente em cima:

.CSS_LIGHTBOX_BG_MASK { /*light box fundo*/

opacity: 0.8!important;

background-color: #301f36!important;

}

.CSS_LIGHTBOX_FILMSTRIP { /*light box barra de navegação*/

background: #603470!important;

box-shadow: inset -100px 0px 0px #3c164d, inset -200px 0px 0px #4e255e, inset 100px 0px 0px #3c164d, inset 200px 0px 0px #4e255e;

line-height: 0;

overflow: hidden;

position: relative;

width: 100%;

height: 60px;

}

.CSS_LIGHTBOX_BTN_CLOSE { /*light box botão fechar*/

cursor: url(http://media.tumblr.com/tumblr_m2wiy7v2eS1qfamg6.png), progress;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheQpBoE9Fut6bJX_NP7I27kyg3RqHyRH2eNpCpQWmswTA4In8pzXoWCM0O6iFRNVFu9mZ3uj2EDWVJSSrjML98EOcF1l1IF6urZCvDXcNsZFxvKf_5dtJXwiatbo3zocfEDoAPplYMzy4/s1600/botao1b.png) no-repeat !important;

width: 40px!important;

height: 40px!important;

top: 5px;

right: 5px;

position: absolute;

z-index: 100;

}

.CSS_LIGHTBOX_INDEX_INFO {  /*light box texto que indica a imagem em que você está*/

color: #fff!important;

font-size: 12px;

line-height: normal;

min-height: 1em;

position: relative;

text-align: center;

top: 2px;

}

.CSS_LIGHTBOX_INDEX_INFO b {

color: #fff!important; /* cor do negrito, OPCIONAL, se não quiser apenas apague essa linha*/

text-shadow: 1px 1px 1px #4e255e;

}

.CSS_LIGHTBOX_SCALED_IMAGE_IMG {  /*light box imagem*/

cursor: url(http://media.tumblr.com/tumblr_m2wiy7v2eS1qfamg6.png), progress;

outline: none!important;

position: relative;

padding: 5px;

border: 1px dashed #fff!important;

}

Era tudo. Simples, rápido e bonito.