Data personalizada

| |

sexta-feira, 30 de janeiro de 2015

Meeeeeninas e Meeeeninos
Tudo bem com vocês?



Hoje temos mais um tutorial, vamos aprender a personalizar a data? vem comigo!


Primeiro, vá até Configurações > Formatação > Formato da data, e ajuste a data como na imagem:



Salve, em seguida vá até seu HTML e procure por:


.main-inner h2.date-header {  font: $(date.font);  color: $(date.text.color);}

Então substitua esse código, por esse:

.main-inner h2.date-header {float: left; /** data no lado esquerdo, pode mudar para right **/width:55px;/** largura **/height:55px;/** altura **/overflow:hidden;font-size:15px;/** tamanho da fonte **/color: #fff !important;/** cor da fonte **/text-align:center;/** alinha o texto **/margin-bottom: -65px; /** desce **/margin-left: -80px; /** margem pra esquerda **/padding: 8px 2px 0px 2px; /** espaço interno: topo, direito, embaixo, esquerdo **/-webkit-border-radius: 5em; -moz-border-radius: 5em; /** borda redonda **/background: #FF6C91; /** cor do fundo **/}.main-inner h2.date-header:hover {background: #E9B4BB; /** cor do fundo hover **/} 

A data ficará com a mesma fonte do titulo do post. Se quiser outra fonte adicione:font-family: nomedafonte; antes de color: #fff !important;/ 

Caso queira colocar uma imagem, ali onde está background: #FF6C91; /** cor do fundo **/, mude por background:url('Link da sua imagem') no-repeat;

Fonte: Go Imagine (Algumas informações foram tiradas de lá)

É isso amores, beijo e fiquem com Deus!

Nenhum comentário:

Postar um comentário