Split header became 2 column

Are you ready to do some action with me? All right.. follow these steps. Go to your page element, and you will find template structure like this :

Now we will change the header column become 2 header columns. Click Edit HTML tab, go to your template code and find the code like this :

/* Header
===================================
*/
#header-wrapper {
width:900px;
margin:0 auto 0px;
background:$bgheadercolor url(http://ahom24.googlepages.com/magazine_01.jpg) no-repeat top center;
height:190px;
}

#header-inner {
width:900px;
background-position: center;
margin-$startSide: auto;
margin-$endSide: auto;
}

#header {
margin: 0px;
text-align: left;
color:$pagetitlecolor;
}


Delete above code and replace with this code ;


/* Header
===================================
*/

#header-wrapper {
width:900px;
margin:0 auto 0px;
background:$bgheadercolor url(http://ahom24.googlepages.com/magazine_01.jpg) no-repeat top center;
height:190px;
}

#head-inner {
width:600px;
background-position: left;
margin-left: auto;
margin-right: auto;
float:left;
}

#header {
margin: 0px;
text-align: left;
color:#ffcc66;
}

#r_head{
width:300px;
float:left;
padding-top:10px;
}



Go to lower side and find the code like this :


< id="'header-wrapper'">
< class="'header'" id="'header'" maxwidgets="'1'" showaddelement="'no'">
< id="'Header1'" locked="'true'" title="'Test" type="'Header'/">
< /b:section >
< /div >


Delete above code and replace with this code :


< id="'header-wrapper'">
< id="'head-inner'">
< class="'header'" id="'header'" maxwidgets="'1'" showaddelement="'no'">
< id="'Header1'" locked="'true'" title="'Test" type="'Header'/">
< /b:section >
< /div >
< id="'r_head'">
< :section class='header' id='header2' preferred='yes'/ >
< /div >
< /div >


Click SAVE CHANGES button and done.


Now click Page Elements tab and you will see your header column become 2 columns :





Ok guys, now you can add anything at the new element in the right header.

Related Posts :