Sidebar color?

[ben verrall]

Hi Bill

Forgive me if I am asking naive questions. I really love your Progress theme – and how much customisation I have been able to achieve with very little understanding of code.

I just wondered if it was possible to change the background color of the sidebar? Is there a simple bit of CSS I can add?

No worries if this is beyond the call of duty…

Ben

P.S. My site is still very much ‘under construction; which is why I was unable to send you a link as of yet.

[Bill Robbins]

You can change just the color of the sidebar if you’d like to. Here’s how to go about doing that.

1) Go to the Appearance section of your WordPress control panel and select Theme Options.
2) Choose the Styling tab at the top.
3) Select yes to include custom styling.
4) Scroll down to the very bottom until you see a box labeled “Custom CSS.”
5) In that box paste this bit of code:

aside.sidebar, aside.sidebar .widget { background-color: #cccccc; }

That will change the background color of your sidebar to silver. The #cccccc is hex color code that tells the browser what color to make something. You can use one of the color pickers above to find the color code you’d like to use for your sidebar (just be sure to delete the code out of the picker you choose of you’ll change that element’s color too). Then just replace the #cccccc with the color code you’d like to include.

6) Save your changes.

Hope that helps out. Let me know if you need any other help.

[Jon Gilgoff]

Hello! How would you do this if you’re using the Foundation theme (earlier version)?

Thanks!

[Bill Robbins]

Jon,

For an earlier version of the Foundation theme, you’ll want to use this code (with the other instructions from above):

.widget {background-color: #cccccc; }

Just use your own hex color code in place of the #cccccc which is a silver color.

Let me know if you have any trouble.

[Author]

Posts