Poner una imagen de fondo en el título de los gadgets

Si quieres hacerlo, has de entrar en Diseño/Edición de HTML y, ante todo, mirar en #sidebar-wrapper cuanto tiene de ancho, (width), vuestra columna, (para no poner una imagen demasiado grande de la que no se vea más que una pequeña parte), y luego buscar h2

Si ese h2 está detrás de sidebar, o sea que se ve así: sidebar h2 allí mismo podeis poner una línea para el fondo así:

background: url("la dirección de la imagen") no-repeat center;

Si ese h2 está en alguna zona donde ponga Headings, (o algo parecido), significa que las opciones que haya bajo h2 quizá afectarán tanto a los títulos de la sidebar como a los de las entradas.

En este caso teneis que buscar las definiciones de la sidebar, (a veces están bajo Sidebar Content, a veces no, pero siempre están juntas), que suelen ser sidebar ul, sidebar li, sidebar p, etc. y añadir esto:

.sidebar h2 {
background: url("dirección") no-repeat center;
}

En ambos casos haceis vista previa.

Si la imagen quedara mal, ya sea porqué sea del mismo color que los títulos, o porqué sea una línea y la quereis ver debajo del título, añadis, antes de la clave de cierre } esta línea:

height: XXpx;

siendo XX la altura de la imagen, más la de las letras.
Y en la línea del background añadis bottom para que quede así:

background: url("dirección") no-repeat center bottom;

De esta forma la imagen se colocará centrada y lo más abajo de la zona del título.

Cualquier duda que eso os haya creado, ya sabeis, mensaje/comentario/mail (lo que prefirais).

Me pregunta Euge en un comentario si se puede poner una imagen distinta en cada gadget.

Aquí está como hacerlo.

Si quieres poner una imagen distinta en cada gadget, primero has de saber la id del gadget.

La id se ve en la zona del HTML.

Debajo de <div id='sidebar-wrapper'> verás varios códigos que empiezan más o menos así:

<b:widget y en esa línea pone: (te pongo la del perfil como ejemplo) id='Profile1'

Eso que está entre las comillas simples es lo que has de recordar.

Subes al CSS y en lugar de lo que explico más arriba pones un código por cada gadget, de esta forma: (sigo con el perfil)

#Profile1 h2 {

background: url(dirección de la imagen) no-repeat center;

height: XXpx;

}

Poniendo la url de la imagen que vayas a poner entre los paréntesis y la altura de la imagen en lugar de las dos XX

Si vieras que el título necesita moverse de sitio añades padding-top: XXpx; antes de la llave de cierre y podrás moverlo hacia abajo o hacia arriba dependiendo de la cantidad de píxels que pongas ahí.

También me han preguntado si se puede suplir el título del gadget por una imagen.

Hasta donde yo se, no es posible.

Para que el título no se vea se ha de quitar del gadget. Al hacerlo, eliminamos todo lo que incluye esa zona, letras e imágenes.

Si hay algún sistema para que no se muestren las letras, pero si una imagen, lo desconozco.

Imprime esta entrada