How to change blog (columns) width

Halo folks, let's see how you wish you could widen the sidebar to make way for your newly acquired widget, or increase the post area width so you can reduce the post area height, or you wonder if you could use the empty spaces on the left and right sides of your blog.

This tutorial we will see how to reduce or increase the sizes in most of regular layout templates, for some some heavy hectic designed template.

Before we continue let me explain about what constitutes a basic Blogger layout template.

Refer to the diagram on the left, the section are colored and lebaled for easy understanding.

The biggest box in a layout is outer-wrapper. Inside outer-wrapper are smaller boxes, and inside these smaller boxes are the elements.

The relationships:

• header-wrapper –contains header, with header picture etc.
• main-wrapper –contains main section. Inside main we have blog posts.
• sidebar-wrappers –contains sidebars, with widgets etc.
• footer-wrapper –contains footer.

To increase the width of a box, you have make sure whether the outer box can accommodate the increase. Otherwise you have to increase the outer box width too.

Now let’s proceed to CSS (Cascading Style Sheet) section of your template code. What you will find is usually like this:

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
------------------------------

#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
}
------------------------------

#main-wrapper {
width: 410px;
}
------------------------------

#sidebar-wrapper {
width: 220px;
}
------------------------------

#footer {
width:660px;
}

Make sure you choose the codes I have shown here to not confuse. The code may look a bit clamsy for beginners but step by step you can do it.

Let’s go by an example:  you want to increase your blog post (main-wrapper) width by 100px and the sidebar by 50px.  Check the steps below to help you go through customization:

1. Change the width of main-wrapper from 410px to (410+100)px = 510px.
2. Do the same for sidebar, except adding only 50px. The new sidebar width should be 270px.
3. Keep in mind what you need to know about the boxes, for instance the outer box for main-wrapper and sidebar. Refer to the diagram,and you get outer-wrapper.
4. Increase the width of outer-wrapper by the total amount. So you should add (100+50)px to 660px. The new width is 810px.

That’s it!

N/B You can change and add values as you wish.

Let' me know if you hit trouble.

Share: