31

Personalizar la fecha de las entradas

He estado "jugando" en mi block de pruebas un rato y he modificado de forma simple la apariencia de la fecha de las entradas:

En el HTML de la plantilla, en la parte del CSS, está: h2.date-header {, esta parte es la fecha de las entradas, normalmente se ve así:

h2.date-header {
margin:1.5em 0 .5em;
}

Yo le he añadido algunos valores, hasta encontrar el efecto que quería, y me ha quedado así:

h2.date-header {
margin:1.5em 0 .5em;
width: 100px;
text-align:center;
text-transform:uppercase;
border: solid #000000 1px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
background: #c0ffff
}

Os explico lo que he hecho:

width: 100px; esto hace que el tamaño del borde que añadiré luego tenga el tamaño que quiero, si no lo ponemos el borde se adaptará al tamaño de la entrada.

text-align:center; esto hace que el texto esté en el centro del borde.

text-transform:small; para que el texto se vea en mayúsculas, si cambiamos uppercase por small se verá en minúsculas.

border: solid #000000 1px; el color y grosor del borde, si aumentas 1px, se verá mas grueso y si cambias #000000 se verá del color que quieras.

-moz-border-radius: 15px;
-webkit-border-radius: 15px; esto hará que los bordes se vean redondeados.

background: #c0ffff esto es el color del fondo, podéis cambiarlo por el vuestro.

Y este ha sido el resultado:




Si lo que estáis buscando es ocultar la fecha de las entradas, olvidaros de lo anterior y simplemente añadis en h2.date-header {
margin:1.5em 0 .5em;
}
esta línea:

visibility:hidden;

Entradas Relacionadas:

31 comentarios:


Cristian

Me gusta eso... voy a ver si lo agrego. Muchas gracias Rosa

JMAO

Hola Rosa, ante todo agradecerte toda la ayuda que en este blog ofreces desinteresadamente, pues me esta ayudando mucho en la creación del mio. Ultimamente estoy teniendo problemas con los trucos de meter imagenes en el fondo de pie de post, en el fondo de las fechas, de los titulos de entrada, con los colores, y creo que todo ha sido al ponerles backgrounds a las distintas partes de mi blog. Te agradeceria mucho que te pasar y me dijeras por que crees que me deb pasar. Muchas gracias!!

http://p2pteuve.blogspot.com/

Rosa

Hola jmao! Gracias a ti!

Mira he estado mirando un poco tu blog y tienes bastantes cosas añadidas en el css que son innecesarias y que se "lían" unas con otras. Por ejemplo, tienes color de fondo en main-wraper y también en post, uno de los dos sobra, y así hay unos cuantos errores mas...
He visto que tienes aplicada una imagen para el título del post, pero no sale por uno de esos problemas.
Mira, te pongo un links a un blog donde he hecho unas pruebas, es solo para que veas lo de la imagen del título como lo hice sin problemas, fijate también que el texto no se pega al borde del post, en lo demás no te fijes, que es solo para dar un efecto parecido y te hagas una idea.
Sin ver tu plantilla completa, no puedo hacer mucho, si quieres mandamela por email y te corrijo los errores y a la vez te explico un poco para que no vuelvas a cometerlos ¿ok?

http://sabinomendezii.blogspot.com/

Yankee

hola! gracias por contestar tan rapido, hay poca gente tan dispuesta a ayudar desinteresadamente ;)
He mirado lo que me has dicho , y he optado por empezar de nuevo el diseño y no cometer esos errores que me has comentado. Lo he querido intentar solucionar yo solo antes de darte trabajo a ti ;)
Muchas gracias!! ahora seguire rebuscando por tu blog para poner mas cosas XDD y en cuanto lo tenga listo te enlazo!!

Rosa

Hola jankee o jmao, como prefieras ;-)
No me asusta el trabajo, pero comparto tu decisión, si has podido llegar hasta ahí tu solo, podrás hacer todo lo demás.
He visto hoy el blog y ya has conseguido mucho desde ayer, enhorabuena!

Slip

Rosa!!! estoy en algo que me tiene ya furiosoo y es que no he podido bajar la fecha a la altura del titulo tal como lo tienes en tublog...

