How To Add Colors To Your Theme Sidebar

There are times when you would like to add some color to your WordPress Theme’s sidebar to make it more unique, especially if you are using a free Theme which many others are using. There are a few ways to go about adding colors to your sidebars.

The easiest method would be simply specify a color for your sidebar background in your CSS stylesheet. This is because almost all WordPress Themes declare their sidebars as “sidebars” in the stylesheet so you can easily recognize that particular section. To add color to the sidebar background, simply specify the color you want by adding this attribute – background-color: #xxx; inside the curly brackets.

The downside of using this method is the color ends with your sidebars. So if you have a short sidebar, it will be “hanging” half way.

The other workaround would be to declare the color you want for the whole “container”, which is the column which houses your contents and the sidebars. Some programmers describes it with other words like “wrapper” or “columns” and others so you will have to do some guesswork. Again add in the same attribute. Once you get it right, the whole page, except for your main background will be in the color you specified. Now all you have to do is to change the color of your “contents” area. Then your sidebar will have the colors spreading right down to the footer.

The downside now will be your contents will be “hanging” if the area is shorter than the sidebars.

The best and most professional looking method is to use an image to separate your contents and your sidebars. This way, the background of your sidebar and the contents will both spread evenly vertically across your page.

For noobs like us, getting the width right will be tricky. I use a very crude method which does away with any calculations. First, I specify a background color for the sidebars so I know the exact location. Then I take a screenshot of the page. Next paste the image in Photoshop. Crop the height of the image to approximately 10 to 15 pixels. The width must remain the same.

Select the potion of the sidebar, which you now can see clearly where it start and ends. “Paint-Bucket” it with the color you like. Save the image as jpg. Give it a easy to remember filename like “pagebg.jpg” or something. Upload the image to your Theme’s images folder.

In you CSS file look for the “container” div or whatever that you should have guessed by now. Inside the curly brackets, instead of just the background colors, add the url of the images. Example: #container background: #000 url(images/yourimagefilename)repeat-y Update and refresh. You should have a nice and even background color separating the sidebar and the contents.