Blogger Buster: Adjust margins in Blogger templates

August 01, 2007

Adjust margins in Blogger templates

Filed under: Customize your Blogger Template 12 Comments

In Blogger templates, margins define the space between elements of the blog, such as the space between the main posts section and the sidebar. If you have added a second sidebar, or simply wish to alter the layout of your blog, you may wish to change some of the margin specifications for elements of your template. In this post, I'll explain how this can be achieved, with examples to help you understand what can be done.

The margins of each blog element (ie: header, sidebar, main-section) are specified in the "Style" section of your Blogger template:

In the "new" Blogger layouts templates, the style is specified between the <b:skin> and </b:skin> tags
In "Classic" Blogger templates, the styles are specified between the <style> and </style> tags

For both types of Blogger templates, margins can be defined in the same ways.

The best way for me to explain how margins work is by using an example; here is the style element for my right sidebar as it appears in my blog template:

#sidebar-wrapper {
margin: 0 14px 0 10px;
width: 240px;
float: right;
background-color: $mainBgColor;
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 */
}

We need to focus on the red line, which specifies the margins (the space surrounding) the sidebar element. As you can see, there are four margins specified in this one line; these are defined in the following order:

Top margin: 0
Right margin: 14px
Bottom margin: 0
Left margin: 10px

I can increase or decrease these margins by altering the number associated with each margin. For example, if I wanted to define a space of 10 pixels between the header section and the top of the sidebar, I would change this line as follows:

margin: 10px 14px 0 10px;

Sides which do not have a margion should be specified as "0"; those for which you would like a margin can have this specified in pixels (eg: 10px), or in other CSS units (which you can read about here). In most Blogger templates, margins are specified as pixels.

If you prefer all margins surrounding an element to be equal, you can define this using only one statement, eg:

margin: 15px;

This ensures that the margins of the top, right, bottom and left of an element are all 15 pixels wide.

One final method of defining margins is to specify the margin in the description, eg:

margin-top: 15px; margin-right: 10px; margin-bottom: 5px; margin-left: 0;

Here are some examples of the spaces which can be created using margins in the style of a template:

Header section has margins defined as "15px 15px 10px 15px.

Now the main-element has a margin-left definition of 15px...

... and finally, the "sidebar" element has margins defined as: 20px 0 0 40px; (in addition to the margins of the other elements).

A great way to experiment with margins is to use the "Try it Editor" featured over at W3 Schools. Here you can adjust the margins in the left hand pane and see the results imedietly in the right section: By default, the code does not feature DIV elements as you would find in Blogger templates, so you may like to copy and paste the following code into the left window in order to experiment in the same way I have described:

<html>
<head>
<style type="text/css">
.outer-wrapper {width:400px; height:200px; border:2px solid; border-color:#f00;}
.header {width:300; border:1px solid; margin: 15px 15px 10px 15px; float: left;}
.main {float:left; width:150; height:100px; border:1px solid; margin-left: 15px;}
.right {float:left; width:100; height:100px; border:1px solid; margin: 20px 0 0 40px;}
</style>
</head>
<body>
<div class="outer-wrapper">
<div class="header">Header section</div>
<div id="main-wrapper">
<div class="main">Main section</div>
<div class="right">Sidebar section</div>
</div>
</div>
</body>
</html>

Have fun experimenting with the margins of your Blogger template! Don't forget, you can always play around with the margins and preview the changes before saving. To be on the safe side, it's always good practise to make a backup of your template before altering it.

Technorati Tags: blogger | template | margins | css | style