19/07/2013

[Tuto]: Personalizar o titulo dos gadgets

Bom dia! *-*

Hoje acordei com uma vontade louca de mexer com css/html, sai por ai procurando o que postar...Que tal um tutorial de como personalizar o título dos gadgets? Então, hoje você vai pode aprender como colocar o título dos gadgets assim, igual ao do blog, bora? Créditos totais ao Miki Candy  Bem, primeiramente igual á aqui do blog e depois o do blog da Miki, o Miki Candy.

1.Vá em seu HTML >> Aperte F3 >> Procure por h2 {Aparecerá um código semelhante á esse:

h2 {
 font: $(widget.title.font);
 color: $(widget.title.text.color);
 } 
 Agora substitua todo esse código por esse:
.sidebar .widget h2 {margin-top: 5px;font-family: code;font-weight: lighter;font-size: 18px;color: #B0C4DE;text-align: left;text-shadow:#ccc 0px 1px 1px;-webkit-transition-duration: .80s;}.sidebar .widget h2:hover {color: #8877aa;text-shadow:#ccc 0px 1px 1px;padding-left : 70px;-webkit-transition-duration: .80s; }
As partes que estão negrito são as que devem ser alteradas.
2. Mas se preferir a sidebar do Miki Candy, use esse código:

.sidebar .widget h2 {
margin-top: 5px;
font-family: code;
font-weight: lighter;
font-size: 18px;
color: #B0C4DE;
text-align: left;
text-shadow:#ccc 0px 1px 1px;
-webkit-transition-duration: .80s;
}
.sidebar .widget h2:hover {
color: #8877aa;
text-shadow:#ccc 0px 1px 1px;
padding-left : 70px;
-webkit-transition-duration: .80s;
 Então, faça as alterações necessárias nos lugares onde que estão em negrito, o primeiro e o segundo são a fonte do Titulo dos Gadgets, o outro é a cor da fonte e o outro é a cor que ficará quando se passar o mouse por cima dela.
Dúvidas? Comente!

Créditos:  

Nenhum comentário: