JMiur [E]

En este artículo de cssglobe.com se muestra la forma de crear calendarios usando sólo CSS así que, con un poco de paciencia, se podría amplicar a alguna de las variantes que permiten personalizar la fecha de las entradas de Blogger. Como hay muchas, sería imposible enumerarlas así que me baso en la que uso que es la explicada acá.

En ese caso, habria que cambiar el script y en lugar de esto:
fday = "<span class="lafechaDia">"+lafecha[1]+"</span>";
fmonth = "<span class="lafechaMes">"+mes[lafecha[0]]+"</span>";
fyear = "<div class="lafechaAnio">"+lafecha[2]+"</div>";
document.write(fday+fmonth+fyear);
poner esto:
var salida = lafecha[1]+"<em>"+mes[lafecha[0]]+"</em>";
document.write(salida);
El HTML final que se mostraría es muy simple y los colores tamaños y otros detalles pueden ser personalizados a gusto:
<div class="calendario">
  28 <em>Febrero</em>
</div>
28 Febrero
28 Feb

Lamentablemente, pese a que algunas cosas podemos reproducirlas en Internet Exloprer, otras requerirían demasiadas reglas diferentes asi que por el momento, me olvido de ese navegador. Este es el CSS:
.calendario { /* el contenedor */
  color: #000;
  background: #EDEDEF;
  background: -webkit-gradient(linear, left top, left bottom, from(#EDEDEF), to(#CCC)); 
  background: -moz-linear-gradient(top,  #EDEDEF,  #CCC); 
  font-family: Arial Black, Arial, Helvetica, sans-serif;
  font-weight: bold;
  padding-top: 5px;
  position: relative;
  text-align: center;
  text-shadow: #FFF 0 1px 0;
  -moz-border-radius: 3px;
  -webkit-border-radius 3px;
  border-radius: 3px;
  -moz-box-shadow: 0 2px 2px #888;
  -webkit-box-shadow: 0 2px 2px #888;
  box-shadow: 0 2px 2px #888;
  /* esto define el tamaño */
  font-size: 30px;
  line-height: 60px;
  width: 80px;
  /* si se quiere mas pequeño, se pueden usar otros valores: 20px 40px y 50px respectivamente */
}
.calendario em { /* el mes */
  background: #04599A;
  background: -webkit-gradient(linear, left top, left bottom, from(#04599A), to(#00365A)); 
  background: -moz-linear-gradient(top,  #04599A,  #00365A); 
  color: #FFF;
  display: block;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: bold;
  text-shadow: #00365A 0 -1px 0;
  -moz-border-radius-bottomright: 3px;
  -webkit-border-bottom-right-radius: 3px;
  border-bottom-right-radius: 3px;
  -moz-border-radius-bottomleft: 3px;
  -webkit-border-bottom-left-radius: 3px;
  border-bottom-left-radius: 3px;
  border-top: 1px solid #00365A;
  line-height: 30px; /* esto define la altura */
}
.calendario:before, .calendario:after { /* los anillos superiores */
  background: #111;
  content:'';
  float: left;
  position: absolute;
  z-index: 1;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  -moz-box-shadow: 0 1px 1px #FFF;
  -webkit-box-shadow: 0 1px 1px #FFF;
  box-shadow: 0 1px 1px #FFF;
  /* esto define el tamaño */
  height: 8px;
  top: 5px;
  width: 8px;
  /* si se quiere mas pequeño, se pueden usar otros valores: 6px 4px y 6px respectivamente */
}
.calendario:before{
  left:11px; /* o 7px si es pequeño */
}
.calendario:after {
  right:11px; /* o 7px si es pequeño */
}
.calendario em:before, .calendario em:after { /*los círculos */
  background: #DADADA;
  background: -webkit-gradient(linear, left top, left bottom, from(#F1F1F1), to(#AAA)); 
  background: -moz-linear-gradient(top,  #F1F1F1,  #AAA); 
  content:'';
  float: left;
  position: absolute;
  z-index: 2;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  /* esto define el tamaño */
  height: 14px;
  top: -5px;
  width: 4px;
  /* si se quiere mas pequeño, se pueden usar otros valores: 10px -3px y 2px respectivamente */
}
.calendarioBIG em:before{
  left: 13px; /* o 9px si es pequeño */
}
.calendarioBIG em:after{
  right: 13px; /* o 9px si es pequeño */
}

6 comentarios:

Unknown  

Implecable, lástima IE!

Responder
Ark  

Me encanta Jmiur, yo ya seguí tu post sobre los formatos de la cabecera y de la fecha y lo apliqué...

Pero me queda por resolver una duda....

¿En que parte de body hay que añadir el elemento div class="calendario"
para que aparezca donde corresponde (junto al título)

Responder
JMiur  

Una pena, Graciela :D

Ark:
Depende de la plantilla, básicamente, debes buscar la etiqueta que coloca el título de la entrada y lo agregas ahí, luego, obviamente, hay que ajustar el CSS.

Responder
Ark  

Al final me he salido por la tangente y he añadido algunas ideas de este calendario al diseño que yo ya usaba.... De todas formas es posible que siga haciendo experimentos con el

Responder
Unknown  

Hola JMiur quería agradecerte por la ayuda con el menú anda a la perfección. Te comento que el último bloque seguía igual pero logre resolverlo agregando a la plantilla una versión mayor de JQuery, no pude con la última v1.6.0 porque tenía conflictos con otros trucos y dejaban de funcionar, así que fui probando hasta llegar a la v1.4.2 y ahí todo bien. Muchas gracias y saludos.

Responder
JMiur  

Perfecto, PuroJuego.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR