Como colocar bordas nos gadgets

Clique em Design >> Editar Html. Marque a opção Expandir modelos de widgets.
Pressione as teclas CTRL+F e procure por .post {
se você usar os templates artisteer procure por.art-post{
e caso seu template não possua o código .post { adicione-a antes da tag ]]>
Abaixo do código procurado você deverá inserir este código:


Borda no Body

body {

background: #fff;

margin: 1px;

color: #333;

border: 5px double #ff0000;

padding: 5px;

}








Borda no outer-wrapper

#outer-wrapper {

width: 660px;
margin: 0 auto;
padding: 10px;
border: 2px dotted #ff0000;
}








Borda na coluna da Sidebar

#sidebar-wrapper {

width: 220px;

float: right;

border: 1px dashed #ff0000;

padding: 5px;

}










Borda no Main

#main-wrapper {

width: 410px;

float: left;

border: 5px groove #ff0000;

padding: 5px;

}

Bordas no conteúdo das colunas


Neste caso, a única dificuldade é encontrar onde estão os estilos para os elementos dentro das colunas. Veja os exemplos:








Bordas nos posts

.post {

margin: .5em 0 1.5em;

border: 4px outset #ff0000;

padding: 1em 1em 1.5em 1em;

}












Bordas nos widgets da Sidebar

.sidebar .widget {

border: 3px inset #ff0000;

padding: 3px;

margin: 0 0 1.5em;

}






Borda no header


Aqui veremos como colocar a borda na coluna do header e no conteúdo. A borda vermelha é da coluna e a preta é do conteúdo:








#header-wrapper {

width: 660px;

margin: 0 auto 10px;

border: 1px solid #ff0000;

}

#header {
margin: 5px;
border: 1px solid #000;
text-align: center;
color: #ff0000;
}

Note que destaquei três partes do código:

border: 3px inset #ff0000;

• Em azul equivale ao tipo de borda;
• Em vermelho equivale a expessura da borda;
• Em verde equivale a cor da borda.

Vejas "Estilos Bordas e cores "clique aquii "