29/03/2013

Tutorial: Personalizar data da postagem

| |

Olá girls! Hoje trago o primeiro tutorial do blog *-*
E eu vou ensinar a personalizar a data do post que nem a minha e de outras várias maneiras!
Vem ver! Clica em Leia Mais aí!
1° Estilo: Básico


Vá em: Modelo > Editar HTML..
Depois clique Ctrl + F, vai abrir uma caixinha em cima, e nessa caixinha procure por:
.main-inner h2.date-header {
E você achará algo assim:

.main-inner h2.date-header {

font: $(date.font);
color: $(date.text.color);
}

Substitua este código todo por esse:

.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° Estilo: Folhinha

(não é rato, é mouse..mas quem ensinou fala português de Portugal u.ú)

Faça a mesma coisa que fez na primeira data e substitua o código por este:

.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° Estilo: Redondinha (que eu uso)

(Novamente 'mouse')

Faça a mesma coisa dos dois primeiros, substitua o código por este:

.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 */
}

E foi só isso minhas amoras..até a próxima :*

Créditos: 

PS: Quem precisar aqui uma tabela de cores.

Nenhum comentário:

Postar um comentário