Tutorial: Como deixar a barra lateral do blog separada por gadgets?

 

 Depois de algum tempo sem postar tutoriais, hoje eu vou ensinar - pra quem não sabe - como separar a coluna lateral em gadgets.

É bem rápido e simples, e deixa o blog bem diferente. Só não faço no NERDSferas porque esse lay ta muito fofinho assim, mas no próximo eu vou usar esse tutorial.

Bem, primeiro vá em Design de Modelo >  Avançado > Plano de fundo da barra lateral > e deixe - o Transparente. Salve e vá em Design > Editar HTML > CTRL +F > e procure por /* Widgets

Vai aparecer assim:

/* Widgets

----------------------------------------------- */

.sidebar .widget {

  border-bottom: 2px solid $(widget.border.bevel.color);

  padding-bottom: 10px;

  margin: 10px 0;

}

 Coloque antes da chaves esse código:  background: #cccccc;

 Ficará assim:

/* Widgets

----------------------------------------------- */

.sidebar .widget {

  border-bottom: 2px solid $(widget.border.bevel.color);

  padding-bottom: 10px;

  margin: 10px 0;

 background: #cccccc;

}

Visualize e se tiver dado tudo certo é só salvar. Se quiser a sua lateral de outra cor é só mudar o trecho: #cccccc, pelo código de outra cor. 

Tabela de cores