3 Column Rounders

My first search for three column blogs was inspired by the Rounders template. I loved the Rounders layout, and I wanted a three column version. However, I looked all over the web and was unable to come up with any instructions for making a three column Rounders template. So, I switched over to Minima and learned all about pixels and margins. You, however, do not have to switch, because these instructions for adding a column to your Rounders template will have you up and running with a three column Rounders blog in no time at all.

These instructions are simple and easy, and you can do it if you don't know the first thing about HTML (which is perfect because I don't know anything about it either). Update (6/5/09): The problems with loading custom header and footer images problem have been fixed! You can now upload almost any custom image, and the header box will expand to fit your image. Thanks for bringing this to my attention! This post is now a better resource for all.

These instructions are for those using Blogger's new "Layout" version. I will add instructions for the Rounders "Classic" template shortly, as well as instructions for Rounders 2 and Rounders 4. Each version of Rounders is slightly different, so if you are not using "Rounders", you should look in the right sidebar for the specific version of Rounders that you are using, and click on on that link.

So let's get started adding a column to your Rounders template. First, open up Blogger and go into your Dashboard, then click on the "Layout" tab. Then go into the "Edit HTML" tab. You will see a bunch of html code - but don't worry you don't need to know anything about it. Just scroll down until you see this:

/* Page Structure
-----------------------------------------------
(Or, allow me to introduce your browser's control F (CTRL+F) command, you just type CTRL F and then type in /* Page Structure in the dialog box and click next)


Now, change the width of the "outer-wrapper" from 740 to 990:

#outer-wrapper {
width:740px;<-------change to 990
margin:0 auto;
text-align:$startSide;
font: $bodyFont;
}

Next, you'll need to add 12 pixel margins to your main column, so you will make a minor change in the margin line of the "main-wrap":

#main-wrap1 {
width:485px;
float:left;
background:$mainBgColor url("http://www1.blogblog.com/rounders/corners_main_bot.gif") no-repeat $startSide bottom;
margin:15px 0 0 ;<-------change this to "12px 0 0 12px"
padding:0 0 10px;
color:$mainTextColor;
font-size:97%;
line-height:1.5em;
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 */
}

That piece of code should now look EXACTLY like this:

#outer-wrapper {
width:990px;
margin:0 auto;
text-align:$startSide;
font: $bodyFont;
}
#main-wrap1 {
width:485px;
float:left;
background:$mainBgColor url("http://www1.blogblog.com/rounders/corners_main_bot.gif") no-repeat $startSide bottom;
margin:12px 0 0 12px;
padding:0 0 10px;
color:$mainTextColor;
font-size:97%;
line-height:1.5em;
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 */
}

So far so good. Now, just after the "sidebarwrap" code block in the same section, paste in the following code (you can use "CTRL C" to copy it, and then "CTRL V" to paste it):

#left-sidebar-wrap {
width:240px;
float:left;
margin:15px 0 0;
font-size:97%;
line-height:1.5em;
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 */
}

#newsidebar h2 {
color: $postTitleColor;
border-bottom: 1px dotted $postTitleColor;
}
#newsidebarbottom h2 {
color: $postTitleColor;
border-bottom: 1px dotted $postTitleColor;
}

Now, we need to adjust the header and footer images. The reason why there are so few tutorials on three column rounders modifications is that it requires a little bit of knowledge to expand the rounders header image. This image uploads from Blogger's "blogblog" website, which means you need to not only increase the width of the image, but you also need to find someplace to host the new, expanded image. But don't worry, Three Column Blogger has done all this for you!

The first thing you need to do is locate the /* Blog Header section, it's one section below where you just pasted the new sidebar code. You will see two urls in the code, one url links to a file that helps create the top rounded part of the header image (corners_cap_top.gif), and the other url links to a file that helps create the bottom rounded portion of the header image (corners_cap_bot.gif). The code looks like this:

#header-wrapper {
background:$titleBgColor url("http://www2.blogblog.com/rounders/corners_cap_top.gif") no-repeat $startSide top;
margin-top:22px;
margin-$endSide:0;
margin-bottom:0;
margin-$startSide:0;
padding-top:8px;
padding-$endSide:0;
padding-bottom:0;
padding-$startSide:0;
color:$titleTextColor;
}
#header {
background:url("http://www.blogblog.com/rounders/corners_cap_bot.gif") no-repeat $startSide bottom;
padding:0 15px 8px;
}

Once you've located that code, you need to remove $titleBgcolor from the code. I have highlighted in red above so you can spot it more easily.

Next, the top header url needs to be replaced with this link:

http://i454.photobucket.com/albums/qq270/threecolumnblogger/
corners_cap_top.gif

And the bottom header url needs to be replaced with this link:

http://i454.photobucket.com/albums/qq270/threecolumnblogger/
corners_cap_bot.gif

Note, there should be NO break in the above code, it should be all one line with no spaces - I broke it up only for purposes of this tutorial (thanks Crispy!). So highlight and use CTRL C to copy the above links (one at a time), and then use CTRL V to paste each new link into the code block. When you do that, the new header code should look like this:

#header-wrapper {
background: url ("http://i454.photobucket.com/albums/qq270/threecolumnblogger/
corners_cap_top.gif") no-repeat $startSide top;
margin-top:22px;
margin-$endSide:0;
margin-bottom:0;
margin-$startSide:0;
padding-top:8px;
padding-$endSide:0;
padding-bottom:0;
padding-$startSide:0;
color:$titleTextColor;
}
#header {
background:url("http://i454.photobucket.com/albums/qq270/threecolumnblogger/
corners_cap_bot.gif") no-repeat $startSide bottom;
padding:0 15px 8px;
}

There is also a footer image that needs to be changed, but it's easy because the steps are the exact same as that for the header image, and it involves using the same new links. So scroll down to the /* Footer section and replace the existing links with the new ones. You will also need to remove $titleBgcolor from "#footer wrap 2", right after "background". When you finish, the code should look like this:

#footer-wrap1 {
clear:both;
margin:0 0 10px;
padding:15px 0 0;
}
#footer-wrap2 {
background: url("http://i454.photobucket.com/albums/qq270/threecolumnblogger/
corners_cap_top.gif") no-repeat $startSide top;
color:$titleTextColor;
}
#footer {
background:url("http://i454.photobucket.com/albums/qq270/threecolumnblogger/
corners_cap_bot.gif") no-repeat $startSide bottom;
padding:8px 15px;
}
#footer hr {display:none;}
#footer p {margin:0;}
#footer a {color:$titleTextColor;}
#footer .widget-content {
margin:0;
}

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 paste 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 where you are now working, scroll down a little further until you see:

<div id='header-wrapper'>

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

<div id='main-wrap1'><div id='main-wrap2'>

Now, just above the "main wrapper" id, copy (ctrl c) and paste (ctrl v) the following code EXACTLY as it appears below:

<div id='left-sidebar-wrap'>

<div id='sidebartop-wrap'><div id='sidebartop-wrap2'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
<b:widget id='BloggerButton1' locked='false' title='' type='BloggerButton'/>
</b:section>
</div></div>
<div id='sidebarbottom-wrap1'><div id='sidebarbottom-wrap2'>
<b:section class='sidebar' id='newsidebarbottom' preferred='yes'>
</b:section>
</div></div>

</div>

Note: this will also insert a Blogger logo into your new left sidebar, but you can customize this however you'd like when you finish by using the Layout tab. *Note, if at the end of the tutorial when you save the template, you get a message that says "widget ID should be unique", you already have a Blogger logo loaded, and you will have to delete the original one. But don't worry, you can customize all of it when you're finished. when you If you get a message that For now, there's no need to worry about it, it's just a placeholder. So, after you do that, the newly modified section should now look like this:

<div id='header-wrapper'>
<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>

<div id='left-sidebar-wrap'>
<div id='sidebartop-wrap'><div id='sidebartop-wrap2'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
<b:widget id='BloggerButton1' locked='false' title='' type='BloggerButton'/>
</b:section>
</div></div>
<div id='sidebarbottom-wrap1'><div id='sidebarbottom-wrap2'>
<b:section class='sidebar' id='newsidebarbottom' preferred='yes'/>
</b:section>
</div></div>

</div>


<div id='main-wrap1'><div id='main-wrap2'>

And you are a now master three column Rounders coder, because you're done! Hit preview to see your new three column Blogger layout, and then save the template if everything looks ok. Go into the "Layout" tab and add a google gadget, or a widget, of your choice.

If you do go into the Layout tab and notice that the right hand column has dropped to the bottom of the "Layout" page, it means you need to make a slight adjustment to the layout "wireframe editor", which is easy to do if you made it this far.

Go back into the html tab, and scroll or CTRL F down to the section that says:

/** Page structure tweaks for layout editor wireframe */

Then, replace the code directly under the "/** Page structure tweaks for layout editor wireframe */" line with the following code block:

body#layout #header-wrapper,
body#layout #outer-wrapper,
body#layout #footer-wrap1 {
width:840px;
}
body#layout #main-wrap1 {
width: 485px;margin-right:10px;
}
body#layout #sidebar-wrap,
body#layout #left-sidebar-wrap {
width:150px;
}


The resulting code should look like this:

/** Page structure tweaks for layout editor wireframe */
body#layout #header-wrapper,
body#layout #outer-wrapper,
body#layout #footer-wrap1 {
width:840px;
}
body#layout #main-wrap1 {
width: 485px;margin-right:10px;
}
body#layout #sidebar-wrap,
body#layout #left-sidebar-wrap {
width:150px;
}
]]></b:skin>
</head>

Best of luck with your blogging. I hope this post on creating a new three column Rounders template was helpful and that the new images were a big timesaver! If you found this helpful, links back to this post on three column rounders are always welcome. Please also note that these custom header images are hosted on photobucket - it would be safer for you to download them and host them on your own account - that way you have control over the images. Thanks!