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 {E substitua esse código pelo debaixo:
font: $(date.font);
color: $(date.text.color);
}
.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!
O resultado fica muito bonitinho !Adorei !!!
ResponderExcluircorderosa|tk
Oi Jelly, fico feliz que tenha gostado do tutorial ;D
ResponderExcluirBeijos!