- to add the third vertical column to the left of the main post section;
- the third column should be consolidated with the main post section in one visual block;
- I'd like to keep rounded corners.
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 --------------- */
background-position: $startSide top;
no-repeat $endSide top;
padding:8px 0 0;
no-repeat $startSide bottom;
no-repeat $endSide bottom;
/* Round corners div wrappers END ----------- */
HTML wrapping structure looks like this:
<div class='wrap-1' id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1'>
Adding "width" attribute to the <b:skin> (CSS) section:
padding:0 0 0 0;
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.