Data do blog personalizada

Hey! Tudo bem? Essa semana eu estava vendo um tutorial no Spázio DM de data personalizada.
Então eu editei este código pra ficar mais bonitinho rsrs.
Veja o exemplo

Bem melhor né? kk

Continue lendo para ver o tutorial!

Bem... para começar dê um ctrl F e pesquise por .main-inner h2.date-header {

Aparecerá assim:

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

Substitua todo este código por:

.main-inner h2.date-header {
float: right; /* posicionamento*/
background:#C082FF; /*cor do fundo*/
color: #fff; /*cor da fonte*/
font-family: Tahoma, Tahoma; /* fonte */
margin:-13px 2px 5px -5px;
-border-radius: 0px 8px 0px 8px;

-moz-border-radius: 0px 8px 0px 8px;

-webkit-border-radius: 0px 8px 0px 8px;
box-shadow:0 0 3px #ccc, inset 0 0 20px #eee 

Entendendo os códigos

O código background: #C082FF; /*cor do fundo*/  é a cor do fundo como já diz. 

O código color: #fff; /*cor da fonte*/ é a cor da fonte, como também já diz rsrs.

O código font-family: Tahoma, Tahoma; /* fonte */ é a fonte que será utilizada. (Você pode substituir a fonte Tahoma pelo nome de qualquer outra fonte. Indico essa aqui: Century Gothic).

O código -border-radius: 0px 8px 0px 8px;.....    é  o tamanho das bordas arredondadas 

O código box-shadow:0 0 3px #ccc, inset 0 0 5px #eee é aquela sombra da caixa interior 

Prontinho! Espero que tenham gostado deste tutorial!  Beijos

(Tutorial com base no que foi feito pelo Spázio DM )