Tutorial - Data com Faixinha

 

Yoo!

A única parte desse template que eu esqueci de explica como é que se faz para vocês, foi a data. Uma leitora lembrou-me de que eu havia dito que iria ensinar a ela.

O tutorial é de como colocar a data assim, acima do título e dentro de uma faixinha. Claro que vocês podem colocar outra imagem ou em outro local.

Espero que gostem ~ 

1. Vá até Editar HTML e procure por .main-inner h2.date-header{, após a tag, cole:

width:65px;

height:22px;

margin-left:-75px;

float: left;

text-align: center;

font-size: 10px;

padding: 5px;

background: url(LINK DA SUA FAIXA) no-repeat center;

color: #FFFFFF;

text-shadow:0 1px #ccc;

margin-top: -20px;

- Entendendo o código:

width:65px; - Troque pela largura da sua faixinha.

height:22px; - Troque pela altura da sua faixinha.

margin-left: -75px; - Aumente e mova ele para a esquerda, diminua e mova para a direita. (observe a presença do menos)

float: left; - Troque por right se quiser a data na direita.

text-align: center; - Alinha o que fica dentro da faixa (nesse caso é a data). Pode ser trocado por left ou right.

font-size: 10px; - Tamanho da letra. Quanto maior o número, maior a letra. E vice-versa.

padding: 5px;  - Espaço entre a data e o fim da faixa.

background: url(LINK DA SUA FAIXA) no-repeat center; - Exatamente o que diz.

color: #FFFFFF; - Cor da fonte.

text-shadow:0 1px #ccc; - Sombra. Troque pela cor.

margin-top: -20px; - Usado para subir e descer a data, juntamente com a faixa.

Prontinho, é só salvar!