Blogger Hacks: Adding background color to sidebar

Many of us blogger believes that its useful to separate the sidebar from the body of blog posts. This helps draw attention and gives emphasis to the primary content of your blog. In my opinion, the simplest way to achieve this is to add a different background color to your sidebar. This technique is very similar to that of adding background color to the body of your blog.

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. Or if you just want your sidebar background to be transparent. Just delete the line in red color.

Related Posts by Categories

Widget by Hoctro | Jack Book