Three Column Minima (Classic Template Version)

My first experience in attempting to add a third column to Minima was incredibly frustrating. Not only could I not find instructions on three column Minima that were all in one place and easy to understand, but none of the examples I found were for Minima in the Classic Template version.

These instructions are for adding a third column to Minima in "Classic" Template version. To check which version you're using, go into your dashboard and look just to the left of the "View Blog" link on the top left of the page. If it says "Template" in the next tab to the left, then you are using the "Classic" Template version and this is the post for you. If it says "Layout" there instead, then click on over to Three Column Minima (Layout). You would definitely be using Classic Template if you are publishing via FTP to your own dot come domain on a third party host (Blogger doesn't support Layout on non-blogspot domains).

Making a three column blog is easy in either version of Minima, but it's a little different for each. If you're like me and completely frustrated by the lack of directions for the Template version of Minima, you've come to the right place. This post and about 10 minutes are all that separate you and your blog from three column nirvana!

These instructions are simple and easy, and you can do it even if you don't know the first thing about HTML (because I didn't when I started this, and I know what it's like).

First, open up Blogger, go into your Dashboard and click on the "Tempate" tab. Then go into the "Edit HTML" tab. You will see a bunch of gobbledygook and gobbledygook it shall remain - you don't need to know anything about it. Just scroll down (or, allow me to introduce your browser's control F (CTRL+F) command, you can just type in /* Header and click next) until you see this:

/* Header
-----------------------------------------------

Now, change the width of the header width from 660 to 940:

@media all {
#header {
width:660px; <-------change to 940
margin:0 auto 10px;
>border:1px solid $bordercolor;
}

That piece of code should now look EXACTLY like this:

@media all {
#header {
width:940px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

Also, at the bottom of the same Header section, change the max-width from 660 to 940:

#description {
margin:0 5px 5px;
padding:0 20px 20px;
border:1px solid #eee;
border-width:0 1px 1px;
max-width:660px;<-------change to 940
font:85%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.2em;
color:#FFFFFF;
}

That piece of code should now look like this:

#description {
margin:0 5px 5px;
padding:0 20px 20px;
border:1px solid #eee;
border-width:0 1px 1px;
max-width:940px;
font:85%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.2em;
color:#FFFFFF;
}

So far so good. Next, scroll down to the content section (or use CTRL+F), the beginning of the content section looks like this:

/* Content
----------------------------------------------- */

Now, just like you did in the Header above, change the "content" width from 660 to 940, and (2) change the "main" width from 410 to 500:

@media all {
#content{
width: 660px; <-------change to 940
margin:0 auto;
padding:0px;
text-align:left;
}

#main {
width: 410px; <-------change to 500
float:left;
}

Next, take this new block of code (in red, below) and paste it in exactly as it appears directly in between the #content code block and the #main code block. It's helpful to use "CTRL C" to copy, and then "CTRL V" to paste, if you didn't already know that trick. Regardless of how you do it, you must paste it in between these two code blocks, nowhere else.

#left-sidebar {
width: 220px;
float: left;
}

The new code block should look like this:

@media all {
#content{
width: 940px;
margin:0 auto;
padding:0px;
text-align:left;
}
#left-sidebar {
width: 220px;
float: left;
}
#main {
width: 500px;
margin:0 auto;
padding:0; text-align:left;
}
#sidebar {
width:220px;
float:right;
}
}
@media handheld {
#content {
width:90%;
}
#main {
width:100%;
float:none;
}
#sidebar {
width:100%;
float:none;
}
}

Then scroll way down the page to the footer section (or use CTRL F), the beginning of the footer section looks like this:

/* Footer
----------------------------------------------- */

Now, change the width of the footer from 660 to 940:

#footer {
width:660px; <-------change to 940
clear:both;
margin:0 auto;
}

At this point, believe it or not, there is only one more step. This particular step is hard only because you need to make sure you type in the additional code in the right spot, and this next spot can be a hard place to identify (CTRL+F helps here a lot).

Anyway, in the same footer section that you're now in, scroll down until you see the beginning of the "content" section, it looks like this:

<!-- Begin #content -->
<div id='content'>

Then, locate the the "main" section id a few lines below it. It looks like this:

<!-- Begin #main -->
<div id='main'><div id='main 2'>


Now, just above the "main" and "main2" id, paste in the following code EXACTLY as it appears (note, this code will insert text into your new sidebar as a placeholder, you can customize that later when you finish):

<div id="left-sidebar">
<h2 class="sidebar-title">New Text Titles</h2>
</div>

After you do that, the newly modified section should now look like this:

<!-- Begin #content -->
<div id='content'>

<div id="left-sidebar">
<h2 class="sidebar-title">New Text Titles</h2>
</div>

<!-- Begin #main -->
<div id="main"><div id="main2">

If it does, you are a now master minima coder, because you're done! Hit preview to see your new three column layout, and then save the template. Then you can go into the "Html Edit" tab and replace the "New Text Titles" placeholder with new text, a widget, or advertising. Just be sure to keep it all within the opening left-sidebar "div id" tag and the closing "</div>" tag.

At this point, you may also want to look at adjusting your column margins in Classic Template. That post will help you get more space in between the columns and achieve an even more custom look.

Best of luck with your blogging. If you found this helpful, links back to this post on three column minima are always welcome. Thanks!