Títulos de la sidebar personalizados III: fondos con imágenes distintas

Hace un tiempo habíamos visto cómo personalizar los títulos de la sidebar con colores y bordes y luego con imágenes e íconos. Ahora vamos a ver otra forma de personalizar los títulos de nuestra sidebar . Y esta tercera forma viene a raíz de algunas preuntas, como la que hizo G:

Aprendí mucho con este tutorial, pero, cómo hago para poner imágenes diferentes para cada título de la sidebar? ¿es posible?

La respuesta es afirmativa y ahora vamos a ver cómo hacerlo.

♠ Lo primero que haremos será ingresar a nuestro blog y de ahí a Diseño/ Edición de HTML y Expandir plantillas de artilugios.
♠ Luego, buscamos el id del widget al que queremos poner un fondo a su título. Será sencillo de localizarlo si es que tiene un nombre. Por ejemplo, si mi gadget se llama "Datos personales" busco este nombre. Cuando lo encuentre se verá así:

<b:widget id='Profile1' locked='false' title='Datos personales' type='Profile'>

Entonces, el id de este gadget es lo que está en negrita (Profile1) no incluyendo las comillas.

♠ Una vez que tengamos los id del gadget o gadgets cuyos títulos querramos cambiar de fondo, buscamos lo siguiente.Si nuestra plantilla es la mínima buscamos:

/* Sidebar Content
-------------------------------*/

Si usamos la plantilla rounders, buscamos:

/* Sidebar Boxes
-------------------------------*/

♠ Debajo de éste pegamos lo siguiente:

#Profile1 h2 {
background: url(AQUÍ-URL-IMAGEN-FONDO) left top;
}

Si queremos agregar otra imagen de fondo al título de otro gadget bastará con buscar su id y colocar un código igual al anterior solo que borraremos Profile1 y pondremos el id del otro gadget.

Si queremos colocar un ícono en lugar de un fondo, cambiaremos el código anterior del background por este otro: background: #FFFF99 url(aquí-imagen) no-repeat right; y seguiremos los otros pasos.

El resultado será el siguiente: