WCP Tutoriais - Colocando Bordas Coloridas no Sidebar e Área da Postagem

Oi! Hoje estou estreando a nova página do blog - Tutoriais - e para começar vou fazer o tuto de como colocar bordas coloridas na região da postagem e dos gadgets!

Bem essas bordas que eu estou falando é igual ao daqui do meu blog, bem como você poder ter percebido deixar o blog bem mais fofo. Vamos parar de conversa e vamos mão à Obra!

Personalizar a Sidebar:

Aviso:Você deve usar os widgets da sidebar separados, se você não usar separados não fica muito legal. Para quem não sabe como separar os widgets eu depois vou postar como separa-los!!

Você deve ir em Modelo > Editar HTML > Prosseguir > dê Ctrl + F ou F3 e procure por:

]]></b:skin>

Logo após achar você deve 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; }

Onde está #d4bfb1 e #b1d4b3 no código acima você pode editar. Depois salve e como você podem notar o último widget não fica com a borda de baixo, então quem quiser com a borda procure por:

.sidebar .widget:last-child {

Aparecerá + ou - assim:

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

Após você deve colar este código:

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; }

Abaixo de padding-bottom: 0;

Onde está #d4bfb1 e #b1d4b3 no código acima você pode editar. Depois salve e pronto, seus widgets já estarão com as bordas das cores escolhidas por você!!

Área da Postagem

Primeiramente você irá em Modelo > Editar HTML > Prosseguir > dê Ctrl + F ou F3 e procure por:

.main-inner .column-center-outer {

Após de localizar o código você deverá substitui-lo todo o código por:

.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 <b>#b1d4b3</b>; /*------------Cor da barra de baixo------*/border-radius:2px; /*-------------Arredondamento da área--------*/border-bottom: 5px solid <b>#b1d4b3</b>;border-top: 5px solid #d4bfb1;box-shadow: inset 0 0 6px #e2e1e1, 0 0 1px #ccc;}

Onde está #d4bfb1 e #b1d4b3 no código acima você pode editar. Depois salve e veja se tudo deu certo, qualquer dúvida só comentar!!