3 columns layout for Beta-Blogger Rounder Template (recipe)

un peu de code (hors-propos - n'en tenez pas compte) pour amis-utilisateurs beta-blogger (in ENGLISH).
I am not the author of this great hack. I have just adapted it to the specific Rounder template.. Please visit the dedicated website for Blogger Beta Hacks. The one who developped it.

This Rounder template is a bit different from the other templates (different "syntax").
So I tried out to find a solution. Took me a few hours (am not a coder), and finally I believe I managed a solution (not THE solution though, cose presenting some trade-offs).

Before starting it off, please understand that the specificity of "Rounder Template" is its composition of "half-fixed" images - containers are not horizontally stretchable.

When you go thru the HTML code, you can read this comment

/* The images which help create rounded corners depend on the following widths and measurements. If you want to change these measurements, the images will also need to change.
*/

It implies you should not try to tweak the size of the wrappers by yourself, unless you want to re-build a whole "background" on your own. If for the main one (the post "container"/"wrapper"), it sounds true, re the other ones, it looks like more feasible & easier. The only thing though is you might lose the "rounded corner" design (a trade-off) - like in this current blog (look...).

So here we go !

GO to the HTML code of your BETA-blogger.

1.You look for the following and change the bolded information (numbers up to you) in /* Page Structure

#outer-wrapper {
width:890px;
margin:0 auto;
text-align:left;
font: $bodyFont;
}

(...)

#sidebar-wrap {
width: 200px;
float:right;
margin:15px 0 0;
font-size:97%;
line-height:1.5em;
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 */
}

you add (still in the /* Page Structure chapter - at the end of it is alright)

#newsidebar-wrap {
width:185px;
float:left;
margin:12px 0 15px;
font-size:97%;
line-height:1.5em;
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 */
}

2. Ditch fixed images (corners) - for esthetic purpose

Go to /* Blog Header and take off all the"url("http://www.blogblog.com/rounders2/corners_cap_bot.gif")"
(watch out "space" - no space after : !!!)

Go to /* Footer
same process, take off the 1st 2 URLs (only)


3. there could be a /* newsidebar box chapter I believe (in order to add a "container"), but did not tried this possibility out (even if why not) - from a graphic design point of view, I personnally do not like it...

5. now back to html, you look for


<div id='main-wrap1'><div id='main-wrap2'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Messages blog' type='Blog'/>
</b:section>
</div></div>

Before this block of code, you put this

<div id='newsidebar-wrap'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
<b:widget id='LinkList3' locked='false' title='Liens' type='LinkList'/>
<b:widget id='Text3' locked='false' title='' type='Text'/>
</b:section>
</div>


And normally, it should turn like this blog. Be aware am not a professional coder, ... any constructive reaction welcome.
Technorati tags : beta.blogger rounded+corner hack 3+column