Personalizar los elementos de la sidebar de forma independiente.

El otro día os explicaba como poner una imagen en los títulos de los gadgets.

A raiz de esta entrada me preguntaron si era posible poner una imagen distinta en cada gadget. La respuesta es Si. Se puede personalizar cada título de forma independiente.

Y como muestra de ello fíjate en los gadgets de la columna de la derecha.

Todos los títulos tienen una línea debajo, que no es un subrayado, sinó un borde, pero si te fijas en el gadget de Twitter ese no tiene línea bajo la palabra ¡Cucú! que es el título del gadget.

La forma de personalizar el título de cada gadget de forma independiente es añadir un trocito de código para el título de ese gadget concreto.

Siguiendo con el ejemplo del gadget de Twitter, te contaré como lo he hecho.

Diseño o Personalizar (depende de por donde entres)/Edición de HTML.

SIN EXPANDIR PLANTILLAS DE ARTILUGIOS.

Primero he bajado al HTML del código en busca de la id de ese gadget. Como tiene título me ha sido fácil verlo. (Recuerda que la id se ve en la línea que empieza por <b:widget ) En este caso se trataba del HTML4

Con este dato en la cabeza he subido al CSS y he añadido este código:

#HTML4 h2 {
border-bottom: 0px;
}

¿Que significa este código?

#HTML4 es la identidad del gadget/widget, h2 es como se denominan los títulos de los gadgets en el código, al menos en la mayoría de plantillas de blogger.

Como habia dado la orden de que los títulos de los gadgets tuvieran un borde debajo, (la línea que se ve en los demás), con border-bottom: 0px; le digo que en este gadget concreto esta línea o borde, ha de medir 0 píxels, con lo cual no se verá.

Como Veis es sencillo. Solo has de explicar claramente qué quieres que se vea y donde.

Imprime esta entrada