27 janeiro 2015

Como colocar uma imagem como título nos gadgets


Eu acho essas faixinhas muito legais,porque elas deixam o blog mais elegante,e é muito fácil.

Vá em Modelo/Editar HTML depois aperte Ctrl + F e procure por h2 {
Logo abaixo do texto que você procurou vai estar assim:

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


Apague esse código e subistitua por esse:


.sidebar h2 {
font-family: Century Gothic; /*Tipo de fonte*/
font-size: 16px; /*Tamanho da fonte*/
color: #000000; /*Cor da fonte*/
border-bottom: 2px solid #fff; /*Borda de baixo, apague se não quiser*/
background: #fbfbfb; /*Cor de fundo*/
text-align: center; /*Alinhamento do texto*/
}

agora é só modificar as cores e a fonte como quiser.Se quiser colocar uma imagem,substitua esse código:

background: #fbfbfb; /*Cor de fundo*/
Por este:


background: url(link_da_imagem) no-repeat center;
height: 30px;/*Altura da imagem*/
width: 200px; /*Largura da imagem*/



Visualize se está tudo certo e salve.
Exemplos de faixinhas:


Espero que tenham gostado do Tuto. :)





Nenhum comentário:

Postar um comentário

Heey muito obrigado por comentar!
- Comentários com xingamentos serão excluídos.
- Deixe o endereço do seu blog,se eu gostar eu sigo.
- Comentários sem nada haver com o post,serão apagados.
- Qualquer dúvida consulte o F.A.Q