Añadir estilos a un gadget

Retro Icon me preguntaba el otro día:

¿Cómo puedo hacer para crear un cuadro de color negro que contenga texto e imágenes en el sidebar?

Quien dice negro dice cualquier otro color, la cuestión es crear unos estilos para añadir a un gadget determinado y que sea distinto al resto que compone la sidebar.

Lo primero que haremos será añadir los estilos que más tarde podemos modificar para personalizarlo a nuestro gusto. Justo antes de ]]></b:skin> añadimos:

#gadget {

line-height: 20px;

text-align: left;

padding: 12px;

background-color: #000;

color: #fff;

}

Guardamos los cambios y editamos un nuevo gadget en la sidebar escogiendo HTML/Javascript en su interior incluimos:

<div id="gadget">

Aquí añadimos el contenido.

</div>

Si deseamos una imagen de fondo sustituimos background-color: #000; por background:url('url-de-la-imagen') repeat;

Para añadir una imagen en el gadget lo haremos con:

<img src="url-de-la-imagen"/>