Computer Consultant: Three Columns Dots Template

Custom Search

Three Columns Dots Template

If your Blog is using a Dots or Dots Dark Template, you can consider adding another sidebar, making it a 3 column Dots Template. Because the dots in the background image are well-spaced, we thought it won't look nice having another column. However, after inserting the third column and making adjustments to several settings, we were pleased to see that a three column Dots or Dots Dark Template actually looks very chic and nice. Since a number of readers had requested for this, here is the how-to tutorial to modify your layout into a three column Dots layout. Note that this guide is for the standard Blogger templates. If you have customized your template or are using one that is already customized, compare what is written here with the template code that you have and make the adjustments accordingly.

For other templates, please refer to our articles and guides on:-
1. Three Columns Denim 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.

Dots and Dots Dark Templates

Except for one part, the steps for converting both templates are about the same. The new Three Column Dots Template will look like this:-

Whereas the Three Columns Dots Dark Template will be this:-

Before any modification, we must always remember to backup the template. Go to Template -> Edit HTML. Click the “Download Full Template” link to save a copy of your template.

Dots Template

This is for the Dots Template users. Those who have Dots Dark Templates can look at the next section. After we have a backup, we can scroll to these lines:-

#outer-wrapper {
background:url("http://www.blogblog.com/dots/bg_3dots.gif") no-repeat 250px 50px;
width:700px;
margin:0 auto;
text-align:left;
font:$bodyfont;
}

#header-wrapper {
display: none;
}

#main-wrapper {
width:450px;
float:right;
padding:100px 0 20px;
font-size:85%;
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 {
background:url("http://www.blogblog.com/dots/bg_dots2.gif") -100px -100px;
padding:20px 10px 15px;
}
#sidebar-wrapper {
width:200px;
float:left;
font-size:85%;
padding-bottom:20px;
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 {
background:url("http://www.blogblog.com/dots/bg_dots2.gif") 150px -50px;
padding:40px 10px 15px;
width:200px;
width/* */:/**/180px;
width: /**/180px;
}

Change or amend the above to the following code (note in particular the parts shown in red):-

#outer-wrapper {
background:url("http://www.blogblog.com/dots/bg_3dots.gif") no-repeat 275px 50px;
width:950px;
margin:0 auto;
text-align:left;
font:$bodyfont;
}

#header-wrapper {
display: none;
}

#main-wrapper {
width:400px;
float:left;
padding:100px 0 20px;
font-size:85%;
margin-left:50px;
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 {
background:url("http://www.blogblog.com/dots/bg_dots2.gif") -100px -100px;
padding:20px 10px 15px;
}
#sidebar-wrapper {
width:200px;
float:left;
font-size:85%;
padding-bottom:20px;
margin-left:25px;
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 {
background:url("http://www.blogblog.com/dots/bg_dots2.gif") 150px -50px;
padding:40px 10px 15px;
width:200px;
width/* */:/**/180px;
width: /**/180px;
}
#newsidebar-wrapper {
width:200px;
float:right;
font-size:85%;
padding-bottom:20px;
margin-right:25px;
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 {
background:url("http://www.blogblog.com/dots/bg_dots2.gif") 150px -50px;
padding:40px 10px 15px;
width:200px;
width/* */:/**/180px;
width: /**/180px;
}

We have left the sidebar hover styles unchanged. The same style will apply to the new sidebar.

Dots Dark Template

For Dots Dark Template users, you will see these lines:-

#outer-wrapper {
background:url("http://www.blogblog.com/dots_dark/bg_3dots.gif") no-repeat 250px 50px;
width:700px;
margin:0 auto;
text-align:left;
font:$bodyfont;
}

#header-wrapper {
display: none;
}

#main-wrapper {
width:450px;
float:right;
padding:100px 0 20px;
font-size:85%;
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 {
background:url("http://www.blogblog.com/dots_dark/bg_minidots2.gif") -100px -100px;
padding:20px 10px 15px;
}
#sidebar-wrapper {
width:200px;
float:left;
font-size:85%;
padding-bottom:20px;
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 {
background:url("http://www.blogblog.com/dots_dark/bg_minidots2.gif") 150px -50px;
padding:40px 10px 15px;
width:200px;
width/* */:/**/180px;
width: /**/180px;
}

Change or amend the above to these (note the parts in red):-

#outer-wrapper {
background:url("http://www.blogblog.com/dots_dark/bg_3dots.gif") no-repeat 275px 50px;
width:950px;
margin:0 auto;
text-align:left;
font:$bodyfont;
}

#header-wrapper {
display: none;
}

#main-wrapper {
width:400px;
float:left;
padding:100px 0 20px;
font-size:85%;
margin-left:50px;
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 {
background:url("http://www.blogblog.com/dots_dark/bg_minidots2.gif") -100px -100px;
padding:20px 10px 15px;
}
#sidebar-wrapper {
width:200px;
float:left;
font-size:85%;
padding-bottom:20px;
margin-left:25px;
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 {
background:url("http://www.blogblog.com/dots_dark/bg_minidots2.gif") 150px -50px;
padding:40px 10px 15px;
width:200px;
width/* */:/**/180px;
width: /**/180px;
}
#newsidebar-wrapper {
width:200px;
float:right;
font-size:85%;
padding-bottom:20px;
margin-right:25px;
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 {
background:url("http://www.blogblog.com/dots_dark/bg_minidots2.gif") 150px -50px;
padding:40px 10px 15px;
width:200px;
width/* */:/**/180px;
width: /**/180px;
}

Both Dots and Dots Dark Templates

The following changes and modifications apply to BOTH the Dots and Dots Dark Templates.

Further down the template, we see the layout editor tweaks:-

/* Page structure tweaks for layout editor wireframe */ body#layout #sidebar, body#layout #main, body#layout #main-wrapper, body#layout #outer-wrapper, body#layout #sidebar-wrapper { padding: 0; } body#layout #sidebar, body#layout #sidebar-wrapper { padding: 0; width: 240px; }

Change the above to this:-

/** Page structure tweaks for layout editor wireframe */ body#layout #outer-wrapper { width: 750px; padding: 0px; } body#layout #main-wrapper, body#layout #main { width: 400px; padding: 0px; margin: 0px; } body#layout #sidebar-wrapper, body#layout #newsidebar-wrapper, body#layout #sidebar, body#layout #newsidebar { width: 150px; padding: 0px; }

Next, under the <body> section of the template, look for <div id='main-wrapper'> and change/insert the codes as follows:-

Now, Preview the Template. You should see the new sidebar on the right with your Profile. (If you have disabled sharing of your Profile, go to Edit Profile in the Dashboard and enable it temporarily.) If you are pleased with the new three column layout, click “Save Template”. Remove the Profile page element under Template -> Page Elements. Refresh the Blog. You have now a new Three Columns Dots Template or Three Columns Dots Dark Template!

Align Header Title and Description

The Header title and description are in the left sidebar by default. This is the way the template is designed. Since the space is narrow, there is little alignment that you need to do. The text will be aligned to the left.

posted by Computer @ 11:11,

Computer Consultant

Computer Consultant, Network Security Consulting, Computer Consultants

Three Columns Dots Template

0 Comments: