We continue with our series of 3 column templates tutorials, this time outlining the steps to take to convert the 4 standard Denim Blogger Templates – Denim, Washed Denim, Stretch Denim and Stretch Denim Light - into three column templates. Where necessary, we shall reduce the extra space in both the left and right margins of the templates and add a new sidebar. Since we are only expanding the template, the same sidebar colors and styles that make the Denim templates attractive shall be maintained.
If you are not sure what your template is, under Template -> Edit HTML, look for the “Blogger Template Style” Name. If it is “Denim” you can follow this guide to customize your template.
For other templates, please refer to our articles and guides on:-
1. Three Columns Dots Template;
2. Three Columns Minima Template;
3. Three Columns Rounders Template;
4. Three Columns Rounders 2 Template;
5. Three Columns Rounders 3 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. |
|---|
The final three-column Denim template should 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.
Denim and Washed Denim Templates
The steps to add a sidebar to Denim and Washed Denim Templates are the same. When you are at Template -> Edit HTML, scroll to these lines:-
#header { width: 760px; margin: 0 auto; background-color: $headerBgColor; border: 1px solid $headerBgColor; color: $headerTextColor; padding: 0; font: $headerFont; } |
|---|
We shall widen the Header to this:-
#header { width: 950px; margin: 0 auto; background-color: $headerBgColor; border: 1px solid $headerBgColor; color: $headerTextColor; padding: 0; font: $headerFont; } |
|---|
Next, scroll to these lines:-
#content-wrapper { width: 760px; margin: 0 auto; padding: 0 0 15px; text-align: left; background-color: $mainBgColor; border: 1px solid $borderColor; border-top: 0; } #main-wrapper { margin-left: 14px; width: 464px; float: left; background-color: $mainBgColor; 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-right: 14px; width: 240px; float: right; background-color: $mainBgColor; 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 */ } |
|---|
Insert/amend the parts (shown in red):-
#content-wrapper { width: 950px; margin: 0 auto; padding: 0 0 15px; text-align: left; background-color: $mainBgColor; border: 1px solid $borderColor; border-top: 0; } #main-wrapper { margin-left: 14px; width: 464px; float: left; background-color: $mainBgColor; 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-right: 14px; width: 215px; float: right; background-color: $mainBgColor; 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 */ } #newsidebar-wrapper { margin-left: 14px; width: 215px; float: left; background-color: $mainBgColor; 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 */ } |
|---|
We have introduced a style definition for our new sidebar. You may have noticed that we have modified the width slightly in order to accommodate another column and yet not putting too much squeeze into the template. If you want to change the widths, by all means. Just adhere to the following guideline:-
(#content-wrapper width) = (#main-wrapper width) + (#sidebar-wrapper width) + (#newsidebar-wrapper width) + margins
We will have to insert something into the <body> section of the template before you can preview your new layout.
Further down the template, look for this and add the lines (shown in red):-
<div id='newsidebar-wrapper'> <b:section class='sidebar' id='newsidebar' preferred='yes'> <b:widget id='NewProfile' locked='false' title='About Me' type='Profile'/> </b:section> </div> <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> |
|---|
The position where the code is inserted is important. The new code has to be above the <div id='main-wrapper'>.
This places your Profile in the left sidebar. Not to worry, you can remove that later. Now, “Preview” the template to view the changes and if you like it, click “Save Template”. Remove the Profile if you don't want it there. Refresh your Blog to see your new Three Column Denim or Three Column Washed Denim layout!
Stretch Denim and Stretch Denim Light Templates
When you are at Template -> Edit HTML, scroll to where you see these lines:-
#content-wrapper { margin: 0 2%; padding: 0 0 15px; text-align: left; background-color: $mainBgColor; border: 1px solid $borderColor; border-top: 0; } #main-wrapper { margin-left: 1%; width: 64%; float: left; background-color: $mainBgColor; 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-right: 1%; width: 29%; float: right; background-color: $mainBgColor; 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 */ } |
|---|
Change/insert the codes (shown in red):-
#content-wrapper { margin: 0 2%; padding: 0 0 15px; text-align: left; background-color: $mainBgColor; border: 1px solid $borderColor; border-top: 0; } #main-wrapper { margin-left: 1%; width: 54%; float: left; background-color: $mainBgColor; 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-right: 1%; width: 21%; float: right; background-color: $mainBgColor; 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 */ } #newsidebar-wrapper { margin-left: 1%; width: 21%; float: left; background-color: $mainBgColor; 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 */ } |
|---|
After that, scroll further down the template to look for this and add the lines (shown in red):-
<div id='newsidebar-wrapper'> <b:section class='sidebar' id='newsidebar' preferred='yes'> <b:widget id='NewProfile' locked='false' title='About Me' type='Profile'/> </b:section> </div> <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> |
|---|
You will see your Profile in the left sidebar. “Preview” the template to view the changes and if you like it, click “Save Template”. You may now remove the Profile. Refresh your Blog to see your new Three Column Stretch Denim or Three Column Stretch Denim Light layout!
Align Header Title and Description
The Header title and description in the Denim templates are aligned to the left. To adjust them to the center or a fixed position in the Header, read the guidelines at Header Image and Title Alignment (I).
© Tips for New Bloggers
17 comments:
Hey please don't include these tips like, 3 columns rounders, scribe....Blah blah blah..Plz include some good tips. I have certainly not subscibed to your feed for all these useless things.
Hi Uzair
I am surprised by your comments. If you have followed the queries raised by the readers either in the comments to posts or in the chatbox, you would have noticed the requests by people asking for three column hacks to sand dollar, denim, thisaway, and so on. While they may not be useful to us (since we are using Minima), we think that as a service to these readers, we should include these guides. To say that these guides are 'useless' is an insult to all those readers who have found them 'useful'.
People use our guides for different reasons. While many of them benefit because they applied them to their blogs, there are also a number of others who simply want material to talk about in their blogs. Whatever the reasons, we believe that all bloggers out there respect the underlying principle - that the blog writers have the absolute discretion to write what they like. I am sure you would not want people to dictate what you ought to write about in your own blog.
Finally, based on our past correspondence, we verily believe that we have given you plenty of advice and help, more than what we have given majority of our readers. If you do not wish to continue subscribing to our feed, we can only say we are sorry to lose you.
hi bizwhiz, i think i'm not in the same line of uzair. i find out yr blog is superb in giving the info.
not all yr readers are the experts...there r some newbie too. so i think yr blog is splendid and keep up the gud work!!!
when i insert an Image in the mail bar, by using the custom layout option, i do not get any image in the blog...
can u pls help me out with this
Hi Schwerin Moses
Are you referring to your "Me, Myself" blog? Where is the "mail bar" you are talking about? Is it in the header or left sidebar or right sidebar? Did you follow this guide to insert a third column? Was there anything else that you added or deleted?
Thank you for the three column denim guide. I used it and all went well, I even gave you a shout out on my blog.
Thanx a lot!!!!! my Stretch Denim template looks GREAT now!!!
hi bizwhiz ..
I was curious if in converting two to three column can we add one more "post body " instead of side bar ?
Hi suhas D
Is this another hypothetical question?
Yes, hypothetically possible.
big help for new bloggers like me. keep posting useful tips like this. thanks!!!
Thanks for helping us to improved our blog. I always check your blog if there's new tips that you can give us.
Hi, I have now modified my blog to have three columns, my blog also includes flickr slide show. When I am in Edit Layout the page elements are at the same height on the page. However, when I preview my blog the page elements are at the bottom of the page. I have tried changing the width of the flickr slide show but it does not help. How can I bring the page elements further up the screen?
Thanks
Hi cr8on
Where did you insert the Flickr slideshow and your Profile? If you have inserted them in the 'crosscol-wrapper' section, they will be above your main post and sidebar. Should you want them to be aligned with your sidebar, go to Template -> Page Elements and move those elements to just above the "Blog Posts". Save and refresh your blog page.
You are doing a great service by sharing this ideas. It is amazing. Really. I think I am too late to find out this blog.
I already designed my blog. It is two column, and I would like to change in to three column. I don't know how to find out the current template of my blog. If it is not in your list of 3 column template, is there common way to make a 3 column for all templates. In my template, the main and column width is specified in %values, not in pixel values. any may to make it 3 column.
I would like to suggest one more post for a method to backup all posts and format in a blog.
My blog http://tectip.blogspot.com/
FOUR COLUMN DENIM TEMPLATE
I really thank the owner of this site! You have been a great help! My site now looks the way I want it to be, check http://abkdinfo.blogspot.com
It's a four column denim template, I followed your tips on the three column and experimented a little on it and I came up with a four column denim template.
If you look at my blogspot, I used a different name for the fourth column (this is actually the third sidebar) by calling it abkdsidebar instead of newsidebar.
I also adjusted the widths and margins so that it would fit in a 980px (instead of 960px).
I hope this would be of help to others who want a four column blogger layout!
Again, thanks to the author of this blogsite! I can't thank you enough!
Hi Sijo
You are using a Minima Stretch templates. We have done three column articles for Minima but not the stretch template. Maybe soon.
Thanks for making a years-long quest to find the right 3-column layout so fast and easy. It really comes down to putting the right things in the right places, and your perfect presentation has made this "dummy" feel really smart. Thanks again.
I have something to say ...