A Widebar - Fluid Style
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:
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)
- main 50%
- sidebarleft 22%
- sidebarright 22%
- 6% for the space between the columns
- widebar 44%
#widebar-wrapper {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:
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 */
}
<div id='widebar-wrapper'>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.
<b:section class='sidebar' id='widebar' preferred='yes'>
</b:section></div>
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.
Labels:
Blogger Beta,
Design,
Fluid,
Hacks,
Sidebars
19 Comments:
Looks like the term I coined (Widebar) is becoming standard now :) Good work on the fluid version!
Thanks for making the fluid version of it. If you are online, you might want to look at my blog once (now). Some thing has gone haywire in it and I have not even touched the HTML till now. Even a back-up copy is not working. I guess I will apply the fluid style and try to fix it. BTW you have any suggestions for it?
For your question left on my post: On label and search pages where the number of posts in the main are very less the sidebars will tend to slip into the main's area. You can fix it by increasing the bottom padding value for main(if not already figured out). The concept is the main should be longer that the widebar wrapper.
Hello Annie. I was able to fix the issue in my blog. Some third-pary javascript was causing the problem (strange and I fixed it by guesswork by simply removing the code).
@Ramani, The term fits perfectly! You are so clever in thinking of it.
@Vivek, thank your for making the original. It is a great little hack.
I don't have any suggestions. But, I just implemented it. So if something comes to mind, I will let you know.
Glad your issue was so easy to fix. Templates are so touchy!
I'm going to try increasing the main area's padding now and see how it works. I'll let you know if any problems arise.
Annie, you might want to add a widget or two like feed etc under the blog main to fill up the empty space there by being able to decrease the padding value. Also can we modify the float value of sidebars to come thing like bottom-right or that types so that they remain under the widebar?
@Vivek, I tried the bottom-right float, but it didn't work as hoped. I think the added widget under the post might be the thing. I will just have to work on making one that will go there.
it looks really nice...must remember to use all these things:D
Yeehah!
Go Annie!
Go Annie!
Go Annie!
Goooooo Annnniiieee!
(ehem)
Had to omit the entire second part of the CSS code (#widebar) but it works like a dream!
Thanks Annie!(and Vivek!)
SJ xx
This is most probably completely irrelevant to what Vivek & Annie are talking about ....but - at:
http://amazingrealms.blogspot.com
(not my blog but one I've been working on - using Ramani's 3 col Scribe template - converted to fluid following Annie's instructions & with Vivek widebar - using Annie's Instructions)
I have no issue with the sidebars creeping across on label pages and I think this is because they are created outside of the "Outer-wrapper" (my own invention - not sure it qualifies as a hack though!) - I created a new wrapper ("wrap 4" in this case)for the two sidebars and widebar to live in because when outside of the "Outer Wrapper" there is of course no width limit narrow enough (because it is the "Body" section) to keep them aligned in the way we are accustomed to.
Anyway, not directly relevant but perhaps useful in some way..
And to all of you, Vivek, Annie, Ramani, Phydeaux3, Hans, J. Noronha, and Alastor, I am so pleased with the way my blogs look - I just want to say a great big THANKS to you all for your brains and generosity which has enabled me to have a unique presence on the bloggosphere.
SJ xx
@jane, thank you so much! And you are doing awesome...you little hacker!!! Keep it up.
Just used this hack again - Vivek you are a star for inventing the widebar - Ramani your naming of it is "marketing" genius - and ANNIE - your "feminine touch" has made it so easy and efficient to implement! I just LOVE the ease with which I can now apply this hack! Kudos all round!
SJ xx
@skanky jane, I'm so glad you noticed I'm a female! You would be suprised at the amount of emails I receive that I'm referred to as a male :-( *sigh* I guess they just assume that I'm a guy because I mess in the inner workings of a template and manipulate it with *gasp* CSS/HTML!! But a feminine touch is always a bonus to anything!
Thanks for the fluid version tutorial. Without it, I fear I may have just gone with a static version of the widebar tutorial by Vivek Sanghi. I personally love fluid layouts, but since this was my first time doing a major modification to my blogs template the idea never crossed my mind. I think that going with a fluid version made it easier to implement into my blog, so thanks for the idea!
how to create widebar-bot if i got code :
#sidebar-wrapper {
width:455px;
float:left;
margin-left:10px;
background:#E0E0E0;
thanks to your response before
I really like the idea of a widebar. Do you think i can implement it on my wordpress blog? I have 2 sidebars as it is now.
BR,
Garmin
@Garmin, I'm not familiar with Wordpress template code, but it seems like it would be possible. How different can it be?
Annie! I followed your and Viveks guide and tried to fix my template but i did not get it work like it should do. Could you help on http://anonymalitys.blogspot.com/
Sidebars drops all time when i post something on blog
Thank you for creating such a wonderful blog. I appreciate its content, clean layout and navigability.
I was wondering if it's possible to create a second widebar. Currently, I have a widebar (so *that's* what it's called!) with a split sidebar (2 columns) below. I'd like to add another widebar below what I already have. Any thoughts? Many thanks for any help you can give!