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.