Personalizar titulo dos gadgets do blog

O código abaixo pode até parecer complicado mas não. Vou explicar, passo a passo, todo o procedimento para dar um estilo bem legal nos títulos dos seus gadgets. Veja abaixo:

Primeiro você clica em "Modelo", depois vá em "editar html" e "expandir elemento de página". Agora procure por:  "h2 {"



Se você nunca editou esta parte do template, ela vai estar mais ou menos assim:

/*   Headings
-----------------------------------------------*/
h2 {
font: $(widget.title.font);
color: $(widget.title.text.color);
}
 
Substitua o trecho destacado por:

 .sidebar h2 {
font-family: 'Sofia', cursive; /*Tipo de fonte*/
font-size: 26px; /*Tamanho da fonte*/
color: #FFAEB9; /*Cor da fonte*/
border-bottom: 2px solid #fff; /*Borda de baixo, apague se não quiser*/
border: 3px double #000000; /*Borda total, apague se não quiser*/
background: url( --url da imagem-- ) no-repeat center;
height: 36px;/*Altura da imagem*/
width: 287px; /*Largura da imagem*/
text-align: center; /*Alinhamento do texto*/
border-radius: 5px;  /*Borda arredondada*/
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
 
Para manter a fonte e a cor original do título, substitua a parte:

font-family: 'Sofia', cursive; /*Tipo de fonte*/
font-size: 26px; /*Tamanho da fonte*/
color: #FFAEB9; /*Cor da fonte*/
Por esta:

font: $(widget.title.font);
color: $(widget.title.text.color);
 
Últimos ajustes:
- No trecho: --url da imagem--  vocês podem trocar por
uma imagem personalizada ok?
Não esquecendo de ajustar as medidas da sua imagem.

- Mais ao invés de uma imagem vocês queiram apenas uma cor,
é só substituir essa parte:

background: url( --url da imagem-- ) no-repeat center;
height: 36px;/*Altura da imagem*/
width: 287px; /*Largura da imagem*/

Por esta:

background: #000000; /*Cor de fundo*/

O meu script ficou assim:

/* Headings
----------------------------------------------- */
 .sidebar h2 {
font: $(widget.title.font);
color: $(widget.title.text.color);
border: 3px double #000000; /*Borda total, apague se não quiser*/
background: #bbbbbb; /*Cor de fundo*/
text-align: center; /*Alinhamento do texto*/
}

Visualize se estiver tudo OK, salve!

OBS.: SE POR ACASO VOCÊ NÃO ENCONTRAR "h2 {", COLE TODO O CÓDIGO ABAIXO DE "/* Headings".