Tuesday, January 16, 2007

3 Column Blog

Here is one way to convert a blogger template with one side panel so that there is a panel on each side. In this example, I've taken the "Minima Lefty" template by Douglas Bowman and Darren Delaye.

I've widened the template and added another column to the right.

You can adapt this procedure for other blogger templates. My own blog is currently an adaptation of the "Demim" template by Darren Delaye.

First, to answer some basic questions:

1. Is this easy? Well, it's intermediate. If you've edited HTML before, you'll be fine. If not, you'll just need to be bold. I think it's equivalent to re-wiring a plug without the risk of executing yourself.
2. Can I screw up my blog template trying this? Yes, but you'd need to make a lot of mistakes to achieve that! We'll start by making a backup, so you should feel confident that you can always undo any mistakes.
3. Can I loose my posts? No, we won't be touching them.
4. Can I follow the instructions exactly step by step? Not exactly. Every template will be slightly different. But you should recognise the sections ok. I did pretty much the same procedure with this very blog.
5. Are there any guarantees? Only taxes.

Well, I've done my best to put you off. Any intrepid bloggers still reading... here goes.

Step 1:

Go to your blogger Dashboard.
Under the Template tab, select 'Edit HTML'.
Copy the full content of the large Template box.
Paste it into a text editor like notepad or gedit (not Word).
Save it on your computer (perhaps call it MyTemplate.txt).
Make another copy to edit (so that you keep a copy of the original).

Step 2:

Open your template in your text editor.
Scroll down to find a section like this:

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

#main-wrapper {
width: 410px;
float: right;
word-wrap: break-word;
overflow: hidden;
}

#sidebar-wrapper {
width: 220px;
float: left;
word-wrap: break-word;
overflow: hidden;
}

Copy the #sidebar-wrapper subsection and head the new copy #rightbar-wrapper
Increase the outer-wrapper width to 850.
Decrease the sidebar-wrapper and the new rightbar-wrapper to 180.
On the rightbar-wrapper, change the float from left to right.
Also, rearrange the subsections so they are in order, from left to right.
(I moved sidebar-wrapper subsection above the main-wrapper subsection.)
Add to the main-wrapper section the line "margin-left: 30px;"

The section will look something like this:

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 850px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}

#sidebar-wrapper {
width: 180px;
float: left;
word-wrap: break-word;
overflow: hidden;
}

#main-wrapper {
width: 410px;
margin-left: 30px;
float: right;
word-wrap: break-word;
overflow: hidden;
}

#rightbar-wrapper {
width: 180px;
float: right;
word-wrap: break-word;
overflow: hidden;
}

Note: You can adjust to different widths. If your side, middle and right bars (or columns) do not fit comfortably within your outer wrapper, you will find that one column may start below the bottom of another column - stepping too far down the page.

Step 3:

Find the Sidebar Content section.
Copy and paste another copy immediately below it.
In the second copy, change all the occurrences of 'sidebar' to 'rightbar'.

/* Sidebar Content
----------------------------------------------- */
.sidebar {
color: $sidebartextcolor;
line-height: 1.5em;
}

.sidebar ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
.sidebar li {
margin:0;
padding:0 0 .25em 15px;
text-indent:-15px;
line-height:1.5em;
}

.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

/* Rightbar Content
----------------------------------------------- */
.rightbar {
color: $sidebartextcolor;
line-height: 1.5em;
}

.rightbar ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}

.rightbar li {
margin:0;
padding:0 0 .25em 15px;
text-indent:-15px;
line-height:1.5em;
}

.rightbar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

Note: you may have noticed the $sidebarcolor. Leave that as it is for now. That way the same colour schemes will apply to both side and right columns.

Step 4:

Toward the bottom of your template, you'll see a "div id='sidebar-wapper' " section similar to the graphic below.
Copy the whole section and paste another copy beneath it.

You guessed it, rename the 'sidebar' bits to 'rightbar'.
Arrange the sections in the order shown below: sidebar-wrapper, main-wrapper, then rightbar-wrapper.

Now, delete some of the widget lines so that each widget line appears only once in either the sidebar, or the rightbar section. A widget cannot appear in both. In this example, I have only two widgets, so I'll put the Profile1 in the sidebar and the BlogArchive1 in the rightbar.

Step 5:

Save your work!
Copy it back into the Blog, Template, Edit HTML text box.
Click the Preview button.
If it looks good, hit the SAVE TEMPLATE button.

13 comments:

Ian said...

Excellent, I'd been thinking myself about the three column option, so many thanks for this, you'll save me a lot of headscratching.

Onyx Stone said...

I see you made it work! Well done.

...successful switch to 3 columns at
Imagined Community

Peter said...

I had to stop and think for a second why the only guarantee was taxes as the proverbial sayings is 'The only guarantee in life is death and taxes,' but then I realized, as a Christian, you're quietly endorsing the second coming of Christ, which means death is not guaranteed at all as I Corinthians 15:15, "we shall not all sleep"

Nice tie in :)

Ellee said...

It's great to have 3 columns, I'm sure this info was a great help to others who are making the same switch.

I hope to add a Blogpower link in the near future when my tekkie friend returns from hols as I don't know how to add the link to Wordpress.

Welshcakes Limoncello said...

Thanks. Your instructions are so clear and you make it sound so possible that even I might have a go! It'll have to be on one of my intrepid days, though....

James.R.Skinner said...

thanks. was quite useful!

Jeremy Jacobs said...

Looks great. And have a look at Wordpress.

Serf said...

Well done for that tutorial.

I have long wished to have three columns, as it enables a lot more links.

I went through the process myself, and I would advise people who are not confident about it to make a test blog first. (Setting up a new blog takes a minute or so)

I made a mistake, which meant that the blog rendered in firefox, but not in internet explorer. Very stressful.

james higham said...

Truly excellent. Have you posted or linked this to DTB yet? I haven't seen it for some days.

David McDuff said...

Call for help! I've implemented the template changes as per your instructions and almost everything works out just fine. The one problem I'm having is getting the main wrapper to appear between the left and right sidebars. The sidebars either want to group together (on the right or left depending on float) or to appear at the bottom of the page (under the main wrapper).

I am using % widths rather than px widths in keeping with the original settings in my template (Stretch Denim from Delaye). Do I need to switch from % to px, is it just a matter of decreasing my %'s or is there something else going awry?

Thanks in advance for any help.

Onyx Stone said...

Try making your % less - so they add up to less than 100. Really, I don't know, but that's what I would try.

Vita Brevis said...

Thanks for taking the time to make this available, it was exactly what I was looking for and worked fine, with % values.

Scotty said...

this was really helpful, exactly what i was looking for. Couldn't find changes with %'s anywhere else. Cheers