Blogger Template with Rounded Corners and Adjustable Column Width

While I liked the general style of the "Rounders 3" Blogger template, I really wanted some things to be modified:

1. to add the third vertical column to the left of the main post section;
2. the third column should be consolidated with the main post section in one visual block;
3. I'd like to keep rounded corners.

All those are definitely feasible, but adjusting column width in the original "Rounders 3" could become some headache.

In the "Rounders 3" rounded corners are defined with background pictures in two wrappers: one for two top corners and the other for two bottom ones.
In this case every adjustment in width of a column would require redrawing of the corner picture to follow the change.

A simple solution to make width easily adjustable would be to employ a 4-wrap structure each wrap with one of the corners.
For that 4 corner pictures need to be at a reachable web hosting.
I uploaded them to Picasaweb - anyway it is the default Blogger's storage for images.

Since I planned to use the corners for all of the blocks in the blog page the template styles should be updated with new classes of <div>

/* Round corners div wrappers --------------- */
div.wrap-1 {
float:$startSide;
background-image: url("http://lh5.ggpht.com/
_6uhqGhAnYS8/SoDG27WBpuI/AAAAAAAAAR8/
7W7XN9gbIKY/s800/RCorner_TopLeft.png");
background-repeat: no-repeat;
background-position: $startSide top;
padding:0;
}

div.wrap-2 {
float:$startSide;
width:100%;
background:transparent url("http://lh3.ggpht.com/
_6uhqGhAnYS8/SoDKOuKcJ3I/AAAAAAAAASI/
FO8GZlpdnGU/s800/RCorner_TopRight.png")
no-repeat $endSide top;
padding:8px 0 0;
}

div.wrap-3 {
float:$startSide;
width:100%;
background:transparent url("http://lh3.ggpht.com/
_6uhqGhAnYS8/SoDKXk4wLwI/AAAAAAAAASM/
vZCNY04HzOs/s800/RCorner_BottomLeft.png")
no-repeat $startSide bottom;
}

div.wrap-4 {
float:$startSide;
width:100%;
background:transparent url("http://lh6.ggpht.com/
_6uhqGhAnYS8/SoDKowtWYZI/AAAAAAAAASQ/
j8KRoSoiN9c/s800/RCorner_BottomRight.png")
no-repeat $endSide bottom;
}
/* Round corners div wrappers END ----------- */

HTML wrapping structure looks like this:

<div class='wrap-1' id='header-wrapper'>
<div class='wrap-2'>
<div class='wrap-3'>
<div class='wrap-4'>
<b:section class='header' id='header' maxwidgets='1'>
.......
</b:section>
</div>
</div>
</div>
</div>

Adding "width" attribute to the <b:skin> (CSS) section:

#header-wrapper {
width:$BlogWidth;
background-color:$titleBgColor;
margin-top:22px;
margin-$endSide:0;
margin-bottom:0;
margin-$startSide:0;
padding:0 0 0 0;
color:$titleTextColor;
}

and the corresponding variable at the top of the <b:skin> section:

<Variable name="BlogWidth" description="Total Blog Width"
type="automatic" default="920px" value="920px">

makes adjustment of the section width a snap.

It should be said that many people are interested in rounded corners techniques for web design. While my current goal was only to make width of a rounded corner block easily adjustable from a variable but my choice of rounded corners implementation was straight forward - there are many very interesting approaches allowing to create rounded corners with fancy graphic effects as 3D profiles, gradients, reflections, shadows, etc. Recently I bumped on an interesting post with a list of different techniques: "25 Rounded Corners Techniques with CSS" - check it out.