Compender: Minima Lefty Stretch To Three Column Template Conversion

This guide will show you how to easily convert Minima Lefty Stretch to a three column layout template.

First, make sure your template is Minima Lefty Stretch:

Then navigate to Template->Edit HTML and get hacking:

Make room for the additional column by reducing size of #main-wrapper by the size of our new comumn (67% - 25% = 42%). Also, to get all our floats in a row, change the float and margin spacer from right to left:

#main-wrapper {
margin-left: 2%;
width: 42%;
float: left;
display: inline;       /* fix for doubling margin in IE */
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}

Create the new sidebarRight wrapper by copy-and-pasting and then editing #sidebar-wrapper:

#sidebar-wrapper {
margin-left: 2%;
width: 25%;
float: left;
display: inline;       /* fix for doubling margin in IE */
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}

#sidebarRight-wrapper {
margin-right: 2%;
width: 25%;
float: right;
display: inline;       /* fix for doubling margin in IE */
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}

Finally, we need to edit the HTML divs so that sidebar-wrapper comes before main-wrapper and our new right hand column follows main-wrapper:

<div id='sidebar-wrapper'>
 <b:section class='sidebar' id='sidebar' preferred='yes'>
   <b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
   <b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
 </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>

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