Postbar - something new!

Here is a new one for you. I'm calling it a Postbar in the spirit of previous 'bars'...ie widebar and sidebar. Applications? Well, I wanted an extender to keep my sidebars from moving to the left on label pages.

To explain a bit, I installed the widebar above the right and left sidebars. When I clicked on a label in my category cloud, if I only had a post or two in that category, that made a short list. Then my left and right sidebar, without any prodding from me, shifted to the left to fill up the empty space under that short list. I didn't like that added feature! I wanted all my sidebars to line up in a row like on my home page.

One solution offered was padding the posts to fill space. (And a very nice suggestion. Thanks, Vivek.) Only that left entirely too much white space for my liking. But, it made my sidebars line up. So, I thought instead of putting white space after my posts, why not fill it with something? Hence the Postbar was invented because it is a sidebar that follows the posts.

If you want your very own Postbar, here is what you do. Add the following code to your CSS style sheet (between the <head> and </head> tags):

#postbar-wrapper {
width: 44%;
float:left;
padding-bottom:10px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}
#postbar {
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 */
}

Note: this is for a fluid template design. If you have a static design, plug in your post px sizes. My posts are called #widebar-wrapper in my template. Yours could be labeled differently.

The following code needs to be added between the <body> and </body> tags. Then find <div id='leftsidebar-wrapper'>. (Again your's could be called something similar.)

<div id="postbar-wrapper">
<?xml:namespace prefix = b /><b:section class="sidebar" id="postbar" preferred="yes">
</b:section></div>

After that, save your template and go to the Page Elements. If it is not lined up under your 'Blog Posts' widget, drag the 'Blog Posts' widget to it, then move it all where you want it. This was a gray area for me. No rhyme or reason...lots of dragging. At one point, it wouldn't let me drag a widget, but I saved it and came back and I could move it. Then it worked!

So, a little something for all you blog template tweakers out there. You know who you are!!

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:

• Fluid 3 column Blogger Template
• Blogger Beta - Fluid 3 column Blogger Template

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.

Blogger Beta - Fluid 3 column template

I'm forging ahead with Blogger Beta experiments. I put in three columns...fluid no less! Once again, thanks to my expertise and incredible knowledge of coding Hans and his post Adding a Second Sidebar to Your Template.

Here are the steps I took:

1. I read Hans post :-)
2. I removed the #sidebar-wrapper
3. I added a #leftsidebar-wrapper and a #rightsidebar-wrapper
4. I made these changes to the #outer-wrapper, #main-wrapper, #leftsidebar-wrapper and #rightsidebar-wrapper

   #outer-wrapper {
   margin-left: 5%;
   margin-right: 2%;
   width: 93%;
   padding:0px;
   text-align:left;
   font: $bodyfont;
   }
   #main-wrapper {
   width: 50%;
   float: right;
   word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
   }
   #leftsidebar-wrapper {
   width: 22%;
   float: left;
   word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
   }
   #rightsidebar-wrapper {
   width: 22%;
   float: left;
   margin:0 0 0 25px;
   word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
   }

I'm no more surprised than you. Just a few more tweaks here and there, and I believe I may be ready to switch this blog over to Beta completely!

Fluid 3 column Blogger template

I was inspired to the point of acting on it. The post by George Mikos made me realize that I wanted had to have a fluid CSS template. The thought of my blog expanding to fit each and every reader's computer display was very tempting. So, throwing caution to the wind, I jumped in.

It was relatively simple. Realizing the sum total must be 100% and I had three columns...two sidebars and the main content...I did some simple math. 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 is 100% of the above 93%)

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

To actually edit the template, I located #content, #main, #sidebarleft and #sidebarright in my style sheet. In each one of those I edited the width property by removing the px value and replacing it with the % value. For example:

#main {
width:410px;
float:right;
}

changed to:

#main {
width: 50%;
float:right;
}

I tried different percentage amounts for the sidebars and main, until I found what I liked.

There is controversy over fixed vs fluid design. I had fixed and was never really happy with the way it displayed on different displays. I like the fact that now my page looks like it was made for each and every display. No large expanse of unused whitespace. I know...I like whitespace as much as the next person. It is striking when it is part of the design. Not when it is only there because of the limitations of a fixed template source.

Then there are schools of thought on the optimum line length for ease of reading. Some say 12-15 words are best or 55 characters. Others say longer lines are better. For me, I don't think it will be such an issue because I have three columns. But, I do have another little trick in mind, and I will write about it when I get it working!

So, let me know what you think. What computer display you use, and how do you like it? Any suggestions?