tips,tricks and hacks: A Widebar

A 'Widebar' is another sidebar that spans the space of two sidebars, either above or below those two sidebars. Obviously, this only works if your blog is laid out with two sidebars side by side. I have been wanting to use Vivek's Adding a wider-sidebar to your blog ever since I first saw it. I liked the idea of another sidebar to further group my multiple sidebar widgets into a more pleasing, easy to read format. But, the code was 'static' not 'fluid'. For all you fans of the fluid template style (or those who don't know what a fluid template is) see these posts for a review of fluid templates:

I really wanted that widebar, so I worked on Vivek's hack yesterday to modify it for a fluid template. I had success, much to my surprise. For me, it is always a surprise when my coding works!

To use the code, first read Vivek's post to get a feel of what it about. He has nice graphics to make it easy to visualize.

A fluid template design will expand to fill your reader's computer. Here is a quick re-cap from my other posts on fluid design. Instead of the width being a pixel value, it becomes a percentage. The sum total must be 100%. Now I have four columns...two sidebars, one widebar and the main content. I first addressed the entire content:

left margin 5%
right margin 2%
width 93% (this 93% contains the main and two sidebars)

I then assigned these values: (Follow me here. This part is 100% of the above 93%)

main 50%
sidebarleft 22%
sidebarright 22%
6% for the space between the columns

Then I broke it down again and assigned this value to my widebar (which is 100% of the left and right sidebar)

widebar 44%

Before you begin, backup your template or practice in a test blog! To implement this hack on your blog, this is the code you will add to your CSS style sheet (between the <head> and </head> tags):

#widebar-wrapper {
width: 44%;
float:right;
padding-bottom:10px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}

#widebar {
width: 100%;
padding:10px 0 5px 0px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */eak-word; /* fix for long text breaking sidebar float in IE */
}

Now, in the unexpanded view, find <div id='main-wrapper'>. That is what it was called in my template. In Vivek's it was called content-wrapper. Add this code in that wrapper section:

<div id='widebar-wrapper'>
<b:section class='sidebar' id='widebar' preferred='yes'>
</b:section></div>

Save your template. Go to 'Page Elements' and you will see a new 'Add Page Element' in your widgets. You can create a brand new widget for your Widebar, or drag a widget from one of your sidebars to it.

This hack was modified to work on my template, Minima. With a few adjustments here and there, it should work on any template. I found I had to adjust the padding values to make it fit the way I wanted on my blog.

post signature

tips,tricks and hacks

Tuesday 19 December 2006

A Widebar - Fluid Style

No comments:

Post a Comment