Cómo personalizar los títulos en la columna lateral para que luzcan todos iguales o diferentes

Este es algo que tenía en mi lista de pendientes, y va dedicada para Sueños Rotos, y para ti, si tienes pensado personalizar los títulos de la columna lateral de tu blog.



En una entrada pasada, te decía como poner un fondo gradiente en el título usando un generador, hoy te diré como personalizar los titulos de la columna lateral usando una imagen, aunque también puedes utilizar un color de fondo, bordes etc, este es un simple ejemplo, usando una imágen:

¿Lista (o)? Entonces, vamos por partes...

Agregar la misma imagen a todos los títulos de la columna

Para poder personalizar los títulos de la columna lateral, necesitas saber (1)como está identificada la columna y (2)saber que etiqueta lleva el título que generalmente, a menos que se haya cambiado, es h2.

En las nuevas plantillas, es muy fácil, y para que todos los títulos de los gadgets tengan la misma imagen, sólo tienes que añadir estas lineas de código (CSS) en el campo de Añadir CSS, yendo al Diseñador de plantillas, de ese modo podrás comprobar los resultados al momento y hacer los ajustes que necesites.

.sidebar h2 {

background: url(URL_DE_LA_IMAGEN) no-repeat left top;

padding: 4px 6px 5px 5px;

text-align: left /*alinear el texto*/

line-height: 27px;/*necesitas editar el valor según necesites*/

}

En donde:

• Con background, ponemos la imagen que tendrá el titulo de la columna.


• Con left top,  posicionas la imagen, y para entender como funciona, puedes comprobar los resultados si usas otros valores.


• Con el padding, le das espacio, por así decirlo, para que la imagen se vea completa, y los valores se leen: arriba, derecha, abajo, izquierda, esto también "moverá" al título.


• Con text-align alineas el texto, y puedes usar los valores: right, para alinearlo a la derecha, o center, para centralo, y left para alinearlo a la izquierda.


• Con la propiedad line-height, mueves el título verticalmente con respecto a la imagen.

Si sólo quisieras poner un color de fondo,  en lugar de usar background: url(URL_DE_ LA_IMAGEN) no-repeat left top; usarás esta linea de código:



background: #ABCDEF;



Lo que marqué como ABCDEF es el color hexadecimal, para escoger un color, puedes consultar esta tabla de colores.





Como identificar la clase y el ID de la columna lateral y como escribir el código CSS 

Si usas las nuevas plantillas, no tendrás problemas con esto, pero si usas plantilla de terceros, puede ser que la columna lateral esté identificada de otro modo, para saberlo, tendrás que ir a la Edición de HTML de la plantilla, y con la ayuda de Ctrl F, buscas el título que le pusiste al primer gadget, y justo arriba verás unas linea parecida a esto:

 <b:section class='sidebar' id='sidebar' preferred='yes'>

En esa linea,  podemos ver la clase que es sidebar, y el ID, que también es sidebar,  si vamos más para abajo, veremos estas lineas:

<b:includable id='main'>

  <b:if cond='data:title'>

    <h2><data:title/></h2>

  </b:if>

 <data:title/> es la linea que hace que aparezca el título de la columna y está dentro de una etiqueta h2, por eso, funcionará si usamos:

.sidebar h2

Es decir,  juntamos la clase (que lleva un punto antes del nombre), con la etiqueta h2 que tienen los títulos, de ese modo podemos hacerle lo que nos de la gana a los títulos, por medio de las propiedades, recuerdas, ¿qué le hago y a quién se lo hago?...

Como agregar una imagen diferente a cada gadget de la columna lateral

También es posible agregar una imagen diferente a el título de cada gadget, para que todos se vean diferentes, y para ello es necesario identificar el ID de cada uno de ellos.



Antes de empezar,  necesario estar seguros de que no existe algún fondo o imagen declarado en el titulo de la columna, y de ser así hay que eliminarlo,  y este probablemente esté declarado como te decía al principio.



Para identificar el ID, tienes que ir a la edición de HTML y buscar el código de dicho gadget, con la ayuda de ctrl F, y buscarlo con el nombre que le pusiste.



Luego, para escribir el CSS, tienes que acompañarlo de la etiqueta h2 (ya que en la plantilla, los títulos tienen esa etiqueta, a menos que se haya cambiado) para que los estilos se apliquen al título del respectivo gadget, por ejemplo:

1. Para el título de las etiquetas:

Busco en el HTML el título del gadget, y tomo nota del ID:



<b:widget id='Label1' locked='false' title='El título que le pusiste' type='Label'>



Entonces funcionará:

#Label1 h2 {

/*y aquí escribo las propiedades, como background etc*/

}

2. Para el título del Archivo:

Busco en el HTML el título del widget, y tomo nota del ID:



<b:widget id='BlogArchive1' locked='false' title='El título que le puse' type='BlogArchive'>



Entonces, el CSS que funcionará:

#BlogArchive1 h2 {

/*todas las propiedades que quiera como background*/

}

Espero se útil, y siéntete libre de comentar tus ideas e inquietudes.