How to convert a 2 column template to 3 column one??

Hi friends today i am going to show you how to convert a 2 column template

into 3 column one. To explain this tutorial i am selecting the minima template

•Login into dashboard

•Goto Layout>Edit HTML

•Now replace the following css codes


#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

with


#header-wrapper {
width:700px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

with


#outer-wrapper {
width: 700px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#sidebar-wrapper {
width: 220px;
float: $endSide;
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 */
}

with


#sidebar-wrapper1 {
width: 130px;
float: left;
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 */
}

#sidebar-wrapper2 {
width: 130px;
float: right;
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 */


I have divided the sidebar into 2 parts sidebar1 & sidebar 2 and floated sidebar1 to left,sidebar2 to right

•Without expanding widget template find the below HTML code and replace it

<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=’sidebar-wrapper’>
<b:section class=’sidebar’ id=’sidebar’ preferred=’yes’>
</b:section>
</div>

with

<div id=’sidebar-wrapper1′>
<b:section class=’sidebar’ id=’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>

<div id=’sidebar-wrapper2′>
<b:section class=’sidebar1′ id=’sidebar1′ preferred=’yes’>
</b:section>
</div>

I have changed Main + sidebar to sidebar1 + Main + sidebar2

•Now you can check the result by clickin on Page Elements

Demo @ http://im-demo-bloggernutshell.blogspot.com/

Download Minima 3 column template

Share on Facebook



Comments

  1. Thank you so much for this tutorial. You have no idea how much you have helped me out. Now I can use my own instead of the ones in the template designer. Your site rocks. Ty for all you do!

  2. atika amizi says:

    hello.. 🙂
    i have done all the process above but i cant save it. it stated like this :

    Your template could not be parsed as it is not well-formed. Please make sure that all XML elements are closed properly.
    XML error message: Open quote is expected for attribute “{1}” associated with an element type “id”.

    wht must i do ?
    pls help me :DD

Speak Your Mind

*