Personalizando a data da postagem


Oi amadinhos de Mika, Como estão vocês? Espero que estejam bem.
Hoje trouxe um tutorial bem fácil, prático e ultilitário. Como já diz o título hoje vou ensinar a personalizar a data da postagem.
Então, chega papo e vamos ao tutorial; let's go.

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



Salve, e em seguida vá até o seu HTML (Design >> Editar HTML) e procure pelo código abaixo:
.main-inner h2.date-header {
  font: $(date.font);
  color: $(date.text.color);
}
E substitua esse código pelo debaixo:
.main-inner h2.date-header {
font: georgia;
color: #333;
margin-right: -100px;
background: #FFB6C1;
float: right;
font-size: 11px;
padding: 4px;
}
.main-inner h2.date-header:hover {
background: #DB7093;
}

Primeiramente vamos alinhar a data. Se seu quadro de postagem está à direita não é necessário mudar o "float: right;" e o "margin-right: -100px;" caso contrário, substitua o right por left. Agora vamos entender os códigos!

font: georgia; É a fonte da data.
color: #333; É a cor da data.
margin-right: -100px; Este código é a margem externa da data, ou seja, ela ira dar o espaçamento necessário entre o quadro da postagem e o quadro da data. Quanto menor o número mais perto fica, quanto maior mais longe.
background: #FFB6C1; Cor do fundo do quadro.
float: right; Alinhamento do quadro da data.
font-size: 11px; Tamanho da fonte da data.
padding: 4px; Margem interna do quadro, ou seja, espaçamento de dentro da caixinha.

PROPRIEDADE HOVER
background: #DB7093; Cor do fundo do quadro quando passa o mouse em cima.


Bom é isso, espero que tenham gostado do tutorial e que tenha sido útil. Beijos e queijos!


2 comentários:

  1. O resultado fica muito bonitinho !Adorei !!!

    corderosa|tk

    ResponderExcluir
  2. Oi Jelly, fico feliz que tenha gostado do tutorial ;D
    Beijos!

    ResponderExcluir

Obrigada por comentar.