Renato:

Para usar imágenes en los blidgets debes colocarlas mediante CSS.

Primero tienes que identificar el blidget que quieres modificar. Para eso están los ID en HTML, se utilizan para hacer modificaciones en específico a un elemento del sitio.

Para ver un ID te recomiendo utilices un complemento de Firefox llamado Firebug, muy bueno, cómodo y fácil de usar.

Una vez que lo instales, debes ir sobre el blidget y presionar botón derecho y escoger la opción Inspeccionar elemento, con eso podrás llegar a la parte del código en HTML que te mostrará el ID, debería ser algo como:

block-123456

Ahora que ya tenemos esto claro... Pasemos al CSS! ;)

Para colocar una imagen de fondo (en este caso que parezca título) debes primero subir la imagen que quieres utilizar.

Vamos a suponer que tu imagen se llama titulo.jpg y que quieres colocarla al blidget 123456.

Entonces debes escribir estas líneas en cualquiera de tus hojas de estilo de CSS:

#blidget-123456{

background: url(titulo.jpg) no-repeat top left;

}

En este caso estás diciendo que la imagen va de fondo, que no se repita y que se pegue en la esquina derecha arriba.

Si lo pegas tal cual, va a funcionar, pero va a quedar tapado con el contenido, para que eso no pase, tienes que quitarle la altura de la imagen al blidget para que haga el espacio y se vea.

Entonces, suponiendo que tu imagen mide 20px de alto, entonces escribimos lo siguiente:

#blidget-123456{

background: url(titulo.jpg) no-repeat top left;

padding-top:20px;

}

Listo! Con eso resolvemos lo del fondo...

Ahora para separar un blidget de otro, existe la propiedad margin, por lo que si quieres separar algunos en específico ocupas el ID y colocas la propiedad de la siguiente manera:

#blidget-123456{

margin:20px;

}

Con eso le das 20px por cada lado, ahora si quieres arriba y abajo por ejemplo entonces tienes que escribir:

margin:20px 0;

Así le dices que arriba y abajo, pero no por los lados.

Ahora si quieres distintas distancias por cada lado, entonces, en el orden de las manijas del reloj escribes lo siguiente:

margin:20px 10px 0 20px;

Espero se entienda, es un poco avanzado, pero traté de ser lo más clara posible.

Saludos!

-----------------

Paula S.
www.santocine.com
barriodiseno.bligoo.com
@paulitzim