Olá girls! Hoje trago o primeiro tutorial do blog *-*
E eu vou ensinar a personalizar a data do post que nem a minha e de outras várias maneiras!
Vem ver! Clica em Leia Mais aí!
1° Estilo: Básico
Vá em: Modelo > Editar HTML..
Depois clique Ctrl + F, vai abrir uma caixinha em cima, e nessa caixinha procure por:
.main-inner h2.date-header {
E você achará algo assim:
.main-inner h2.date-header {
font: $(date.font);
color: $(date.text.color);
}
Substitua este código todo por esse:
.main-inner h2.date-header {/* Data personalizada by DDUG*/font: arial; /* Fonte da Data */color: #FFFAFA; /* Cor da Fonte */margin-left: -90px; /* Alinhamento da Data , pode trocar para right se quiser na direita */background: #00BFFF; /* Fundo da data */float: left; /* Se você mudou acima para right , mude aqui também */font-size: 11px; /* Tamanho da Fonte */padding: 4px;-webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px;}.main-inner h2.date-header:hover {background: #C1CDCD; /* Fundo quando o passa o mouse *//* Fim da data personalizada by DDUG, não retire créditos */}
2° Estilo: Folhinha
Faça a mesma coisa que fez na primeira data e substitua o código por este:
.main-inner h2.date-header {/* Data personalizada by DDUG */font: arial; /* Fonte da Data */color: #000000; /* Cor da Fonte */margin-left: -90px; /* Alinhamento da Data , pode trocar para right se quiser na direita */background: #FFFFFF; /* Fundo da data */float: left; /* Se você mudou acima para right , mude aqui também */font-size: 11px; /* Tamanho da Fonte */padding: 4px;-webkit-border-top-right-radius: 20px;-webkit-border-bottom-left-radius: 20px;-moz-border-radius-topright: 20px;-moz-border-radius-bottomleft: 20px;border-top-right-radius: 20px;border-bottom-left-radius: 20px;}.main-inner h2.date-header:hover {background: #FFC0CB; /* Fundo quando o passa o mouse */-webkit-border-top-left-radius: 20px;-webkit-border-bottom-right-radius: 20px;-moz-border-radius-topleft: 20px;-moz-border-radius-bottomright: 20px;border-top-left-radius: 20px;border-bottom-right-radius: 20px;/* Fim da data personalizada by DDUG, não retire créditos */}
3° Estilo: Redondinha (que eu uso)
Faça a mesma coisa dos dois primeiros, substitua o código por este:
.main-inner h2.date-header {/* Data personalizada by DDUG */font: arial; /* Fonte da Data */color: #00BFFF; /* Cor da Fonte */margin-left: -90px; /* Alinhamento da Data , pode trocar para right se quiser na direita */background: #FFFFFF; /* Fundo da data */float: left; /* Se você mudou acima para right , mude aqui também */font-size: 11px; /* Tamanho da Fonte */padding: 4px;-webkit-border-top-left-radius: 100px;-webkit-border-bottom-left-radius: 100px;-moz-border-radius-topleft: 100px;-moz-border-radius-bottomleft: 100px;border-top-left-radius: 100px;border-bottom-left-radius: 100px;}.main-inner h2.date-header:hover {background: #000000; /* Fundo quando o passa o mouse */-webkit-border-top-right-radius: 100px;-webkit-border-bottom-right-radius: 100px;-moz-border-radius-topright: 100px;-moz-border-radius-bottomright: 100px;border-top-right-radius: 100px;border-bottom-right-radius: 100px;/* Fim da data personalizada by DDUG não retire créditos */}
E foi só isso minhas amoras..até a próxima :*
Créditos: ♥
PS: Quem precisar aqui uma tabela de cores.
Nenhum comentário:
Postar um comentário