Computer Consultant

Computer Consultant, Network Security Consulting, Computer Consultants

Three Columns Minima Template

The typical new Blogger Minima Template has only one sidebar. We can add a third column to the left, to have two sidebars. This maximizes the space, and allows greater flexibility in adding page elements to the sidebar.

Note that this guide is for those who want to convert their Minima template into a three column template by adding another sidebar. In our Rounders Template article, we have explained why the Rounders, Scribe, No. 897 or other templates are different and how the background images should be changed in order to cater to the new layout. We shall try to create new test blogs under different templates and post the tutorials once we have converted them into three column templates.

In the meantime, if you are using other templates, please refer to our articles and guides on:-
1. Three Columns Denim Template;
2. Three Columns Dots 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.

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.

Scroll to the part where you see this:-

#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}

#main-wrapper {
width: 410px;
float: left;
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 {
width: 220px;
float: right;
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-wrapper – referring to the main Blog Posts
#sidebar-wrapper – referring to the right sidebar.

To add another sidebar, copy the part highlighted in red and paste it immediately after that, but rename the “#sidebar-wrapper” to “#newsidebar-wrapper”.

Next, adjust the width settings of all the wrappers. For this example, I used what is commonly used by many people i.e., 750px for outer-wrapper, 400px for main-wrapper, and 150px for sidebar-wrapper. You can of course change these values, so long as the total widths of both sidebar-wrappers and the main-wrapper do not exceed the width of the outer-wrapper.

Also, fix the left margin of the main wrapper but allow the newsidebar to float to the left, leaving the original sidebar on the right.

Your template should now read something like this:-

#outer-wrapper {
width: 750px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}

#main-wrapper {
width: 400px;
margin-left: 25px;
float: left;
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 {
width: 150px;
float: right;
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 {
width: 150px;
float: left;
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 */
}

Update:

We shall also change the layout editor to cater to the new width. Scroll to where you see this and add the lines (shown in red):-

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

Blog Posts in the Center

This sets the style sheet for the template. We will now need to add a section in the body of the template. Scroll to somewhere near the bottom of the script where you see this.

<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> <div id='sidebar-wrapper'> <b:section class='sidebar' id='sidebar' preferred='yes'/> </div>

Add the portion in red above the div id='main wrapper'. The segment should look something like this:-

The code will give you a newsidebar on the left, main post in the middle, and leave the current sidebar on the right, just like what you see in this Blog.

Blog Posts on the Left

If, for example, you want the main post on the left, and both sidebars on the right, you will put the portion in red below the div id='main wrapper'. It will look like this:-

Change Width of Header and Footer

One more thing. If you have a wider layout, you may also want to lengthen the width of your Header and Footer. Go to the part of your template that says this:-

#header-wrapper { width:660px;

and

#footer { width:660px;

You can change the number in red. In this example, I may want to widen it to the same width as that of the outer-wrapper. I will therefore change the above codes to this:-

#header-wrapper { width:750px;

and

#footer { width:750px;

You may click “Preview” to see the new layout, and if you are happy with what you see, click “Save Template”. If you don't want the profile on the left, you can remove that page element after that. You have now three columns in your layout!

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

Note:

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.

posted by Computer @ 11:11,

Computer Consultant

Computer Consultant, Network Security Consulting, Computer Consultants

Three Columns Minima Template

0 Comments: