Débora Lacortte
fevereiro 03, 2015
Vou ensinar como personalizar a sidebar.
Vamos aos primeiros passos.
Como sempre falo antes de fazer qualquer coisa no seu blog é muito importante fazer o Backup para restaurar se algo der errado.
Vá em'Editor de HTML' e clique em Ctrl+F e procure por:
'Headings'
Feito isso,você vai substituir por este código a seguir:
.sidebar h2 {
font-family: 'Lobster', cursive; /*Tipo de fonte*/
font-size: 12px; /*Tamanho da fonte*/
color: #ffffff; /*Cor da fonte*/
background: #45818e; /* cor de fundo dos títulos */
border:1px solid #45818e;/*cor da borda*/
width: 200px; /*largura da sidebar*/
margin-left:6px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
text-align: center; /*Alinhamento do texto*/
}
 |
| Esta imagem mostra a sidebar com cor de fundo. |
 |
| Esta imagem mostra a sidebar com imagem de fundo. |
Mas caso queria colocar imagem no lugar da cor cole o seguinte código:
.sidebar h2 {
font-family: 'Lobster', cursive; /*Tipo de fonte*/
font-size: 12px; /*Tamanho da fonte*/
color: #000000; /*Cor da fonte*/
background: url( URL DA IMAGEM); /* imagem de fundo dos títulos */
border:1px solid #45818e;
width: 200px;
margin-left:6px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
text-align: center; /*Alinhamento do texto*/
}
Onde está em vermelho você coloca o url da imagem escolhida.
"Aqui tem algumas opções de imagens"
"Aqui você tem a opção de escolher as cores em código"
Visualize se deu tudo certo é só salvar.
Qualquer coisa entre em contato comigo.
