WordPress: Cómo agregar colores a tu sidebar

Seguramente has pensado añadir algo de color a la barra lateral de tu tema WordPress para hacerlo más único, especialmente si estás usando un tema libre que muchos otros sitios también utilizan.

Hay varias maneras de lograr añadir colores a tus barras laterales. En esta nota te enseñamos un método muy efectivo.

La manera más sencilla sería simplemente especificar un color para el fondo de la barra lateral en la hoja de estilos CSS. Esto es porque casi todos los Temas de WordPress declaran sus barras laterales como "sidebars" en la hoja de estilos para que se pueda reconocer fácilmente esta sección en particular. Para añadir color a la barra lateral de fondo, simplemente especifica el color que deseas mediante la adición de este atributo...

...dentro de las llaves.

La desventaja de este método es que el color termina con tus barras laterales. Así que si tienes una barra lateral corta, quedará "colgado" a mitad de camino.

La otra solución sería declarar el color que deseas para todo el "container", que es la columna que alberga el contenido y las barras laterales. Algunos programadores también lo llaman "wrapper" o "columns", por lo que investiga bien el código.

Nuevamente, vuelve a agregar el mismo atributo:

Una vez que salga bien, toda la página, excepto el fondo principal será del color que has especificado. Ahora todo lo que tienes que hacer es cambiar el color de tus áreas de contenido. Entonces tu barra lateral tendrá los colores esparciéndose hasta el pie de página.

Lo malo será que tus contenidos estarán "colgados" si la superficie es más corta que las sidebars.

El mejor método y el más profesional es utilizar una imagen para separar el contenido y las barras laterales. De esta forma, el fondo de la barra lateral y el contenido, ambos se distribuirán de forma equilibrada, tanto verticalmente como a través de tu página.

Obtener el ancho correcto será difícil. Para esto, en primer lugar, debes especificar un color de fondo de las barras laterales, así sabrás la ubicación exacta. Luego realiza una captura de la página. A continuación pega la imagen en Photoshop. Recorta el alto de la imagen a aproximadamente 10 a 15 píxeles. El ancho debe seguir siendo el mismo.

Selecciona la posición de la barra lateral, que ahora se puede ver claramente dónde empieza y dónde termina. Utiliza "Bote de pintura" con el color que deseamos. Guarda la imagen en formato JPG. Debes darle un nombre fácil de recordar como "pagebg.jpg" o algo así. Sube la imagen a la carpeta de imágenes del Theme que utilizas.

En tu archivo CSS busca el div "container" (o el nombre que le hayan asignado en ese código). Dentro de las llaves, añade la URL de las imágenes.

Ésta sería la estructura:

Actualizamos y refrescamos, y ahora debemos tener un agradable y parejo color de fondo que separa la barra lateral y los contenidos.

Fuente: Blogigs.com