Computer Consultant

    

   - Browse Archives -      May 2008 June 2008 November 2009 December 2009 January 2010

Here, we cover the steps taken to change a Blogger Rounders 4 template into a three column template. Unlike the other Rounders templates, Rounders 4 has an additional picture in the Header which should be enlarged to accommodate the new blog width. When you are at Template -> Edit HTML, look for “Blogger Template Style”. If the Name of your template is “Rounders 4”, follow this guide to customize your template and add a third column or new sidebar to your Rounders 4 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 3 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.

Other than the Header picture, 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 these new rounded corner images for this article. The new three column Rounders 4 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 4 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/rounders4/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/rounders4/corners_main_top.gif") no-repeat left top; padding:10px 0 0; } #main { background:url("http://www.blogblog.com/rounders4/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/rounders4/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/rounders4/corners_main_top.gif") no-repeat left top; padding:10px 0 0; } #main { background:url("http://www.blogblog.com/rounders4/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:$bottomSidebarBgColor url("http://www.blogblog.com/rounders4/corners_side_top.gif") no-repeat left top; margin:0 0 15px; padding:10px 0 0; color: $mainTextColor; } #newsidebar-wrap2 { background:url("http://www.blogblog.com/rounders4/corners_side_bot.gif") no-repeat left bottom; padding:10px 0px 8px; } #newsidebar { background:url("http://www.blogblog.com/rounders4/rails_side.gif") repeat-y; } #newsidebar { color: $bottomSidebarTextColor; } #newsidebar h2 { color: $bottomSidebarTextColor; border-bottom: 1px dotted $bottomSidebarTextColor; margin-bottom: 0.5em; } #newsidebar a { color: $bottomSidebarLinkColor; } #newsidebar a:hover, #newsidebar a:visited { color: $bottomSidebarVisitedLinkColor; }

Let us now customize the Header and the Footer. As mentioned, we had created new images for the Header picture as well as 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: #476 url("http://www.blogblog.com/rounders4/corners_cap_top.gif") no-repeat left top;

To this:-

#header-wrapper { background: #476 url("http://www.blogpulp.com/imagehost/images/183638263.gif") no-repeat left top;

Also change this:-

#header-inner { background:url("http://www.blogblog.com/rounders4/bg_hdr_bot.jpg") no-repeat left bottom;

To this:-

#header-inner { background:url("http://www.blogpulp.com/imagehost/images/51814045.jpg") no-repeat left bottom;

Now look for the footer style definitions in your template:-

/* Footer

Change this code:-

#footer-wrap2 { background: #476 url("http://www.blogblog.com/rounders4/corners_cap_top.gif") no-repeat left top;

To this:-

#footer-wrap2 { background: #476 url("http://www.blogpulp.com/imagehost/images/183638263.gif") no-repeat left top;

And amend this:-

#footer { background:url("http://www.blogblog.com/rounders4/corners_cap_bot.gif") no-repeat left bottom;

To this:-

#footer { background:url("http://www.blogpulp.com/imagehost/images/563473306.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 4 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, go to /* Blog Header and insert under it 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 4 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.