Tutorial - Borda Hover na Área da postagem e Sidebar

Konnichiwa Minna \(-. -)/

Como vão?Espero que bem. Bom, quero muito fazer um novo lay pro blog, mas ta dificil, a ultima vez que coloquei altas paradas no cabeçalho ficava diferente a resolução para várias pessoas ¬¬' triste.

Mas vou ver no que vai dar, então hoje eu decidi postar um tuto que ensina colocar bordas hover na area de posts e na sidebar.

Na área de posts faça o seguinte :

no seu html clique dentro da caixa do código e tecle Ctrl+F e procure por .main-inner .column-center-outer {

você ira encontrar o seguinte

.main-inner .column-center-outer {

  background: $(post.background.color) $(post.background.url) repeat scroll top left;

  _background-image: none;

}

Você irá substituir este código por?

.post-outer {

background: #fff;

font-family: calibri; /*FONTE*/

color: #fff;

padding: 10px; /*Não modifique aqui*/

border-top: 5px solid #SUACOR;

border-bottom: 5px solid #SUACOR;

box-shadow: inset 0 0 15px #E3E3E6, 0 0 3px #ccc;

-webkit-transition-duration:  1.50s;

}

.post-outer:hover {

background:#fff;

border-top: 5px solid #SUACOR;

border-bottom: 5px solid #SUACOR;

box-shadow: inset 0 0 15px #D2D2D2, 0 0 3px #ccc;

}

 Agora na sidebar:

Procure por /* Widgets 

abaixo desta tag você irá encontrar .sidebar .widget { apague esta primeira tag até a chave e cole:

.sidebar .widget {

background: #fff;

font-family: calibri; /*FONTE*/

color: #fff;

padding: 10px; /*Não modifique aqui*/

border-top: 5px solid #Cor da borda de cima normal;

border-bottom: 5px solid #Cor da borda debaixo normal;

box-shadow: inset 0 0 15px #E3E3E6, 0 0 3px #ccc;

-webkit-transition-duration: 1.50s; /*duração da transição*/ 

}

.sidebar .widget:hover {

background:#fff;

border-top: 5px solid #Cor da borda de cima hover;

border-bottom: 5px solid #Cor da borda debaixo hover;

box-shadow: inset 0 0 15px #D2D2D2, 0 0 3px #ccc;

}

Este tuto eu encontrei no Bunny Crazy, então os devidos creditos ^.^

Chu♥~