How to get a 3 column template (for the minima template)
So you want to have a 3 column template using blogger's '06 minima template? Well you've found found just the place.
Remember, now that blogger has it's new template designer, you can get a 3 column template MUCH easier by using the 'Picture Window' template and and using the designer to make the template 3 column the click of a button! Our backgrounds will work just fine with the 'picture window template'.
If you still want to play around with the html of the minima template, read below, :)
NOTE: Before you edit or change template, make sure you backup your current template PLUS Page Elements.
We have tested this out ourselves and found that it has worked! And the fun part about it is that you've now got 3 columns to organize all of your fun blog info into. Also, with this new way, you'll not lose any of your links or widgets or other blog gadgets that are built into your blog.
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!
