3 Columns : Harbor : Left and Right Sidebars

Article Series: 3 Column Step by Step Guides

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

(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)
• Set the width of both sidebar selectors to 24%
  

#sidebar-wrapper {
width:24%;
float:$startSide;
word-wrap: break-word; /* fix ... IE */
overflow: hidden; /* fix ... float */
}

#right-sidebar-wrapper {
width:24%;
float:$endSide;
word-wrap: break-word; /* fix ... in IE */
overflow: hidden; /* fix ... float */
}

2) Introduce a new div element 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='right-sidebar' 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) Adjust the width of the other wrappers to accommodate the new sidebar

• Locate the CSS section called #outer-wrapper and change its max-width property to 1175 pixels
• Locate the #main-wrapper section and change its width property to 48%
  

#outer-wrapper {
max-width: 1175px;
...
}

#main-wrapper {
width: 48%;
...
}

4) Do necessary adjustments to margins, padding etc

• Locate the #main-wrapper section
• Insert a right margin of 20 pixels.
  

#main-wrapper {
width: 48%;
margin-right:20px;
float: $endSide;
...
}

5) Adjust the max width of the header description to fit the new expanded header

• Locate the .Header .description section
• Change the max-width property to 1000 pixels.
  

.Header .description {
...
max-width:1000px;
...
}

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

• Locate the line reading as "/** Page structure tweaks for layout editor wireframe */"
• Replace that section with the code shown in red below.

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

body#layout #outer-wrapper,
body#layout #sidebar,
body#layout #wrap4,
body#layout #header {
margin-top: 0;
margin-bottom: 0;
padding: 0;
}

body#layout #sidebar-wrapper,
body#layout #right-sidebar-wrapper {
width: 180px;
margin-$startSide: 0;
}

body#layout #wrap4, body#layout #outer-wrapper {
width: 800px;
}

/* Header
----------------------------------------------- */

Save the template. Switch to Page Elements view and move some of the widgets to the new sidebar on the right. (Without adding widgets, the new sidebar won't be visible on the blog).

Related Posts

• Three Column Templates Explained