Personalizando o título da sidebar (widget)

Já fazia tempo que eu tava pensando em fazer um tutorial assim, algo mais completo para os títulos da sidebar, eu já tinha feito um assim antes, mas acontece que ele não é muito completo (...). Bom, vou dividir em fases esse tutorial, vamos lá então!

Vamos mexer nos códigos da css, então vamos logo achando com Ctrl + f o código 

/* Headings

Obs. O código fica depois de <b:skin>, então primeiro abra a tag.

A partir de agora vamos apenas mexer nos códigos depois de /* Headings

1. Título da sidebar com sombra

O código vai estar assim:

/* Headings
----------------------------------------------- */
h2 {
  font: $(widget.title.font);
  color: $(widget.title.text.color);
}

Mude para:

/* Headings
----------------------------------------------- */
.sidebar h2 {
  font: $(widget.title.font);
  color: $(widget.title.text.color);
  text-shadow: #000 2px 3px 2px;
}

Entenda!

#000 - é a cor da sombra, mude pra qualquer outra (...)
O primeiro valor (2px) - distância horizontal da sombra em relação ao texto.
O segundo valor (3px) - distância vertical da sombra em relação ao texto.
O terceiro valor (2px) - raio da sombra.
Se no seu código já estiver ".sidebar h2" não precisa mudar nem acrescentar!

2. Cor do fundo do título da sidebar

O código vai estar assim:

/* Headings
----------------------------------------------- */
h2 {
  font: $(widget.title.font);
  color: $(widget.title.text.color);
}

Mude para:

/* Headings
----------------------------------------------- */
.sidebar h2 {  font: $(widget.title.font);
  color: $(widget.title.text.color);
  background: COR DO FUNDO;
}

Obs. Se no seu código já estiver ".sidebar h2" não precisa mudar nem acrescentar!