Customizing the Sidebars

Are you find­ing that when you change the width of your con­tent col­umn, your side­bar breaks and the con­tent col­umn over­laps the side­bar? A fix to that is explained here that only takes a few sec­onds of your time to do.

It is highly advised that you under­stand the basic idea of faux columns before you read this article.

In The­sis, you have the abil­ity to change the num­ber of columns that make up your blog, and you can change the width of those columns as well. The changes you make to the the num­ber of columns, and the width of each sep­a­rate col­umn has an effect on the entire width of the blog. These are all vari­ables that mess with our theme a lit­tle bit.

If you notice one thing about the side­bar on the Blo­gus­sion Theme, is that it extends the full height of the con­tent col­umn (the area where your arti­cles are). This is called a faux col­umn lay­out, and it requires a lit­tle extra CSS code to make it work. Because, as quotes from the List Apart article:

One of the some­what frus­trat­ing prop­er­ties of CSS is the fact that ele­ments only stretch ver­ti­cally as far as they need to. Mean­ing, if a 200-pixel tall image is con­tained within a <div>, the <div> will only expand down the page 200 pixels.

The prob­lem with this flex­i­bil­ity and our theme

To cre­ate a work­ing faux col­umn, you have to man­u­ally go into the CSS and edit a cer­tain value for proper align­ment. When­ever the width of your blog changes, this value needs to be updated, or your side­bar will face some dif­fi­cul­ties as shown below.

Sidebar bug

How to fix this

So to fix the side­bar, it’s actu­ally quite sim­ple. It just requires a lit­tle patience on your end and some minor CSS tweak­ing. I would highly rec­om­mend you have Fire­bug to make this a lot quicker.

Open the stylesheet of your choice in your FTP…thesis/custom/css/color.css

Each color of the Blo­gus­sion theme uses a dif­fer­ent CSS file, so open the file accord­ing to the color scheme you chose in your admin options.

Search your CSS (cmd +F or cntrl + F)

Search for this line your stylesheet:

.custom #content_box { background: #FFF url(../images/default/content_box.gif) repeat-y 63.4em 0; border: 1px solid #000; }

We are going to focus on the red text in that line of CSS. If you read the arti­cle from A List Apart on faux columns, you would know that the back­ground of the side­bar is actu­ally an image we are repeat­ing ver­ti­cally 100% in the con­tent box, that is, the DIV that sur­rounds the code for the con­tent col­umn and the side­bar column.

<div "content_box">
    <div id="content">
        ...
    </div>
    <div id="sidebars">
        ...
    </div>
</div>

Now the trick to fix­ing the side­bars is to actu­ally edit the back­ground posi­tion of where this image cuts off at. The back­ground posi­tion is con­trolled by the num­ber I high­lighted in blue, 63.4em.

What that code is doing is align­ing the back­ground image of #content_box to the right by adding 63.4em of white­space to the left to push it over. This is a sta­tic thing, and doesn’t adjust auto­mat­i­cally in our theme…yet.

So an easy way to think of adjust­ing it is like this:

The larger your con­tent box gets, the higher that num­ber should be.
The smaller your con­tent box gets, the lower the num­ber should be.

So really, it’s a pretty easy fix. It is our hope to some­how make this a lit­tle more auto­mated in future edi­tions of this theme release, but for now it will take a lit­tle CSS adjust­ing. But it’s not too bad, right?