Layouts Wire Frame Editor : The Blogger Guide

Introduction

This is the third in a series of articles on 3 columns. In the second article I said that you have to perform 4 steps to convert a 2 column template in to a 3 column one. However, I did not explain the 4th step, which is the tweaking of the Layout Editor. Let's see how we can do it.

This blog itself uses a Denim template customized in to 3 columns. You probably have noticed it already. For the purpose of this article, I will use the Wire Frame Editor of this blog as an example.

The Layout Editor

When you click on the Layout tab of your Blogger console, the default view is the Page Elements view. This is where you see the Add and Arrange Page Elements heading and you can use the drag-and-drop feature of the editor to rearrange your page elements.

Here's the default view of the Layout Editor.

All is well until you add your third column using the first 3 steps described here. But the moment you add your third column the Layout Editor gets skewed and some times you find that you can't even edit your first sidebar.

This is how my editor looked like immediately after adding the third side bar to the right of the existing sidebar.

This is not a desirable situation. There's little meaning in adding a 3rd column if you can't add page elements to it, isn't it?

How can we correct this? The answer lies in the body#layout CSS selector. Remember the ID selectors we discussed in the previous article? The body#layout is another ID selector but limited to the scope of the body element. However, we can do without a detail understanding of this selector.

Page Structure Tweaks

Usually the Blogger template has a section called the "Page structure tweaks for the layout editor wireframe". This is found right at the end of the skin of your template. (Some templates don't have it. For example, the default Denim template didn't have one)

This is where the body#layout selector is used to define the layout of our template for the wire frame editor. The notation seems a bit cryptic but this is what it does.

The main purpose of the "Page structure tweaks" section is to define the widths of the various wrappers (the components of the template skeleton) in our template. The best way to explain is to use an example.

Here's the tweak I added to my modified 3 column template.

/** Page structure tweaks for layout editor wireframe */

body#layout #outer-wrapper,
body#layout #content-wrapper,
body#layout #header,
body#layout #footer-wrapper {
width: 760px;
}

body#layout #main-wrapper {
width: 400px;
}

body#layout #sidebar-wrapper {
width: 150px;
margin-left: 10px;
}

body#layout #sidebar-wrapper-two {
width: 150px;
}

The first rule in this part tells the Layout Editor to use a width of 760 pixels for the outer, content, header and footer wrappers. (In the Denim template header is used instead of a header-wrapper). The actual width of the modified template is 1000 pixels. When the Layout Editor uses the actual width, we end up with the skewed Layout Editor that we saw above. Using this tweak we can ask the Layout editor to use a width that is less than the actual size. In other words, we tell the editor to use a scaled down version of our template.

Scaling down the outer wrappers is not sufficient. We have to do the same for the child containers (i.e. main and sidebar wrappers). The main-wrapper in my modified template is 504 pixels and the sidebars have widths of 240 and 200 pixels respectively. Those 3 add up to 944, which is more than the 760 we gave for the outer wrappers. So we define proportionately (this proportion can be approximate) smaller widths of 400, 150 and 150 for the main, first sidebar and the second sidebar respectively. Now they add up to 700 and therefore fits within our scaled down wife frame.

That's all to it. The finished result is shown below.

Note: You might have to do a little bit of trial and error with your particular wire frame editor to get it right. Adjust the widths of the various elements few times until you get it right.