Personalizar a data

Okaeri ^^

Bem, este tutorial não será simplesmente sobre personalizar, pois é impossível fazê-lo sem trazer modelos. Da data dos posts, como certamente já viram. E sim, isso é muito importante, então eu darei algumas dicas antes. Este modelo é bastante simples, em escala de cinza, do tipo que fica no topo da área de postagem, os cantos superiores são arredondados e fica à esquerda do post, para o mover, basta personalizarem a margem, mas eu não complicaria. Sem mais delongas, cá vai:

Imagens encontradas aqui: www

Tutorial:

Procure por:

/b:skin

Acima acrescente:

.main-inner h2.date-header {
font-family: silkscreen;
font-size: 9px!important;
color: #666666;
text-shadow: 1px 1px 1px #fff;
text-align: center;
padding: 2px 2px 2px 2px;
background: #b8b8b8;
border-radius: 2px 2px 0px 0px;
width: 100px;
height: 15px;
box-shadow: 0px 0px 5px #666666, inset 0px 0px 5px #666666;
-webkit-transition-duration: .50s;
}
.main-inner h2.date-header:hover {
background: #8f8f8f;
letter-spacing: 1px;
-webkit-transition-duration: .50s;
}

Minhas instruções:

• Em hover, mude pelo menos as cores
• Acho que fica bem algum letter-spacing ao passar o mouse, mas você pode retirar a linha
• Obviamente, você pode retirar ou mudar as linhas em que coloca sombra, bordas, outline...
• Nos fundos, você podia usar uma imagem.

Era só isto. Talvez traga modelos em breve :)