25 de jul de 2013

Bordas nos gadgets e nas postagens ♥


Olá meus amores !
Tudo bem com vocês ?
A pedido de uma leitora, vou ensinar para vocês como deixar bordas ao redor dos Gadgets e na área das postagens do jeito que eu uso aqui no blog. Você pode alterar o código tanto mudando a cor, como a espessura da borda ... isso fica a seu critério. Não sei se funciona em outro modelo a não ser o Travel, porque eu não testei em outros :s


Clique em modelo, alterar Html, dê um Ctrl + F e procure pela seguinte tag: .footer-inner .widget,
Feito isso, note que aparecerá um código mais ou menos assim:


.footer-inner .widget,
.sidebar .widget { font: $(widget.font);
 color: $(widget.text.color);
}


Então, antes na chavinha vermelha você vai colocar o seguinte código:


box-shadow-top: 0px 1px 1px #E7E7E7;
border-top: 2px solid #9966FF;
border-bottom: 2px solid #FF66FF;
border-left: 2px solid #E7E7E7;
border-right: 2px solid #E7E7E7;


Feito isso, note que o seu código ficará assim:


.footer-inner .widget,
.sidebar .widget { font: $(widget.font);
color: $(widget.text.color);
box-shadow-top: 0px 1px 1px #E7E7E7;
border-top: 2px solid #9966FF;
border-bottom: 2px solid #FF66FF;
border-left: 2px solid #E7E7E7;
border-right: 2px solid #E7E7E7;
}


Você pode alterar a cor das bordas com esta tabela aqui <-
Mas caso queira borda em apenas alguns Gadgets, é só seguir este tutorial aqui <-





É o mesmo processo que o anterior. Vá no seu html, dê um Ctrl + F e procure por: .post-outer {
Achou? Então antes de fechar a chavinha cole o mesmo código que o anterior. Feito isso seu código ficará assim:


.post-outer {
margin: 3px 8px 15px;
background:#fff;
padding: 5px 5px;
box-shadow: 1px 4px 19px 2px #DCDCDC;
padding: 5px;
border-radius: 0px;
box-shadow-top: 0px 1px 1px #E7E7E7;
border-top: 2px solid #9966FF;
border-bottom: 2px solid #FF66FF;
border-left: 2px solid #E7E7E7;
border-right: 2px solid #E7E7E7;
}



Agora visualize e se estiver tudo certinho salve ;)
Espero que tenham gostado! 

2 comentários: