Personalizar os títulos dos gadgets

Views:

Centralizando o título:

 h2 {
font: $(widget.title.font);
color: $(widget.title.text.color);
text-align: center; 
}

Colocar uma cor de fundo:

 h2 {
font: $(widget.title.font);  /*fonte do título do gadget*/
color: $(widget.title.text.color);  /*cor da fonte*/
background: #000;  /*color de fundo*/
}

Arredondando as bordas do fundo:

 h2 {
font: $(widget.title.font);
color: $(widget.title.text.color);
background: #000;
 -moz-border-radius: 3px;
-webkit-border-radius:3px;
-goog-ms-border-radius: 3px;
border-radius:3px;
}

Colocando sombra no texto do título:

 h2 {
font: $(widget.title.font);  /*fonte do título do gadget*/
color: $(widget.title.text.color);  /*cor da fonte*/
background: #000;  /*color de fundo*/
text-shadow:0px 1px 1px #fff; /*cor e inclinação da sombra*/
}

Veja como ficaria o código completo, com fundo vermelho:
h2 {
font: $(widget.title.font);  /*fonte do título do gadget*/
color: $(widget.title.text.color);  /*cor da fonte*/
background: #ff000b;  /*color de fundo*/
text-shadow:0px 1px 1px #fff; /*cor e inclinação da sombra*/
 -moz-border-radius: 3px;
-webkit-border-radius:3px;
-goog-ms-border-radius: 3px;
border-radius:3px;
}

E aqui o código completo, com a faixinha verde:
h2 {
font: $(widget.title.font);  /*fonte do título do gadget*/
color: $(widget.title.text.color);  /*cor da fonte*/
background: transparent url(http://3.bp.blogspot.com/-9qSzwQLCQME/UhfxRyrdrRI/AAAAAAAAuXQ/XUmtp_3gk7s/s1600/popular-smaller-2.png) center no-repeat;
height: 49px;
width: 262px;
text-shadow:0px 1px 1px #fff; /*cor e inclinação da sombra*/
 -moz-border-radius: 3px;
-webkit-border-radius:3px;
-goog-ms-border-radius: 3px;
border-radius:3px;
}


Home Sobre mim Tutoriais Loja de templates Portfólio Fanpage