23/12/2012

Personalizar títulos dos gadgets

12º tutorial do desafio!

Quer ter seu blog com os títulos gadgets assim,igual aqui no blog:

Então clique em Leia Mais para aprender!


1º-Vá no html,de ctrl+f e procure por:

.sidebar .widget

E apague:

.sidebar .widget {  border-bottom: 2px solid $(widget.border.bevel.color);  padding-bottom: 10px;  margin: 10px 0;}
.sidebar .widget:first-child {  margin-top: 0;}
.sidebar .widget:last-child {  border-bottom: none;  margin-bottom: 0;  padding-bottom: 0;}
.footer-inner .widget,.sidebar .widget {  font: $(widget.font);  color: $(widget.text.color);}

.sidebar .widget a:link {  color: $(widget.link.color);  text-decoration: none;}
.sidebar .widget a:visited {  color: $(widget.link.visited.color);}
.sidebar .widget a:hover {  color: $(widget.link.color);  text-decoration: underline;}

No lugar coloque:

.sidebar .widget {-webkit-border-radius: 0px;-moz-border-radius: 0px;border-radius: 0px;padding-bottom: 12px;margin: 0px 0;Background: #ffffff;margin-top:41px;padding:11px;box-shadow: 1px 2px 3px 1px #e1dddd;
}

Agora procure por:

.sidebar .widget h2 {


Apague:

.footer-inner .widget h2,.sidebar .widget h2 {  padding-bottom: .5em;}

No lugar cole:

.sidebar h2 {text-align:center;background-color: #ee91af;-moz-box-shadow: inset 0 0 10px #d85882;-webkit-box-shadow: inset 0 0 10px #d85882;box-shadow: inset 0 0 10px #d85882;padding:2px;-webkit-border-top-left-radius: 4px;-webkit-border-top-right-radius: 4px;-moz-border-radius-topleft: 4px;-moz-border-radius-topright: 4px;border-top-left-radius: 4px;border-top-right-radius: 4px;display:inline;float:right;margin-top:-38px;

Mude como preferir!

Pronto!

Crédito:kawaii world
BJO!


Um comentário: