Kv397.jpg.scaled.1000_large

Logo quando acabou o último tutorial eu logo pensei, com minha força e persistência,rs, eu vou conseguir modificar a LightBox e adivinhem ? Eu consegui, estou muito feliz, sozinha, sem a ajuda de nada e de ninguém, e é assim que saiu o tutorial exclusivíssimo que preparei !!!
Vou começar com a raiz de tudo, não precisam fazer, só vou ensinar como consegui:

Olhei o código fonte do meu blog, e com o Ctrl+F pesquisei LightBox, e de cara apareceu um link de CSS.


Depois, em Inspecionar elementos achei a imagem para fechar a LightBox então pesquisei seu link, no css que havia aberto, mas pesquisei apenas a parte: /img/lightbox/lightbox_sprite.gif.


E percebi que no primeiro encontro do Ctrl+F estava escrito perto da imagem: LIGHTBOX_BTN_CLOSE.
Logo Deduzi: Botão Fechar da LightBox.


Então copiei essa parte do css e colei no meu modificando o background, e fui fazendo isso, até que eu consegui personalizar o efeito.
No meu está assim:

/*LOVETDIXU.TK/*/ .edit do lightbox{}
.CSS_LIGHTBOX_BTN_CLOSE{background:url('http://i53.tinypic.com/n4uxif.png') no-repeat;width:39px;height:40px;top:5px;position:absolute;z-index:100}
.CSS_LIGHTBOX_BG_MASK{width:100%;height:100%;position:absolute;top:0;left:0;opacity:.5;background-color:#FF99CC;}
.CSS_LIGHTBOX_FILMSTRIP{background-color:#F0EBFC;line-height:0;overflow:hidden;position:relative;width:100%;height:59px}

Vou ensinar cada parte do css :

/*LOVETDIXU.TK/*/ .edit do lightbox{}
.CSS_LIGHTBOX_BTN_CLOSE{background:url('BOTÃO FECHAR') no-repeat;width:LARGURA DO BOTÃOpx;height:ALTURA DO BOTÃOpx;top:5px;position:absolute;z-index:100}
.CSS_LIGHTBOX_BG_MASK{width:100%;height:100%;position:absolute;top:0;left:0;opacity:.OPACIDADE DO FUNDO(POR VOLTA DA IMAGEM);background-color:FUNDO DO EFEITO(POR VOLTA DA IMAGEM);}
.CSS_LIGHTBOX_FILMSTRIP{background-color:FUNDO DA LISTA DE IMAGENS;line-height:0;overflow:hidden;position:relative;width:100%;height:59px}

É só isso, espero que tenham gostado, bjs, Evelyn.

9 coments:

Giih Reis (Gisele) disse... Reponder {}

Amei o post!

Bjs,
Giih!

http://blogdasmeninasblogueiras.blogspot.com

danih disse... Reponder {}

Legal, vou tentar no meu blog de teste :], espero que dê certo

http://meublogblogdadanii.blogspot.com/

Tay disse... Reponder {}

Nossa que legal! super exclusivo o tutorial, ameii pena que a minha é cbox... espero que você aprenda a fazer mais e mais tutoriais exclusivos =) Gostei muito;

Beijinhos,
bonequinhadeluxo10.blogspot.com

Evelyn VR disse... Reponder {}

@Giih Reis (Gisele), @danih e @Tay Obrigada *--*

CandyReis disse... Reponder {}

ah curti :D bem legal depois vou tentar

Evelyn VR disse... Reponder {}

@CandyReis Espero que use :D

Gleyce K disse... Reponder {}

Ótimo tutorial.

http://mundofashionfemenino.blogspot.com/

Beijinhos!!!

Evelyn VR disse... Reponder {}

@Gleyce K Obrigada *--*

CHIBI. HIME disse... Reponder {}

:p muito lindo seu blog

Postar um comentário

:a   :b  :c  :d  :e :f  :g  :h  :i  :j  :k  :l  :m  :n  :o  :p  :q  :r  :s  :t  :u

Comentar não dói!