This is our tutorial specifically for those who are using the Blogger Rounders 3 Template and would like to add a third column or new sidebar into their template. To confirm what your template is, go to Template -> Edit HTML and look for “Blogger Template Style”. If the Name is “Rounders 3”, follow this guide to customize your template to a three column Rounders 3 template.
For other templates, please refer to our articles and guides on:-
1. Three Columns Denim Template;
2. Three Columns Dots Template;
3. Three Columns Minima Template;
4. Three Columns Rounders Template;
5. Three Columns Rounders 2 Template;
6. Three Columns Rounders 4 Template;
7. Three Columns Sand Dollar Template;
8. Three Columns Scribe Template;
9. Three Columns Thisaway Template (I);
10. Three Columns Thisaway Template (II).
Note: Some sites offer free three-column templates for download. If you are starting a new blog, you may look up these sites and use their templates. However, if you have an existing blog and merely want to expand the template to include another column, our guides would be helpful. What we do is to take the standard Blogger templates and show you how to add a new sidebar. This approach gives you total control over the changes, and if you have bookmarked this page, you can revisit it in future should you want to reverse the changes. It is also a safer method, since there could be a few out there who may introduce malicious scripts or blog virus into their customized templates without you knowing. |
|---|
If you right click on the Header to view the background image, you will see the corners_cap_top.gif or corners_cap_bot.gif which account for the rounded corners. These corners have a fixed width of 740px and are linked to your Blog via the blogblog.com server. Since we have to expand the width of the Blog to include a new sidebar, these images will be changed and linked through an image server. We have created for you these new rounded corner images. The new three column Rounders 3 Template will look like this:-
Before you begin to do anything, remember to backup your template. Go to Template -> Edit HTML. Click the “Download Full Template” link to save a copy of your template.
Rounders 3 Template
When you are logged in, go to Template -> Edit HTML and scroll to these lines:-
#outer-wrapper { width:740px; margin:0 auto; text-align:left; font: $bodyFont; } #main-wrap1 { width:485px; float:left; background:$mainBgColor url("http://www.blogblog.com/rounders3/corners_main_bot.gif") no-repeat left bottom; margin:15px 0 0; 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 */ } #main-wrap2 { float:left; width:100%; background:url("http://www.blogblog.com/rounders3/corners_main_top.gif") no-repeat left top; padding:10px 0 0; } #main { background:url("http://www.blogblog.com/rounders3/rails_main.gif") repeat-y; padding:0; } #sidebar-wrap { width:240px; float:right; 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 */ } |
|---|
The template defines 3 wrappers, namely:-
#outer-wrapper – referring to the entire blog
#main-wrap – referring to the main Blog Posts
#sidebar-wrap – referring to the right sidebar.
We shall include a left sidebar and name it newsidebar. The above code will therefore be changed to this (note the portions in red).
#outer-wrapper { width:995px; margin:0 auto; text-align:left; font: $bodyFont; } #main-wrap1 { width:485px; float:left; background:$mainBgColor url("http://www.blogblog.com/rounders3/corners_main_bot.gif") no-repeat left bottom; margin:15px 0 0 15px; 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 */ } #main-wrap2 { float:left; width:100%; background:url("http://www.blogblog.com/rounders3/corners_main_top.gif") no-repeat left top; padding:10px 0 0; } #main { background:url("http://www.blogblog.com/rounders3/rails_main.gif") repeat-y; padding:0; } #sidebar-wrap { width:240px; float:right; 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-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-wrap1 { background:$titleBgColor url("http://www.blogblog.com/rounders3/corners_side_top.gif") no-repeat left top; margin:0 0 15px; padding:10px 0 0; color: $titleTextColor; } #newsidebar-wrap2 { background:url("http://www.blogblog.com/rounders3/corners_side_bot.gif") no-repeat left bottom; padding:10px 0px 8px; } #newsidebar h2 { color: $bottomSidebarHeaderColor; border-bottom: 1px dotted $bottomSidebarHeaderColor; } #newsidebar a { color: $bottomSidebarLinkColor; } #newsidebar a:hover, #newsidebar a:visited { color: $bottomSidebarVisitedLinkColor; } |
|---|
Let us now deal with the Header and the Footer. As mentioned, we had created new images for the rounded corners of the Header and Footer based on this new width of 995px.
Look for this in the template:-
/* Blog Header
Amend the image locations from this:-
#header-wrapper { background:$titleBgColor url("http://www.blogblog.com/rounders3/corners_cap_top.gif") no-repeat left top; |
|---|
To this:-
#header-wrapper { background:$titleBgColor url("http://www.blogpulp.com/imagehost/images/65147785.gif") no-repeat left top; |
|---|
Also change this:-
#header { background:url("http://www.blogblog.com/rounders3/corners_cap_bot.gif") no-repeat left bottom; |
|---|
To this:-
#header { background:url("http://www.blogpulp.com/imagehost/images/1135478546.gif") no-repeat left bottom; |
|---|
Now look for the footer style definitions in your template:-
/* Footer
Change this code:-
#footer-wrap2 { background:$titleBgColor url("http://www.blogblog.com/rounders3/corners_cap_top.gif") no-repeat left top; |
|---|
To this:-
#footer-wrap2 { background:$titleBgColor url("http://www.blogpulp.com/imagehost/images/65147785.gif") no-repeat left top; |
|---|
And amend this:-
#footer { background:url("http://www.blogblog.com/rounders3/corners_cap_bot.gif") no-repeat left bottom; |
|---|
To this:-
#footer { background:url("http://www.blogpulp.com/imagehost/images/1135478546.gif") no-repeat left bottom; |
|---|
We shall also change the layout editor to cater to the new sidebar. Scroll to where you see this:-
/** Page structure tweaks for layout editor wireframe */ body#layout #main-wrap1, body#layout #sidebar-wrap, body#layout #header-wrapper { margin-top: 0; } body#layout #header, body#layout #header-wrapper, body#layout #outer-wrapper { margin-left:0, margin-right: 0; padding: 0; } body#layout #outer-wrapper { width: 730px; } body#layout #footer-wrap1 { padding-top: 0; } |
|---|
Update:
Replace all of the above with this:-
/** Page structure tweaks for layout editor wireframe */ body#layout #outer-wrapper, body#layout #header-wrapper, body#layout #footer-wrap1 { width: 750px; } body#layout #main-wrap1, body#layout .main .widget, body#layout .main .Blog { width: 400px; } body#layout #newsidebar-wrap { width: 150px; margin-top: 5px; } body#layout #sidebar-wrap { width: 150px; margin-left: 25px; } |
|---|
Next, scroll to somewhere near the bottom of the template where you see this:-
<div id='main-wrap1'><div id='main-wrap2'> <b:section class='main' id='main' showaddelement='no'> <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/> </b:section> </div></div> <div id='sidebar-wrap'> |
|---|
Add the portion in red above the div id='main-wrap1'. The segment should look something like this:-
<div id='newsidebar-wrap'> <div id='newsidebar-wrap1'><div id='newsidebar-wrap2'> <b:section class='sidebar' id='newsidebar' preferred='yes'> <b:widget id='NewProfile' locked='false' title='About Me' type='Profile'/> </b:section> </div></div></div> <div id='main-wrap1'><div id='main-wrap2'> <b:section class='main' id='main' showaddelement='no'> <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/> </b:section> </div></div> <div id='sidebar-wrap'> |
|---|
You can now click “Preview” to see the new layout, and if you like what you see, click “Save Template”. If you don't want the profile on the left, you can remove that page element after that. Refresh your page to see your new Three Columns Rounders 3 Blog.
Align Header Title and Description
Update: We have a more detailed guide on alignment of the Header Title, Description and background image. In the article, you would learn how to move these to the center, or towards the left or right of the Header. Check out the guidelines at Header Image and Title Alignment (I).
In the Rounders template, you would notice that the Header title and description are aligned to the left. If you want that to be in the center of the page, insert the text-alignment code (shown in red).
#header { text-align: center; |
|---|
Align Post Footer elements to Left
We noticed that the Post Footer elements e.g., Posted by, timestamp, comments, backlink icons, are aligned to the right in the Rounders template. If you want to align these elements to the left, change the text-alignment code (shown in red).
.uncustomized-post-template .post-footer { text-align: left; } |
|---|
Note:
The Rounders 3 template we are working on is the present version available on Blogger. If you are using the old Blogger templates, or any other template, the style names may be different. For example, #header-wrapper may be called #head-wrap. If you are unsure, you may source the net for a guide specifically for your type of template. Otherwise, you may want to understand the way we change this template and adapt it to yours. As long as you backup your current template, and Preview the changes made, it should be alright for you to try some changes.
© Tips for New Bloggers
22 comments:
Cheers,
I've been looking for an easy and safe way to do this.
regards
TFA
Hi there,
I just followed your instructions and did everything I was told and it all looks great, but I have just one problem.
I no longer have a border around my title. Do you know how I can fix this? Did I do something wrong?
Hi Sonya
The full code should look like this:-
#header-wrapper {
background:$titleBgColor
url("http://...")
We did not mention background:$titleBgColor because there is no change to this, and we merely highlighted the change to the image URL (in red).
If you insert this back into your template, you should be able to see the corners and background color.
Thanks so much. It's fixed and looks great!
Hi, thanks for the tip on this! However when I changed my Rounders 3 Template to the 3 Column Rounders 3 layout in accordance to your post, somehow the margins on the left Side element do not measure up, there is no gap from the main body! What did I do wrong? Thanks!
Hi bokjae
You have this
#main-wrap1 {
margin:15px 0 0;15px
which is wrongly typed. Change it to this as per our guide and your margin should appear:-
#main-wrap1 {
margin:15px 0 0 15px;
Hi bizwhiz, thanks! corrected that but this only corrects the main wrap! I still noticed that on the left sidebar, there is a gap between main body and sidebar, sort of a black strip all the way down whereas on the left sidebar it fits nicely to the main body! Can you please tell me what must I adjust or change? Thank-you so much!
Hi bokjae
Let me explain. In CSS codes, the semi colons, position of these semi colons, numbers, and position of numbers are very crucial.
You have amended the template to this:-
#main-wrap1 {
margin:15px 0 0 15px
But you have not included the semi-colon which should look like this:-
#main-wrap1 {
margin:15px 0 0 15px;
What you might do is to copy and paste the code we have provided in the guide. The characters are a little hard to follow if you are retyping them. If it still doesn't look like the screenshot we took, you may want to consider copying and pasting the code one more time.
Easiest guide I have found thus far. One problem:
Invalid variable declaration in page skin: Variable is used but not defined. Input: bottomSidebarHeaderColor
Can you tell me what I'm doing wrong? Greatly appreciated....
Hi Makeda
This guide is for conversion of "Rounders 3 Template". If you see the "Blogger Template Style" of your code, you would notice that your template is "Rounders Template" where the styles are slightly different.
To add a new sidebar, you may look at our Three Columns Rounders Template guide instead.
A lot of thanks
This is great stuff. Thanks for the tip and clear explanation - worked straight away :-) By default, on the right hand side of this rounders template, we have two 'Add a page element' sections. I would like to mirror this now on the new left side (ie.another 'Add a page element' underneath the current one). Which html do we need to adjust to add this in ?
Many thanks for your support.
Hi Matthew and Sandra
You will see a sidebartop and sidebarbottom in your template. We did not mirror it in this hack but included instead one column. This seemed to be what some wanted.
You can try duplicating the two and change the alignment (to the left). You will then have newsidebartop and newsidebarbottom.
If there is sufficient interest in this template style, we shall write another article to cover it.
Thank you so much for this! It is a fun way to make the changes but I'm learning at the same time!!
Thank so much for the help! I like the colors of the rounders three template, but really wanted three columns to play with, I found some pre-tweaked templates, but was leery of losing all of my changes. This was the perfect solution. One comment that I must make though; curious as it seems, in spite of inserting the header align-left code, my header is still hanging on to the right side of the screen. Not much of an issue as the overall effect is still excellent- just thought you might want to know.
Thanks again!
Wow, your 3 column instructions worked perfectly, and now my screen real estate is used up.
After tring so many claimed third column method, finally i got the original from you.
thanks bro
Hi,
I am using a (pretty much) modified Rounders-3 template, and thanks to your clear instructions I have made it a 3-cols lay-out.
There is one thing that keeps bothering me, and maybe you can answer this?
The sidebars have a different bg-color than the main widget and the main bg, but they only 'run down' as 'long', or 'deep', as the content on these sidebars stretches. This never matches the 'length' of the main widget column. Is there any way to fix this?
Come take a look and see what I mean, please, if my question is not clear? "NoDirectOn (not: NoDirection)"
Thanks, -Jos
Hi Jos
This is the way the Rounders template is designed, be it 2 columns or 3 columns. If you want the sidebars to have the same height as the main column, you can either specify a fixed height or switch to a different template design.
Hi Bizwhiz, thanks for that answer; I'll probably go for adding a lot of fixed height. Thank you!
-Jos
Bizwhiz, I know you are very busy, and I hate to bother you, but I can't find anyone else who will help me.
I have the Rounders 3 Template and I love it. But, if you look at my left sidebar, you will see my "Popular Posts" and "Categories" Link Lists that have an extremely light color, almost invisible. I can't find how to change the color to the burgundy color shown in my "Recent Discussions" rss feed list.
I've tried going through the customization area of my template, but it's not working. Can you please tell me how I can:
1. Change the color to burgundy in coding.
2. How to increase my text (posts) font size with coding. I want to change the font coding so it's universally increased throughout my blog.
Hi Telling It Like It Is
I see that you have resolved your problem about the color. We had an article Change Font Size and Font Style in our Blogger FAQ blog. You may refer to that to change the font size.
I have something to say ...