25 junho 2014

Separando os gadgets

Há pouco tempo eu descobri um tutorial super legal pra quem quer dar um up no visual do blog:separar os gadgets. Antes eu deixava a barra lateral colorida, mas depois que descobri isso, nunca mais. O tutorial é extremamente prático e rapidinho de fazer. Eu só testei no Modelo Viagem, não sei se vai dar certo nos outros.

1. Vá em Modelo > Personalizar > Avançado > Plano de Fundo da Barra Lateral e deixe transparente.

2. Vá em Modelo > Editar HTML e procure por /* Widgets. Se você nunca mexeu nessa área do template vai aparecer um código mais ou menos assim:

/* Widgets
----------------------------------------------- */
.sidebar .widget {
padding-bottom: 10px;
margin: 5px 0;
Isso é como está no meu, não sei no de vocês, mas vai estar parecido.

3. Adicione isso antes de fechar a chave:
  background:#fff; /*---- cor do fundo da caixa ----*/
  padding-left: 5px; /*---- espaço à esquerda ----*/
  padding-bottom: 5px;  /*--- espaço de baixo ---*/
  padding-right: 5px; /*--- espaço à direita ---*/
  padding-top: 5px; /*---- espaço de cima ----*/ 
4. Faça as alterações necessárias como alterar os números e mudar a cor de fundo. Se quiser a borda arredondada apenas acrescente isso e altere o número conforme desejar:
border-radius: 20px;
Se vocês fizerem exatamente como está aí o resultado será igual ao meu:


Creditos: garota inocente

Um comentário: