RSS2.0

Blogpowered

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

6 comments:

Aispinay said...

hi!! this post helped me to configure my sidebar background, Thanks!!!

My Site

Scott Furlough said...

Great tutorial! One question I have is… when I added the color, the content in the side bar is flush up to the edge of the color. How do I add about a 1/8" of space from the edge of the color background and the content of the sidebar?

Anonymous said...

All the posts under blogger hacks are really the good ideas about to design a blog site.

Anonymous said...

Thanks for the super top tutorial. Easy to understand and follow. Thans again.

scribbler said...

it worked perfectly..thanks

Unknown said...

nice info thankss

Gadgets&Technology
www.einfoplanet.blogspot.com