Tutorial : Personalizar data do post

Oi diamantes, desculpem o sumiço, tenho de aproveitar as férias antes que elas acabem :(

 Trouxe umas datas personalizadas :) 

Para meter o estilo que você gostar, procure por .main-inner h2.date-header {

A seguir, você achará algo assim :

.main-inner h2.date-header {

  font: $(date.font);

  color: $(date.text.color);

}

Apague esse código e substitua pela data que mais gostar :)

1 - Data simples ( só muda a cor do fundo quando passa o mouse )

.main-inner h2.date-header { 

/* Data personalizada by DDUG*/ 

font: arial; /* Fonte da Data */ 

color: #FFFAFA; /* Cor da Fonte */ 

margin-left: -90px; /* Alinhamento da Data , pode trocar para right se quiser na direita */

background: #00BFFF; /* Fundo da data */ 

float: left; /* Se você mudou acima para right , mude aqui também */

font-size: 11px; /* Tamanho da Fonte */ 

padding: 4px; 

-webkit-border-radius: 20px;

-moz-border-radius: 20px;

border-radius: 20px;

}

.main-inner h2.date-header:hover { 

background: #C1CDCD; /* Fundo quando o passa o mouse */ 

/* Fim da data personalizada by DDUG, não retire créditos */

}

2 - Data "folhinha"

.main-inner h2.date-header { 

/* Data personalizada by DDUG */ 

font: arial; /* Fonte da Data */ 

color: #000000; /* Cor da Fonte */ 

margin-left: -90px; /* Alinhamento da Data , pode trocar para right se quiser na direita */

background: #FFFFFF; /* Fundo da data */ 

float: left; /* Se você mudou acima para right , mude aqui também */

font-size: 11px; /* Tamanho da Fonte */ 

padding: 4px; 

-webkit-border-top-right-radius: 20px;

-webkit-border-bottom-left-radius: 20px;

-moz-border-radius-topright: 20px;

-moz-border-radius-bottomleft: 20px;

border-top-right-radius: 20px;

border-bottom-left-radius: 20px;

}

.main-inner h2.date-header:hover { 

background: #FFC0CB; /* Fundo quando o passa o mouse */ 

-webkit-border-top-left-radius: 20px;

-webkit-border-bottom-right-radius: 20px;

-moz-border-radius-topleft: 20px;

-moz-border-radius-bottomright: 20px;

border-top-left-radius: 20px;

border-bottom-right-radius: 20px;

/* Fim da data personalizada by DDUG, não retire créditos */

}

3 - Data redondinha

.main-inner h2.date-header { 

/* Data personalizada by DDUG */ 

font: arial; /* Fonte da Data */ 

color: #00BFFF; /* Cor da Fonte */ 

margin-left: -90px; /* Alinhamento da Data , pode trocar para right se quiser na direita */

background: #FFFFFF; /* Fundo da data */ 

float: left; /* Se você mudou acima para right , mude aqui também */

font-size: 11px; /* Tamanho da Fonte */ 

padding: 4px; 

-webkit-border-top-left-radius: 100px;

-webkit-border-bottom-left-radius: 100px;

-moz-border-radius-topleft: 100px;

-moz-border-radius-bottomleft: 100px;

border-top-left-radius: 100px;

border-bottom-left-radius: 100px;

}

.main-inner h2.date-header:hover { 

background: #000000; /* Fundo quando o passa o mouse */ 

-webkit-border-top-right-radius: 100px;

-webkit-border-bottom-right-radius: 100px;

-moz-border-radius-topright: 100px;

-moz-border-radius-bottomright: 100px;

border-top-right-radius: 100px;

border-bottom-right-radius: 100px;

/* Fim da data personalizada by DDUG não retire créditos */

}

Personalize as cores com *esta* tabela

Já tinha postado isto no meu blog mas estou sem inspiração e principalmente sem tempo. Vou tentar postar uns textos para vocês, diamantes.