21 enero 2008

Imagen de fondo en el título de la entrada


MgL me preguntaba hace unos días cómo podía poner una imagen de fondo en el título de las entradas, imagino que para incluir alguna en su blog Estación del Jinete.


He de reconocer que no tenía la menor idea de cómo se hacía. Pero la curiosa-cotilla que tiene una dentro le picó y me comprometí a buscar cómo cambiarlo. No me ha costado mucho, por eso he tardado poco tiempo en compartirlo con vosotros...


Veamos: las opciones de las entradas (o post) se encuentran bajo la etiqueta o nombre de post h3, de modo que iremos a la pestaña Plantilla - Edición de HTML, y activaremos la casilla "Expandir plantilla de artilugios". Entonces, buscaremos post h3 con el buscador del navegador (en Editar - Buscar). Os aparecerá ese post h3 unas tres veces, de forma similar a la que aparece en mi otro blog:



.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}

.post h3 a, .post h3 a:visited, .post h3 strong {
background: url(http://img443.imageshack.us/img443/760/posttitlenj4.jpg) repeat;
display:block;
text-decoration:none;
color:$titlecolor;
font-weight:bold;
padding-left: 5px;
border-top:3px solid $bordercolor;
border-bottom:3px solid $bordercolor;
}

.post h3 strong, .post h3 a:hover {
background: url(http://i176.photobucket.com/albums/w192/comerxcomer/florfondo.jpg) repeat;
color:$textcolor;
padding-left: 5px;
border-top:3px solid $bordercolor;
border-bottom:3px solid $bordercolor;

Los atributos margin, padding, font-size, etc. que aparecen en el primer h3 corresponden al texto en sí del título; si queremos variar el tamaño, por ejemplo, podemos hacerlo ahí.

En cuanto a la imagen, tenmos dos posibilidades:

1. Una imagen fija.

2. Una imagen que varíe cuando pasamos el ratón por encima del título de la entrada.


Si queremos una imagen fija, incluiremos el atributo background que se explica más abajo en el primer post h3; si queremos que varíe, tendremos en cuenta lo siguiente:

- La imagen especificada en post h3 a, post h3 a:visited, .post h3 strong será la que aparezca al ver la página.

- Y la especificada en .post h3 strong .post h3 a:hover será la veamos cuando el ratón se situe sobre el título de la entrada.


Para incluirlas nos situaremos tras el símbolo { que aparece después de strong, hover o h3 y teclearemos

background: url (direccion URL de tu imagen);


Si es una imagen pequeñita que queremos que se repita, escribiremos repeat delante del punto y coma:

background: url (dirección URL) repeat;


Y si no queremos que se repita, non-repeat:

background: url (direccion URL) non-repeat;


Una vez hecho esto, comprobaremos los efectos en Vista previa. Si nos gusta, guardaremos los cambios; y si no, iremos probando con repeat non-repeat, o distintas imágenes hasta encontrar una que nos guste.

5 comentarios:

Juany dijo...

Hola. interesante tu blog

Gracias por los consejos

Tengo una duda. he querido cambiar el color del titulo de la entrada manualmente, por ejemplo poniendo #000000 pero resulta que no se efectua el cambio. Aunque sí funciona cuando intento cambiarlo desde la pestaña "Fuentes y colores", pero tiene una desventaja. al mismo tiempo cambia el color de los enlaces. NO sé si me dejo entender.

En resumen, quisiera hacer el cambio manual:

.post h3 { color:#000000; }

es decir sin ponerle $titlecolor

Cuando lo hago asi, no funciona

Pero cuando me voy a la opcion fuentes y colores, debo marcar un color cualquiera para el titulo de la entrada pero afecta al color de los enlaces..


Sospecho que blogger ha cambiado recientemente un poco el código de sus plantillas. Por ejemplo antes en el sidebar decia float: left o right: ahora sale algo asi como $endside u &outside


A ver si me das una mano
gracias.


juanydj@gmail.com

Miranda dijo...

Hola, Juany!
Muy buena observación. A mí me ocurre algo similar en el otro blog que tengo: el color del título del blog es el mismo que el color de fondo de las entradas y las barras laterales; si cambio el color del título, se cambia el color de esos fondos.
Esta correspondencia o conexión de colores depende de la plantilla que tengamos. Existe en la plantilla un área en la que aparecen estas variables de color, fuente y tamaño:

/* Variable definitions

No puedes cambiar el color del título porque es en esas variables donde se cambia. Si te fijas en Fuentes y colores, hay un número determinado de variables; no sé si podrá añadirse alguna más ni cómo se hará. Intuyo que quienes crean las plantillas tienen que ceñirse a dichas variables y que es de ahí de donde viene el problema.
De todos modos, llevo tiempo planteándome preguntar al autor de mi plantilla si puedo cambiar esto o no. Voy a aprovechar ahora que me has preguntado y si tengo novedades, te las cuento (aquí en mi blog, que parece que no puedo acceder al tuyo, ¿de acuerdo?).

Un saludo, y si te enteras de algo, pásate a contarme, por favor!

MgL dijo...

Hola! Perdona por la tardanza en mostrarte mi agradecimiento, pero he andado un poco liado ultimamente.
Ahora voy a buscar la imagen adecuada para ponerla de fondo, y acto seguido me pongo en marcha con tus consejos.
Muchas gracias!
Saludos!

Mandrágora dijo...

Hola!
Soy una tonta para esto de la edición del blog, pero estuve tratando y creo que ya agoté todas las posibilidades y la plantilla em odia jajajaja...
Lo que pasa es que ya he puesto expandir artilugios y mira el código que me sale:
}
.post h3 {
font-weight:normal;
font-size:140%;
color:$postTitleColor;
margin:0;
padding:0;
}
.post h3 a {
color: $postTitleColor;
}
y he tratado de copiar el tuyo (obviamente con la URL de la imágen que quiero y no he podido.
Porfavor si te ocurre qué puedo estar haciendo mal... avisáme!!
Que estes bien!

Terapia de familia dijo...

Hola, me parece maravilloso tu blog y de antemano muchas gracias.

Quiero pedirte un favor: vista mi blog y aconséjame como lo diseñarías para que sea más atractivo y acorde a mis intereses.

Harías eso por mí?