29
Chapter 3: Customizing the sidebar
In this chapter, we will explore ways of customizing the blog sidebar, which are
applicable to both fixed width and stretch templates.
In this chapter, I will demonstrate three specific techniques:
• Adding a background color to the sidebar
• Adding background to the sidebar headings
• Using borders/underlines for the sidebar headings
All of these techniques are really easy to apply, and can help you create a whole new look
for your blog template with the minimum of time and effort.
Adding a background color to the sidebar
Many web designers believe it’s useful to segregate the sidebar from the body of blog
posts. This helps draw attention to the primary content of your blog (the blog posts) and
can add much more personality to the overall look 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.
To get started, find this section of code (or similar) in the <b:skin> section of your blog
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 */
}
The actual code for the sidebar element can differ between templates, so if you cannot
find this exact section of code, look for the line #sidebar-wrapper or #sidebar instead.
The hash (#) at the beginning of this line is important, as this distinguishes the id of the
sidebar, rather than the class.
Chapter
3
30
Once you have found the sidebar section in the styling code, you simply need to add one
line which will add the background color.
Using the “Web 2.0” style design from the previous chapter as an example, I could add the
following line of code (highlighted in red) which will add a cream background color to the
sidebar:
#sidebar -wrapper {
background: #ffffcc;