How to change dimensions of Blogger Template

Most of the time while using existing Blogger themes, people wish to change the height and width of several classes for example header, sidebars ,main body or footer etc. Lets suppose you like a design of an anonymous template for your blog but you are unsatisfied with the width of header or there is no enough space in sidebar to place extra large Adsense Ads. Or for some reasons you want to increase/decrease size of the posts area. You can accomplish this task by following these simple steps.

General Blogger Template layout

A general layout of a blogger template is described in the following diagram.

Following CSS classes are responsible for

• #outer-wrapper - resides inside the body of template and contains all other classes e.g. main,header,footer,siderbar in it
• #header-wrapper-  is resposible for the header size.
• #main-wrapper- contains the post area where blogger posts are displayed.
• #sidebar-wrapper- contains the sidebar widgets for example tags, categories search tab and ads etc.

#outer-wrapper

Outer-wrapper is one of the most important aspect which contain the whole outlook package of our blog in it. Either you want to increase the size of sidebar of main content area, if you will not adjust size of outer-wrapper. You will end up in messing all the dimensions.

Consider yourself in a small home where you want to increase the size of bedroom, kitchen, rest area etc. You can’t enlarge rooms size without allocating extra space to your home. So here is how to increase size of outer-wrapper.

1. Go to your Blogger blog > Dashboard > Template > backup/restore

and download .xml backup file of your template so that you could later restore your previous setting if necessary.

2. Now click on Edit html and press <ctrl f> to open Find tab.

3. Now find #outer-wrapper. The CSS class contain outer-wrapper’s setting will appear.

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

Now as you can see. width of my outer-wrapper is mentioned as 992 pixels. If you want to increase size of your sidebar and main area both up to 10 pixels you must add 20 pixel to the total width of outer wrapper. (in my case it would be 1012 px). There are also other settings like margin and padding. You can tweak them according to your template needs.

Save the settings

Be a better Blogger with John Chow

#header-wrapper

As the name tells itself, header wrapper contains all dimensions of header. Now search #header-wrapper in find tab.

#header-wrapper{
width:950px;
margin:10px auto -8px;
display:inline-block;
}

In above listing, width of header is mentioned 950 pixels. (while changing dimensions, always keep in mind the size of outer-wrapper.) Now since we have already set outer wrapper to our desired width. You can set width according to your needs.

CSS may contain some further settings regarding to header items for example header-inner, descriptions, h1 sizes and all.

#main and sidebar-wrapper

As we have already changed settings of our outer and header wrapper, same is the scenario with main and sidebar wrappers. By finding #main-wrapper and #sidebar-wrapper we can change their width too.

#main-wrapper{
width:732px;
float:$startSide;
word-wrap:break-word;
overflow:hidden;
}

#sidebar-wrapper{
width:250px;
float:$endSide;
word-wrap:break-word;
overflow:hidden;
}

I think we are done with this topic, i am sure it will help you. If oyu have any queries to make. You can leave them in the comment section below.