Minima : Hanging Sidebar on the Left

This article presents an interesting modification to give you a non-conventional three column layout. The idea is to add a second sidebar to a default Minima template offered by Blogger, to make it appear as hanging by the side of the blog. The figure below has a preview of the finished modification and visit the Hanging Sidebar Demo blog for an online demo.

The following steps are tested on a default 2 column Minima template but this conversion should also work on Minima Black, Minima Blue and Minima Ochre templates.

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 #left-sidebar-wrapper
• Change the float: $endSide to float:$startSide of this newly copied section (See the code snippet below)

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

#left-sidebar-wrapper {
width: 220px;
float: $startSide;
word-wrap: break-word; /* fix for ... in 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='left-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) Add a new CSS section for an outer header wrapper which will encompass the existing header wrapper

• Add the following code below the existing #header-wrapper section

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

4) Add a div section as the placeholder for this outer header wrapper

• Locate the section <div id='header-wrapper'>
• Copy the code shown in red, above and below that section
  

<div id='outer-header-wrapper'>
<div id='header-wrapper'>
<b:section class='header' ... >
<b:widget id='Header1' .../>
</b:section>
</div>
<div class='clear'>&#164;</div>
</div>

5) Adjust the other wrappers to accommodate the new sidebar

• Locate the CSS sections called #outer-wrapper, #header-wrapper and #footer
• Do the modifications/additions highlighted in red
  

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

#header-wrapper {
width: 664px;
float:$endSide;
margin: 0 auto 10px;
...
}

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

6) Do necessary adjustments to margins, padding etc

• Locate the #main-wrapper section
• Insert a left margin of 12 pixels.
  

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

7) Adjust the max width of the header description to center it in the new adjusted header

• Locate the #header .description section
• Change the max-width property to 644 pixels.
  

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

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

• Locate the end of the skin denoted by "]]>"
• Add the following code 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 #left-sidebar-wrapper {
width:150px;
}

]]></b:skin>

Save the template. Switch to Page Elements view and move some widgets on to the left sidebar. Then view your blog to see the hanging sidebar in full swing!

(Note: This modification was applied to a default Minima template and was tested on Firefox 3, IE 8 and Chrome 3)