Computer Consultant

Computer Consultant, Network Security Consulting, Computer Consultants

     Computer Consultant | Network Security Consulting


Recent posts




Blogger Template

PHP Basic

PHP Reference

PHP Advance

JavaScript Basic



Custom Search





Three Columns Denim Template

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:-

Three Columns Denim Template

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

Three Columns Denim Template

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).

posted by Computer @ 11:06,

9 Comments:

At 24 September 2008 at 23:35, Blogger EdCIRC said...

Thanks a ton. I could easily change the Stretch Denim 2 Column Template to the 3 Column one !

 
At 11 January 2009 at 07:56, Blogger Martin MY said...

I have tried varoius versions of this your's was the only one that worked!!! Thanks.

 
At 28 February 2009 at 00:50, Blogger NIEN, Teng-Wang said...

Thanks very much.
It works well.
By the way, could you please tell me how to activate the link of the header to the homepage? I found that I can just click the header and go back to the homepage with other template, but with this denim template I can't.

Thanks again.

 
At 11 August 2009 at 21:54, Blogger Colette S said...

This is what I get:

We were unable to preview your template
Please correct the error below, and submit your template again.
The new widget id "NewProfile" is invalid for type: Profile


Is there anyway to know why this happens?

 
At 1 September 2009 at 13:09, Blogger KAY said...

i had same result as Jamaican Spice!

Houston, we have a problem..........

 
At 9 September 2009 at 20:21, Blogger Keeping My Cents said...

Same problem as Jamerican Spice, too!

 
At 22 October 2009 at 02:39, Blogger avaveen said...

Had the same problem than JamacainSpice & co.
Simply delete this line INCLUDING the < and the > before and after the line.

b:widget id='NewProfile' locked='false' title='About Me' type='Profile'/

from the last addition you make on the HTML code.

 
At 1 August 2010 at 03:21, Blogger Renee P. said...

Have you figured out a way to get the sidebar off of the pages in Stretch Denim Lite yet? Google hits give code for this in general, but the post sidebar always disappears as well. There seems to be something specific to this template that no one knows.

 
At 19 September 2011 at 09:12, Blogger Bose said...

This is mind blowing info! hats off!

Cv template

 

Post a Comment

<< Home


Blogger