Micaela 10 de noviembre de 2009 a las 09.04
   Imprimir artículo
elWebmaster.com

WordPress: Cómo agregar colores a tu sidebar


wordpress_finalSeguramente 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…

  1. - background-color: # xxx;

…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:

  1. - background-color: # xxx;

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.

color-layout

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.

sidebar-color

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:

  1. #container background: #000 url (images/yourimagefilename) repeat-y

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


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder