After you understand each part of the template with a different color, now we started making three column template
To create three columns, we need to change width of template
we should do:
1. Changing the template width
2. Adding new columns
Fisrt Step, See this code:
#header-wrapper { width:660px; margin:0 auto 10px; border:1px solid $bordercolor; }
#outer-wrapper { width: 660px; margin:0 auto; padding:10px; text-align:$startSide; font: $bodyfont; }
#main-wrapper { width: 410px; float: $startSide; 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 */ }
Replace with this code:
#header-wrapper { width:870px; margin:0 auto 10px; border:1px solid $bordercolor; }
#outer-wrapper { width: 870px; margin:0 auto; padding:10px; text-align:$startSide; font: $bodyfont; }
#main-wrapper { width: 420px; float: $startSide; 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*/ }
|
Adding new columns Next step, select "Expand Widget Templates" and find this code:
#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 */ }
Then replace with code below:
#sidebar-wrapper { width: 220px; float: left; padding-right:5px; 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*/ }
#sidebarLeft-wrapper { width: 180px; float: right; padding-left:5px; word-wrap: break-word; overflow: hidden; )
Then find this code:
<div id='sidebar-wrapper'>
Put the code below, above <div id='sidebar-wrapper>
<div id='sidebarLeft-wrapper'> <b:section class='sidebar' id='sidebarLeft' preferred='yes'> </ b: section'> </ div'>
The last step, find the code below: #footer { width:660px; clear:both; margin:0 auto; padding-top:15px; line-height: 1.6em; text-transform:uppercase; letter-spacing:.1em; text-align: center; }
Replace with this:
#footer { width:840px; clear:both; margin:0 auto; padding-top:15px; line-height: 1.6em; text-transform:uppercase; letter-spacing:.1em; text-align: center; }
|
|
Read more ...