How to add color behind your sidebar wrappers:

Today we're going to be adding colors behind the text on our blog as seen here. It's a nice way to draw attention and give emphasis to your blog content. 

NOTE: This tutorial works with BLogger's '06 minima template.

1.To get started, locate this section of this code in the <:b:skin>: section.

#sidebar -wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Note:If you cannot find this exact code on your template, search #sidebar-wrapper instead.

2.To put a color on your sidebar, simply add this line colored in red. You can change the hex color values of your choice. I just used #ffffcc as an example.

#sidebar -wrapper {
background: #ffffcc;
margin -$endSide: 2%;
width: 25%;
float: $endSide;
display: inline; /* fix for doubling margin in IE */
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

3.To put a color behind your main wrapper, simply add the same line of code under the main wrapper section too!

Here is a nice color chart you can use color codes from.

 

Have fun!

NOTE: you can play around with blogger's new template designer and also get color behind your sidebars there. See Below: