Novo layout, o que acharam do tema "Verão" ?
Oi leitores, hoje vim trazer uma datas personalizadas que eu fiz, se usarem creditem ! As cores são personalizáveis.
Para meteres o estilo que gostares, procura por .main-inner h2.date-header {
A seguir, acharás algo assim :
.main-inner h2.date-header {
font: $(date.font);
color: $(date.text.color);
}
Apaga esse código e substitui pela data que mais gostares :)
1 - Data simples ( só muda a cor do fundo quando passa o mouse )
.main-inner h2.date-header {
/* Data personalizada by Cat Girl */
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 Cat Girl, não retire créditos */
}
2 - Data "folhinha"
.main-inner h2.date-header {
/* Data personalizada by Cat Girl */
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 Cat Girl, não retire créditos */
}
3 - Data redondinha
.main-inner h2.date-header {
/* Data personalizada by Cat Girl */
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 Cat Girl, não retire créditos */
}
Personaliza as cores com *esta* tabela
Beijinhos, usem e abusem das minhas datas !
adorei o teu layout e o tutorial é útil vou usar
ResponderEliminarhttp://poesia-de-uma-vida.blogspot.pt/
aceitas afiliação?
O layout ficou muito lindo, amei *-*
ResponderEliminarhttp://garotadoolharsincero.blogspot.com
adorei o layout gata!
ResponderEliminarsenhoritasimperfeitas.blogspot.com
Caramba eu amei o lay!
ResponderEliminarencantosdeumaadolescente.blogspot.com
Esta lindo, só que é muito irônico o nome do tema ser "Verão" se estamos no inverno, enfim, beijos.
ResponderEliminarhttp://fasesdegarota.blogspot.com.br
aah,amor mas se vc não sabe no pais dela e "verão" sim,ok?
EliminarTá lindo *w* !
ResponderEliminarAdorablecliche.blogspot.com