Saturday, March 15, 2008

Here are the steps to convert a default 2 column Minima template in to a three column template with two sidebars on the right hand side of the main post area. This conversion will also work on Minima Black, Minima Blue and Minima Ochre.

<!-- spacer for skins that want sidebar and main to be the same height-->

3) Expand the width of the other wrappers to accommodate the new sidebar

Locate the CSS sections called #outer-wrapper, #header-wrapper and #footer

Change their width property to 880 pixels

#outer-wrapper { width: 880px; margin: 0 auto; ...}

#header-wrapper { width: 880px; margin: 0 auto 10px; ...}

#footer { width: 880px; clear: both; margin: 0 auto; ...}

4) Do necessary adjustments to margins, padding etc

Locate the #sidebar-wrapper section

Insert a left margin of 12 pixels.

#sidebar-wrapper { width: 220px; margin-left:12px; ...}

5) Adjust the max width of the header description to center it in the new expanded header

Locate the #header .description section

Change the max-width property to 880 pixels.

#header .description { ... padding:0 20px 15px; max-width:880px; ...}

Note: Step 6 is only needed if your Layout Editor does not show the newly added sidebar. There was an issue where the Firefox browser didn't show a 3 column template fully in the edit mode. But Blogger reports that the issue has been fixed now.