25 de junho de 2012

Personalize a Data das Postagens

Hypnokitty-becomes-hipsterkitty_large
Oi gente, primeiramente eu queria me desculpar pela ausência, ontem minha amiga veio dormir aqui em casa,
 e ela ficava reclamando que eu só ficava no computador, só deu pra mim retribuir os comentários mais tudo bem. Hoje estou totalmente sem inspiração, então vou realizar um pedido. Me pediram como eu fiz essa data 
do post , e vim trazer alguns estilos pra vocês personalizarem o/
Para aplicar estilo que você gostar, procure por .main-inner h2.date-header {  no seu html, e você 
achará algo assim:
.main-inner h2.date-header {
  font: $(date.font);
  color: $(date.text.color);
}
Depois substitua pelo o código do estilo que prefirir e salve. Vamos logo aos estilos:

.main-inner h2.date-header {
/* Personalização de data by Garota do Olhar Sincero */
font: century gothic; /* Fonte da Data */
color: #FFFAFA; /* Cor da Fonte */
margin-left: -90px; /* Alinhamento da Data , pode trocar para right se quiser na direita */
background: #E0EEEE; /* Fundo da data */
float: left; /* Se você mudou acima para right , mude aqui tambem */
font-size: 11px; /* Tamanho da Fonte */
padding: 4px;
-webkit-border-radius: 15px; */ Estilo, não mude */
-moz-border-radius: 15px;
border-radius: 15px;
}
.main-inner h2.date-header:hover {
background: #C1CDCD; /* Fundo quando o passa o mouse */
/* Fim da data personalizada, não reblogue ou pegue como base o código e credite se usar */
}
.main-inner h2.date-header {
/* Personalização de data by Garota do Olhar Sincero */
font: century gothic;  /* Fonte da Data */
color: #FFFAFA;  /* Cor da Fonte */
margin-left: -90px; /* Alinhamento da Data , pode trocar para right se quiser na direita  */
background: #DDA0DD; /* Fundo da data */
float: left; /* Se você mudou acima para right , mude aqui tambem */
font-size: 11px;  /* Tamanho da Fonte */
padding: 4px;
-webkit-border-top-right-radius: 10px; */ Estilo, não mude */
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomleft: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
/* Fim da data personalizada, não reblogue ou pegue como base e credite se usar */
}



.main-inner h2.date-header {
/* Personalização de data by Garota do Olhar Sincero */
font: century gothic;  /* Fonte da Data */
color: #FFFAFA;  /* Cor da Fonte */
margin-left: -90px; /* Alinhamento da Data , pode trocar para right se quiser na direita  */
background: #FF69B4; /* Fundo da data */
float: left; /* Se você mudou acima para right , mude aqui tambem */
font-size: 11px;  /* Tamanho da Fonte */
padding: 4px;
-webkit-border-top-left-radius: 10px; /* Estilo */
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomright: 20px;
border-top-left-radius: 10px;
border-bottom-right-radius: 20px;
/* Fim da data personalizada, não reblogue ou pegue como base e credite se usar */
}
p.s: As cores são todas personalizáveis!
Após ter aplicado a sua preferida, vá em Configurações >> Formatação e altere para o seguinte formato a sua data:

Depois é só salvar e pronto!

credito ~ Garota do Olhar Sincero'

Um comentário:

Perdido?