Oi !
Trouxe pra você um
tutorial que quase todos os blogueiros estão usando que são bordas coloridas na
sidebar e na área das postagens.
Veja a imagem abaixo
para ver como fica.
Personalizando a Sidebar
Aviso: Você devera usar o widgets da sidebar
separada, se você não usar separados não ficara muito bom. Para quem não usa
separada segue esse tutorial e depois você devera continuar com esse tutorial.
Vá em
Modelo>>Editar HTML>>Aperte Ctrl+F ou F3 e procure por:
]]></b:skin>
Acima deste código encontrado cole esse:
.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;
}
Edite só onde está em
negrito, visualize e salve se
estiver certo.
Lembrando que no
último widget não fica com borda, mas se você quiser a borda no último widget você
procura por:
.sidebar .widget:last-child {
Vai aparecer mais ou
menos assim:
.sidebar .widget:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
Você deverar cola
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 aonde estivem
em negrito, visualise e se estiver
tudo certo salve.
Personalizando área de postagem
Agora vamos
personalizar a área de postagem.
Em Modelo>>Editar
HTML>>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;}
Edite onde estiver em
negrito, visualize se tudo estiver
certo salve.
Créditos: Prince Teens
Pronto pessoal é
isso, se quiserem algum tutorial é só pedir em contato.