visita mi log y verás a que me refiero.

saludos y hace mucho que no pasaba por aquí...debo decir que tu plantilla ha cambiado bastante!! muy bonita!!

bueno Rosa, espero tu ayuda!!! pliss

Rosa

Slip, has de hacerlo con el margin y el padding en la fecha, prueba con los mismos valores que tienes para el título de los post.

Slip

Rosa, probé de muchas formas y no pasa nada...solo logro ponerla al lado derecho...si no es mucha molestia te dejo parte del codigo para que veas como está...

}
.post-title {
margin: 0;
padding: 0;
font-size: 125%;
border-bottom: 1px solid #036CB4;
font-weight: bold;
line-height: 1.0em;
}


.post-title a, .post-title a:visited, .post-title strong {
text-decoration: none;
color: $sidebarTitleTextColor;
font-weight: bold;

}
.post div {
line-height: 1.2em;
}

.date-header {
margin: 0;
padding: 0;
font-weight: normal;
color: $dateHeaderColor;
font-size: 100%;
text-align: right;
}

Saludos!!

Rosa

Slip, por si te sirve de referencia, esta línea de padding, son las que tengo yo en la fecha:

h2.date-header {
padding:0px 20px 0px 0px;

Slip

nada Rosa =( ... no baja esa fecha!!!

Rosa

Slip, perdona, estaba obcecada con el padding y más bien es cosa del margin... Prueba así (usa la vista previa), cambia lo que tienes en .date-header { por esto:


.date-header {
margin:0.1em 0 .5em;
padding: 0;
font-weight: normal;
color: $dateHeaderColor;
font-size: 100%;
text-align: right;
}

Rosa

Por cierto, avísame del resultado, porque a "cabezona" no me gana nadie ,je,je, tengo que conseguirlo como sea.

Slip

no cambia Rosa!!..al parecer el problema debe ser en otro lado de la plantilla...a todo esto, guardé los cambios con el ultimo codigo que me diste...asi esta la cosa...

.post-title {
margin: 0;
padding: 0;
font-size: 125%;
border-bottom: 1px solid #036CB4;
font-weight: bold;
line-height: 1.0em;
}


.post-title a, .post-title a:visited, .post-title strong {
text-decoration: none;
color: $sidebarTitleTextColor;
font-weight: bold;

}
.post div {
line-height: 1.2em;
}

.date-header {
margin:0.1em 0 .5em;
padding: 0;
font-weight: normal;
color: $dateHeaderColor;
font-size: 100%;
text-align: right;
}

Paco

Hola Rosa, otra vez yo :-)

Hoy he estado dando un repaso a la plantilla y he utilizado varias cosas y me han salido todas, creo que antes modificaba menos la plantilla porque no conocía la tecla f3 que activa las búsquedas en Firefox y me volvía loco buscando lo que nos pedías que teníamos que modificar.

La pregunta de hoy es la siguiente:

He utilizado esta entrada tuya mara modificar el formato de la fecha de mi blog, y me ha gustado tanto que he intentado por mi cuenta hacer lo mismo para los títulos de las entradas/post (hacer que tengan un recuadro, redondeado, con un color diferente el borde, etc... como no sabía donde esta el código se me ha ocurrido mirar en mi plantilla que color tenía actualmente y buscarlo dentro del diseño de la plantilla, pero lo he encontrado en una parte diferente y me ha dado miedo tocar por si lo estropeaba ¿se puede hacer modificar el título igual que la fecha? yo lo he encontrado justo al principio del diseño de la plantilla donde pone <Variable name="postTitleColor" description="Post Title Color"
type="color" default="#333333" value="#cc0000">

aquí puedo modificar el color, ¿pero también puedo añadir lo del borde, etc...?

Gracias por tu ayuda.

Quizá me anime, haga una copia de la plantilla y me arriesgue, aunque me da miedo.

Paco

Tu ya lo sabrás pero lo he probado y no ha funcionado, debe ser en otro sitio en donde hay que modificarlo.

Rosa

Paco, no ahí no es. Esa es una variable, que es lo que permite cambiar el color del texto del título de los post, usando "fuentes y colores".
Para hacer lo que quieres, el sistema es el mismo que en este caso de la fecha, solo que los cambios han de hacerse en:

.post h3 {

Paco

No había leído :-( todos los comentarios pero me estoy dando cuenta de que me pasa lo mismo que a slip, y la verdad es que quedaría muchísimo mejor si estuviera una caja junto a la otra y no debajo.

Paco

Antes que el otro había escrito otro comentario dándote las gracias pero veo que no ha salido, y eso es lo primero, precisamente había dicho que has tardado menos en darme la respuesta que yo en agradecértelo.

Gracias :-)

Rosa

Paco, a veces pasa, supongo que ambos publicábamos a la vez y esto se lió...

Lo de Slip no hubo manera de solucionarlo creo que porque su plantilla no es original de Blogger sino adaptada y no fui capaz de dar con el problema.
Prueba intentando con el margin como le dije a Slip.

Mauricio

Hola Rosa... soy yo otra vez... esta vez quiero saber como modificar el tamaño de la fecha sobre los posts... porque cuando la hago más chica desde "Fuentes y colores" tambien se me achica el titulo de los gadgets en la sidebar.. espero tu respuesta

Rosa

Mauricio No puedes hacer ahí por eso mismo que dices.

Localiza este código en tu plantilla:

h2.date-header {
margin:1.5em 0 .5em;
}

Ahí añades una nueva línea:
h2.date-header {
margin:1.5em 0 .5em;
font-size:100%;
}

Cambia el 100% por el tamaño que quieras, usa vista previa.

Mauricio

Muchisimas gracias rosa

Carlos Salazar

Hola, mil disculpas es mi primer comentario me encanta este blog, pero no tengo idea de por qué la fecha solo me sale al lado del título de la primera entrada del día y no de las que le siguen, Gracias por todo, me parecio el lugar indicado para preguntar esto

Carlos Salazar

Gracias por todo, ya di con la respuesta, jeje, sorry http://elescaparatederosa.blogspot.com/2008/11/fecha-tipo-calendario-en-todas-las.html

Takeshi

Justo lo que estaba buscando para ocultar la fecha, lo extraño es que no estaba el codigo h2.date-header en mi plantilla pero lo agregue y funciono :)

gracias Rosa!

Rosa

Takeshi Algunos diseñadores al adaptar las plantillas a Blogger, omiten u olvidan datos... así sería en tu caso...

José

Hola Rosa:
Si yo quisiera disponer de ese espacio, el de la fecha, para poner el título del post o utilizarlo para escribir algo: ¿Sabés cómo puedo ubicarlo para poder manipularlo?

Es una plantilla del nuevo diseñador... pero pensé que tal vez el id o la ubicación se asemeje al de las antiguas. (¿?) (http://buscandoalois.blogspot.com)

Gracias. Ya me voy a pasar más seguido.

PD: ¿Te acordás que yo había modificado el Breadcrumbs? El código modificado está en mi plantilla (El precipicio...) bajo el id='breadcrumbs'. De paso mirá como va quedando el blog. Saludos.

Rosa

José No, y menos si la plantilla es del nuevo Diseñador... no es fácil en ellas controlar la fecha, ya que va unida a otra serie de parámetros en el diseño.

Viviana de MamásyBebés

hola guapa!!!

revise tu blog pero lo q encontre no se ajusta a lo q necesito

en mi blog no se ven las fechas de los post. no se si es cuestion de la plantilla o que. desde configuracion tengo elegido el tipo de fecha q deseo mostrar... pero nada!

al pie del post solo se ve la hora de publicacion..

cualquier indicacion, te la agradezco enormemente!


http://soy-mama.blogspot.com

Rosa

Viviana Localiza esto en la plantilla:
.date-header {
margin: 1.5em 0 .5em;
display: none;
}

Y elimina el display: none; ... quedará así:

.date-header {
margin: 1.5em 0 .5em;
}

Viviana de MamásyBebés

listo!!!! perfecto!! gracias!

Publicar un comentario en la entrada

Si vas a dejar una consulta, procura tener habilitado tu perfil en Blogger o deja la url del blog a revisar (no enlace).

Los comentarios están siendo moderados.

:) :(( :( :P :D :$ ;) :I :X :O |O :S