Tutorial:Colocando Bordas Coloridas Na Sidebar e Na Área de Postagem

Hello Girls *---* Tudo bom? Hoje depois de um bom tempo sem tutoriais eu trouxe um super legal,que vai deixar seu blog super fofo. São essas Bordinhas em cima da sidebar e nas postagens,eu não uso aqui no blog,Mais o Próximo lay do blog está Pronto õ/ e eu coloquei elas,o Lay ficou mt Fofo :3

Bem vamos ao Tuto então ;)

Personalizando a Sidebar

AVISO: Você devera usar o widgets da sidebar separada, se você não usar separados não ficara muito bom. 

Você ira em Modelo > Editar Html > Prosseguir > de Ctrl + F ou F3 e Procure por: 

]]></b:skin>

 Logo apos achar você devera colar o código abaixo ACIMA do código procurado:

.sidebar .widget {background:#fff; /*--------Cor do fundo------*/border-top: 5px solid #d4bfb1; /*------------Cor da barra de baixo------*/padding: 5px; /*------------Espaço interno------*/margin-left: -13px; /*------------Espaço externo da esquerda------*/margin-top: 0px; /*------------Espaço externo de cima------*/margin-bottom:25px; /*------------Espaço externo de baixo------*/border-radius:2px; /*-------------Arredondamento do gadget--------*/border-bottom: 5px solid #b1d4b3;box-shadow: inset 0 0 6px #e2e1e1, 0 0 1px #ccc;}

dite só aonde tiver em negrito. Depois de editar salve, bom como vocês podem ver depois de salvar o ultimo widgets não fica com a borda de baixo, então quem quiser com a borda de baixo no ultimo widgets você devera procura por:

.sidebar .widget:last-child {

 Aparecera mais o menos assim:

.sidebar .widget:last-child {  border-bottom: none;  margin-bottom: 0;  padding-bottom: 0;

Logo apos achar, você devera colar esse código ↓ abaixo de padding-bottom: 0; 

background:#fff; /*--------Cor do fundo------*/border-top: 5px solid #d4bfb1; /*------------Cor da barra de baixo------*/padding: 5px; /*------------Espaço interno------*/margin-left: -13px; /*------------Espaço externo da esquerda------*/margin-top: 0px; /*------------Espaço externo de cima------*/margin-bottom:25px; /*------------Espaço externo de baixo------*/border-radius:2px; /*-------------Arredondamento do gadget--------*/border-bottom: 5px solid #b1d4b3;box-shadow: inset 0 0 6px #e2e1e1, 0 0 1px #ccc;}

Edite so aonde estiver em negrito pela cor usada nos outros widgets. Depois salve e pronto seu widgets esta do jeito que você queria. Agora vamos personalizar a área da postagem.

Personalizando área de postagem

Agora vamos personalizar a área das postagem, com mesmo jeito que ficou a sua sidebar.
Você ira em Modelo > Editar Html > Prosseguir > de Ctrl + F ou F3 e Procure por:

.main-inner .column-center-outer { 

Logo apos de localizar o código acima você devera substituir o código todo por esse código:

.post-outer {margin: 4px 2px 30px;padding: 10px 10px;background:#ffffff;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;er-top: 5px solid #b1d4b3; /*------------Cor da barra de baixo------*/border-radius:2px; /*-------------Arredondamento da área--------*/border-bottom: 5px solid #b1d4b3;border-top: 5px solid #d4bfb1;box-shadow: inset 0 0 6px #e2e1e1, 0 0 1px #ccc;}

                                                                                                                            

Be, esse foi nosso  Tutorial de Hoje.

Créditos Totais a:(www)

Até a Próxima Cats *----* Bye