3 Columns : Minima Lefty : Left and Right Sidebars

Article Series: 3 Column Step by Step Guides

Here are the steps to convert a default 2 column Minima Lefty template in to a three column template with two sidebars on left and right hand sides of the main post area.

The Minima Lefty gets its name because its default sidebar is on the left hand side, unlike the basic Minima template which has it on the right. In this tutorial, we will add a second sidebar to the right hand side of a default Minima Lefty template.

(If you really want to understand what's happening here, read the article series Three Column Templates Explained.)

1) Add a new CSS id selector for the 2nd sidebar wrapper.

• Go to Layout -> Edit HTML
• Locate the #sidebar-wrapper section (Do a Find using your browser)
• Copy that full section and paste below the existing sidebar section (it doesn't have to be below) and rename it to #right-sidebar-wrapper
• Change the float:$startSide to float:$endSide of this newly copied section (See the code snippet below)

#sidebar-wrapper {
width: 220px;
float: $startSide;
word-wrap: break-word; /* fix for ... in IE */
overflow: hidden; /* fix for long ... float */
}

#right-sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for ... IE */
overflow: hidden; /* fix for long ... float */
}

2) Introduce a new div element, as a child of the content-wrapper, to be the placeholder for the 2nd sidebar

• Locate the <div id='main-wrapper'> element.
• Copy the code shown in red, above that section (this has to be above)

<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>

<div id='right-sidebar-wrapper'>
<b:section class='sidebar' id='sidebar-two' preferred='yes'>
</b:section>
</div>

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>

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 #main-wrapper section
• Insert a right margin of 12 pixels.

#main-wrapper {
width: 410px;
margin-right:12px;
float: $endSide;
...
}

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.

6) Modify the CSS rules for the wire frame layouts editor.

• Locate the end of the skin denoted by "]]>"
• Add the following code shown in red, above that line.

/** Page structure tweaks for layout editor wireframe */

body#layout #outer-wrapper {
padding-top: 0;
width:720px;
}
body#layout #header-wrapper,
body#layout #content-wrapper,
body#layout #footer {
padding: 0;
width:720px;
}

body#layout #main-wrapper {
width:400px;
}

body#layout #sidebar-wrapper,
body#layout #right-sidebar-wrapper {
width:150px;
}

]]></b:skin>

Save the template. Switch to Page Elements view and enjoy your 3 column template!

Related Posts

• Three Column Templates Explained