Data em Forma de Calendário com CSS


Oie...já postei como fazer para a data da postagem aparecer em formato calendário (veja aqui e aqui); dessas formas era necessário usar script, html e css. Hoje trouxe um outro jeito, mais simples, usando apenas css.
Antes, vá nas Configurações do seu blog - Idioma e Formatação - Formato da data e deixe em dia mês ano:
Agora, em Modelo - Editar HTML, procure por algo como esse trecho:
.date-header span {
  background-color: $(date.header.background.color);
  color: $(date.header.color);
  padding: $(date.header.padding);
  letter-spacing: $(date.header.letterspacing);
  margin: $(date.header.margin);
}
.date-header se refere a data; você pode mudar para:
.date-header span {
background: #ccc;/*plano de fundo*/
width: 70px;/*largura*/
height: 40px;/*altura*/
float: left;/*fica para esquerda troque left por right para colocar na direita*/
margin: 0px 30px 0px -70px ;/* distancia quanto ao topo, direita, esquerda, abaixo */
box-shadow: 1px 2px #bbb;/*sombra*/
padding:15px -10px 0px 0px;/*distancias internas*/
color:#a1a1a1;/*cor do texto*/
font-size: 25px;/*tamanho do texto*/
text-align: center;/*alinhamento do texto*/
line-height: 100%;/* distancia entre linhas*/
font-family: 'Open sans', sans-serif;/*tipo da fonte*/
text-transform: uppercase;/*tudo maiusculo*/
display: block;
overflow: hidden;
letter-spacing: $(date.header.letterspacing);
} 

Altere como preferir. O código acima foi testado no modelo simple; caso não ficar organizadinho em seu modelo, tente esse do post Criando um Layout parte 2. Espero que tenha sido útil.






Postar um comentário

0 Comentários

up