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.
Related posts:
- Add Left Sidebar To 2 Column WordPress Theme For a programming noob, how easy is it to add a left sidebar to a 2 column WordPress Theme that has a right sidebar? Not easy. The simple reason is, noobs like me don’t think so logically as compared to someone who has the proper training. So I spent...
- How To Increase The Size Of Your WordPress Theme Size, in this instance is the size area of your blog layout and not size in terms of traffic, contents or whatever that you deemed as the bigger the better. Some says, ’size does not matter’, what matters is the quality. In this case, size does matter because sometimes, you...
- How To Make Rounded Corners For Your WordPress Theme A very popular method to make rounded corners for our WordPress Themes is a workaround by using images. It will be quite lengthy to discuss this method here as it will involve discussing about Photoshop and all. Maybe when I find the time, I’ll do a screencast on how to...
- How To Add A No Sidebar Page To Your WordPress Theme A reader, John asked whether it is possible to add an extra page template without any sidebars to the Soothing Theme. Seems like John would like to add a Forum to his site and he would prefer the Forums page page not to have any sidebars. Seems reasonable enough,...
- How To Use An Image For Your WordPress Theme Background Festive season is around the corner and I thought it would be a good idea to usher in the mood a little bit early this year. For those who are into Internet marketing, this is the season for selling. The buying mood has started and I am already seeing...
{ 1 trackback }
{ 0 comments… add one now }