18 março 2014

Como dividir os gadgets em caixas


Holla! Tudo bem?
Dividir a Sidebar é um tutorial bem procurado.
É aquele jeito em que os gadgets ficam em forma de "caixinhas". Não é tão difícil de fazer e fica bem bonito no blog.

Então, antes de tudo, vá em Design > Modelo > Personalizar e coloque Transparente no Plano de fundo da barra lateral:




Desse jeito, quando você separar os gadgets, o espaço entre um e o outro não ficará cinza ou a outra cor que estava selecionada.
Depois de salvar as alterações, vá em Modelo > Editar HTML. Aperte Ctrl F para abrir a barra de pesquisa, e nela coloque /* Widgets.  Vai estar mais ou menos assim:


.sidebar .widget {
  border-bottom: 2px solid $(widget.border.bevel.color);
  padding-bottom: 10px;
  margin: 10px 0;

}

Antes de fechar } cole:

background: #fff; /*---- cor do fundo do gadget ----*/ 
  padding-left: 10px; /*---- espaço à esquerda ----*/ 
  padding-bottom: 30px;  /*--- espaço de baixo ---*/ 
  padding-right: 20px; /*--- espaço à direita ---*/ 
  padding-top: 15px; /*---- espaço de cima ----*/ 
box-shadow: 1px 3px 15px 2px #ccc; /*---- sombra da caixa ----*/

}

Ajuste o que você quiser de acordo com a legenda de cada linha e pronto!
Para deixar o espaço entre um gadget e outro, vá aumentando  margin: 10px 0; Para   margin: 15px 0;,
margin: 20px 0; até ficar do jeito que você gosta.
Espero ter ajudado.


Fui!

Nenhum comentário:

Postar um comentário