It is easiest to start off with changing your template to minima. However, keep in mind changing your template to minima will erase any tweaks you have made to your blog's html code.
Go to Template, Edit HTML.
Now, find this section in the HTML code:
#sidebar-wrapper { width: 220px; 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 */ }
Copy this entire section and paste it directly below itself. We are now going change the elements I have highlighted in red to the following:
#left-sidebar-wrapper (this makes the css for this section unique) float: left
Scroll up a little bit until you see this code:
#main-wrapper {
width: 410px;
margin-left: 25px;
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 */
}
Add the words you see in red.
Now, we are going to adjust some of the numbers. Change the numbers on your blog to reflect the highlighted numbers below.
#outer-wrapper {
width: 880px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
#main-wrapper {
width: 425px;
margin-left: 25px;
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 */
}
#sidebar-wrapper {
width: 200px;
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 */
}
#left-sidebar-wrapper { width: 200px; 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 */ }
Next, hit ‘ctrl F’ and paste this <div id='main-wrapper'> in the find box. Now paste the following code directly above that.
<div id='left-sidebar-wrapper'> <b:section class='sidebar' id='left-sidebar' preferred='yes'/> </div>
You may want to adjust the header size so it is as wide as your background. Scroll up till you see the following code. Change it to reflect the highlighted text. *By making the border 0px you will not have the border lines around your header!*
#header-wrapper {
width:860px;
margin:0 auto 10px;
border:0px solid $bordercolor;
}
#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}
#header {
margin: 5px;
border: 0px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
Click save template. Now click on your ‘Layout’ tab. You will need to drag some of your elements on the right sidebar to the left side bar. Click save and preview template. You should now have a 3 column layout!
*When changing out your background you do NOT need to reset your template. This will erase all the coding you just did. Just erase the old background code and replace it with the new one!
0 Response to "How to get a 3 column template"
Post a Comment