Feb 10, 2009

Adding A Background Color To Your Sidebar

In the comments for the entry on how to add a third column to your Blogger blog, Tessa asked a question that prompted this entry. Adding a background color to your sidebar is very easy and is a good way to give some color to your blog or make your sidebar content stand out. If you're sidebar templates doesn't provide a background color for your sidebar scroll down to the wrapper. It looks like this in the Minima template:

#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 */
}


Just add a simple line to the wrapper code.

#sidebar-wrapper {
background: #DDDD99;
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 */
}


If you aren't familiar with hex color codes (#DDDD99;) under Layout> Fonts and Colors you'll find a variety of color codes you can use. Every time you click on a color the hex code in the box on the right changes. Just jot down the color code of a color you like and add it to the line we added to the sidebar-wrapper. In this example I used the hex color code for ocher. I suggest you do this on a test blog before you try it on your own blog especially if you'll be playing around with the colors trying to pick one. Once you've added the color code to the sidebar hit preview and if you like what you see save it and you're done.

If you're anything like me you'll probably notice that the background color and the text border each other very tightly and this will annoy you to no end when looking at your blog. Since the background of the blog is white and the background of the sidebar is ocher this is really noticeable to me.


The easy way to fix this if it bothers you is to add some padding to the background wrapper so that you have breathing room between text and the edge of the colored background.

#sidebar-wrapper {
background: #DDDD99;
padding: 5px;
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 */
}


Hit preview and if you're fine with it just save it.

No comments:

Post a Comment

I hope you find this blog a useful garden blogging resource. Sometimes I may reply to comments with my MrBrownThumb account or I may reply with my Garden Bloggers account. Hope this isn't confusing. If you're looking for gardening information check out "Google For Gardeners"

Note: Only a member of this blog may post a comment.