3 Column Rounders 4

This post on 3 column blogs is for the Rounders 4 template. Someday, Blogger will make it easy and produce 3 column blogs, but until then we'll just have to modify the templates. If you haven't already, take a look at "Adding a Third Column to Blogger" to see why it's better to modify than to download a hack.

If you do choose to modify your blogger template, this tutorial will show you how to easily turn your Rounders 4 template into a 3 column blog with just a little bit of time and attention.

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 (11/28/09): I thought I had fixed the problems with loading custom header and footer images, but the fix is not working for everyone. Some problems may relate to non-Blogger or XML templates. For now though, if you have custom images in your header, this mod may not give you the look you want. Everything esle works perfectly though, so if anybody out there has a solution for header image issue, do share! Cheers.

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

So let's turn your Rounders 4 template into a 3 column blog! 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 can type CTRL F, then type /* Page Structure into the dialog box and click 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/rounders2/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/rounders2/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/rounders4/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/rounders4/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_cap4_top.gif

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


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

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:$titleBgColor url("
http://i454.photobucket.com/albums/qq270/threecolumnblogger/
corners_cap4_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_cap4_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. You will also need to remove $titleBgcolor from "#footer wrap2". So scroll down to the /* Footer section and replace the existing links with the new ones. 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_cap4_top.gif")

no-repeat $startSide top;
color:$titleTextColor;
}
#footer {
background:url("
http://i454.photobucket.com/albums/qq270/threecolumnblogger/
corners_cap4_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. 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 4 coder, because you're done! Hit preview to see your new three column Rounders 4 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.

When you do go into the Layout tab, if you 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 3 column Rounders 4 template was helpful and that the new images were a big timesaver! **Keep in mind that these images are hosted on my free Photobucket account. It would be better for you if you download the images and host them on your own account, that way you have control over the images.** If you found this helpful, links back to this post on 3 column Rounders are always welcome. Thanks!

Three Column Minima Lefty Stretch

This blog is all about adding columns to free blogger templates, and this post is all about adding a third column to Minima Lefty Stretch. If you want a tutorial for a 3 column Minima Lefty Stretch blogger layout, look no further.

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). Update again: thanks for all the great comments. While it's hard to respond to each one individually, I do carefully read them all and have modified the post in order to make it (I hope) a better resource for all. Cheers!

Adding a third column to Minima Lefty Stretch is easy, and these instructions make it even easier. The Minima varietals of Blogger are some of the simplest templates out there, and they are also easy on the eyes. Consequently, there are many, many bloggers who like and use Minima.

This post is for adding a third column to Minima Lefty Stretch in "Layout 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 the tab there says "Layout", you are using the Layout version of Minima and this post is for you.

So without further adieu, let's get started. 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 gobbledygook and gobbledygook it shall remain - you don't need to know anything about it. Just scroll down until you see the "Outer-Wrapper" section, it is marked by the following: /* Outer Wrapper. Easy enough, but an even easier way to find it is use your brower's control F (CTRL+F) command. You can just type CTRL F and then type /* Outer-Wrapper into the dialog box and click "next".

/* Outer-Wrapper
-----------------------------------------------

Now, change the width of the "main-wrapper" from 67% to 52%, and the float from $endSide to $startSide. Note that the html code "$startSide" is case sensitive, to avoid the problem you can just use "left" for "$startSide" (and you can use "right" for $endSide):

#main-wrapper {
margin-$endSide: 2%; <-------change to $startSide
width: 67%; <-------change to 52%
float: $endSide; <-------change to $startSide
display: inline; /* fix for doubling margin in IE */
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:

#main-wrapper {
margin-$startSide: 2%;
width: 52%;
float: $startSide;
display: inline; /* fix for doubling margin in IE */
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, take this new block of code (below, in red) and paste it exactly as it appears directly in the space just before the */ Headings section. 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 cut and paste, you must paste the code directly in that space before the */Headings section and do not accidentally delete any code from the "#sidebar-wrapper" code above, including the "}" character at the very end. To paraphrase Monty Python, every character is sacred!

#right-sidebar-wrapper {
margin-$endSide: 2%;
width: 20%;
float: $endSide;
display: inline; /* fix for doubling margin in IE */
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 */
}

The new code block should look exactly like this:

#main-wrapper {
margin-$startSide: 2%;
width: 52%;
float: $startSide;
display: inline; /* fix for doubling margin in IE */
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 {
margin-$startSide: 2%;
width: 20%;
float: $startSide;
display: inline; /* fix for doubling margin in IE */
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 */
}
#right-sidebar-wrapper {
margin-$endSide: 2%;
width: 20%;
float: $endSide;
display: inline; /* fix for doubling margin in IE */
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 */
}

At this point, believe it or not, there is only one more step. Update: You MUST insert/paste the below new section in the right place: AFTER the main wrapper div. Your code should go sidebar wrapper first, then main wrapper, then right sidebar wrapper. If you are still having trouble, also check to make sure your floats are set correctly. The left sidebar should be set to left or $startSide, the main side bar wrapper should also be set to left or $startSide, and the right sidebar wrapper should be set to right or $endSide. 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), but you must put in the right spot.

Anyway, scroll down to the very end of the entire page. Several lines above the very end you will see the following:

<!-- spacer for skins that want sidebar and main to be the same height-->

Now, immediately above the line that says <!-- spacer for skins that want sidebar and main to be the same height--> and below the end of the "main-wrapper" div section (be careful not to delete any of the code in that section), paste in the following code EXACTLY as it appears below:

<div id='right-sidebar-wrapper'>
<b:section class='sidebar' id='right-sidebar' preferred='yes'>
<b:widget id='Subscribe1' locked='false' title='Subscribe' type='Subscribe'/>
</b:section>
</div>

Note: this will also insert the RSS feed widget into your new sidebar, but you can customize that however you'd like after you finish adding the new column. Update: If you get an error message that says the widget ID should be unique, you have an RSS feed widget already loaded in your original sidebar and you'll need to delete that one temporarily. But don't worry, you can customize your columns however you like once you get them set up. If not, there's no need to worry about it. So, after you do that, the newly modified section should now look like this:

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>

<div id='right-sidebar-wrapper'>
<b:section class='sidebar' id='right-sidebar' preferred='yes'>
<b:widget id='Subscribe1' locked='false' title='Subscribe' type='Subscribe'/>
</b:section>
</div>

<--spacer for skins that want sidebar and main to be the same height-->

And you are a now master Minima Lefty Stretch coder, because you're done! Hit preview to see your new 3 column Minima Lefty Stretch layout, and then save the template. Best of luck with your blogging. I hope your new 3 column Minima Lefty Stretch template helps make your blogging even more fun and enjoyable!

Best of luck with your blogging. Links to this post are always welcome. If you would like to create a quick link in one of your posts or on your blogroll but are unsure how to do it, just insert this html string in your post text:

</a href="http://www.threecolumnblogger.com/">Three Column Blogger</a>

It will appear in your post text/blogroll as Three Column Blogger

Thanks!!