19.8.16

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. 

1 comentário: