quarta-feira, 3 de agosto de 2011

Como colocar separadores entre os gadgets



No post anterior vimos como colocar separadores entre as postagens, e agora veremos como colocar separadores entre os gadgets.


Podemos usar bordas:



Ou imagens:




Para isso vamos em Design > Editar HTML;

Se quiser uma borda, cole antes de ]]></b:skin> o seguinte:

.column-right-outer .widget, .column-left-outer .widget {
border-bottom:4px solid #000;
padding-bottom:20px;
}


Se quiser uma imagem, substitua o código acima por este:

.column-right-outer .widget, .column-left-outer .widget {
background: url(URL da imagem)no-repeat 50% 100%;
padding-bottom:70px;
border:0;
}


Basta colocar a URL da imagem no local indicado, se a imagem ficar pequena aumente o valor 70px;

No caso das bordas, para personalizá-las basta alterar os valores em :

border-bottom:4px solid #000;

Onde 4px é a grossura, solid o tipo de borda, que pode ser trocado por dotted, dashed, double, groove, ridge, outset, ou inset, e #000 é a cor da borda.
Em padding-bottom:20px; podemos alterar o valor da distância entre os gadgets.

4 comentários:

Valeria Avellar disse...

E como consigo colocar MARGEM no meu gadget em HTML?

coloquei um gadget de FALE CONOSCO em meu blog, porém não sei como colocar uma margem nele.
Você poderia me dar uma dica?

Marcelo disse...

Oi Valeria Avellar, vou ficar te devendo essa, nao da p/explicar por aq.

Abrç.

Nivea F. disse...

Olá, me ajudou muito. Adorei a dica!! Tem muitas outras que vou seguir e ao blog também!! Meu blog: http://mae-solo.blogspot.com/#. Bjs

Feira no Jardim disse...

Nossa, ficou ótimo! Usei a imagem dos passarinhos, editando ela no print e hospedando no Picasa! Deu certinho os códigos! Muito Obrigada!

Artigos Relacionados

Related Posts Plugin for WordPress, Blogger...