Tutorial: Bordas em Hover na sidebar e nas postagens

Oiiiee Escritoras e.e

Tudo bem com vocês ?? Eu estou muito desanimada, pois dia 03/02 começam as minhas aulas... Buuuaa Apesar que vou rever minhas amigas, pois faz um tempinho que não nos vemos...*u*
Mas, eu vim postar um tutorial que a May do Black Dream, me pediu na nossa página F.A.Q.
O tutorial é pra deixar as bordinhas em hover, que nem o daqui. E pra quem não sabe o que é hover, irei explicar, é quando você passa o mouse em algo colorido e ele muda de cor.
Ex. Passe o mouse

Agora você já sabe onde clicar !!


Vamos ao tutorial:

Bordas na área da postagem

Vá em Editar HTML, aperte Ctrl + F e procure por /* Posts e abaixo daquele pontilhado cole:

 

.post-outer {

background:#fff;

border-top: 2px solid #cor;

border-bottom: 2px solid #cor;

padding: 2px;

margin-top: 2px;

margin-bottom:20px;

box-shadow: 0 0 2px #000;

-webkit-transition-duration: .60s;

}

.post-outer:hover {

border-top: 2px solid #cor;

border-bottom: 2px solid #cor;

box-shadow: 0 0 1px #000;

-webkit-transition-duration: .60s;

}

 

 

Agora vamos modificar do seu jeito. Mude aonde está escrito #cor , para a cor desejada. Aonde está escrito hover , é a cor que será mostrada ao passar o mouse. Então mude o que está escrito #cor abaixo de hover, para por a barrinha em hover.

 

Se você não quiser as sombras mude os números de vermelho 2 e 1 pra 0. Se quiser por as sombras, mude o #000, para a cor desejada.

Bordas na sidebar

 

Vá em Editar HTML, aperte Ctrl + F e procure por /* Widgets e abaixo daquele pontilhado cole:

 

.sidebar .widget {

background:#fff;

border-top: 2px solid #cor;

border-bottom: 2px solid #cor;

padding: 5px;

margin-left: -30px;

margin-top: 0px;

margin-bottom:20px;

border-radius:0px;

box-shadow: 0 0 4px #000;

-webkit-transition-duration: .60s;

}

.sidebar .widget:hover {

border-top: 2px solid #cor;

border-bottom: 2px solid #cor;

box-shadow: 0 0 2px #000;

-webkit-transition-duration: .60s;

}

 

Agora vamos modificar do mesmo jeito. Mude aonde está escrito #cor , para a cor desejada. Aonde está escrito hover , é a cor que será mostrada ao passar o mouse. Então mude o que está escrito #cor abaixo de hover, para por a barrinha em hover.

 

Se você não quiser as sombras mude os números de vermelho 2 e 1 pra 0. Se quiser por as sombras, mude o #000, para a cor desejada.

 

Créditos pelo tutorial: Assim Tipo Tudo e One Dí Things.

 

Espero que tenham entendido e gostado do tutorial. É um pouco demoradinho mais o resultado fica lindo. Aconselho você á usar no modelo Travel. Nele esse tuto dá 100% certo.

 

Fiquem com Deus...B-bjuuxx e até a próxima !!