CSS Hack for Setting a Sidebar Background Color

The default structure of this WordPress Canvas theme is not conducive to having a background sidebar color. However, with a little CSS, this can be easily achieved. As you can see, I made it work specifically for this post. Add this CSS to your Custom CSS box under Appearance => Custom CSS.

.site-main .sidebar-container .widget-area {
	background-color: #eef6f6;
}
.site-main .sidebar-container .widget {
	padding: 10px 20px 0 20px;
}

Now if your left and right side padding add up to 40px, you might want to go to Appearance => Theme Options => Grid, and add 40 pixels to your sidebar width. In my case, my sidebar width would change from 300px to 340px. This way the actual content width of my widget still has a width of 300 pixels, which is what I originally wanted.

 

2 thoughts on “CSS Hack for Setting a Sidebar Background Color

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>