The Blogger Main Contents sections (Blog Posts and Sidebar) of Minima Template are simple, clean and easy to customize. Actually the template layout is so well designed, there is no need to customize so much on the Main Content sections.

Background Color of Blogger Blog Posts Section

By adding a background-color property to the #main-wrapper layer, the background color of the Blog Posts can be changed easily.

#main-wrapper {
width: 410px;
float: $startSide;
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 */
background-color: #6CF;
}

The Dreamweaver screen should look like in the diagram below:

Background Color of Blogger Sidebar Section

By adding a background-color property to the #sidebar-wrapper layer, the background color of the Sidebar can be changed easily.

#sidebar-wrapper {
width: 220px;
float: $endSide;
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 */
background-color: #CCC;
}

The picture below is the screen of Dreamweaver:

Setting a Border for Blogger Sidebar Section

If you wish to add a border to the Sidebar Section of Blogger, you can add the border property to the #sidebar-wrapper layer.

#sidebar-wrapper {
width: 220px;
float: $endSide;
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 */
background-color: #CCC;
border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
}

Note:
You should set some padding for the #sider-wrapper div layer if you use border. Otherwise the text will be wrapping close to the border sides.

Here’s the screen shot of Dreamweaver:

Setting a Border for Blog Posts Section

You can also add a border to the Blog Posts Section of Blogger by using the border property to the #main-wrapper selector.

#main-wrapper {
width: 410px;
float: $startSide;
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 */
background-color: #6CF;
border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
}

Note:
You should set some padding for the #main-wrapper div layer if you use border. Otherwise the text will be wrapping close to the border sides.

Setting Padding for Sidebar

If we set a background color or set a border for the Blogger Sidebar, the text will be too close to the left and right side. This is better to set a Padding for the left side and the right side.

#sidebar-wrapper {
width: 220px;
float: $endSide;
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 */
background-color: #CCC;
padding-right: 10px;
padding-left: 10px;
}

The picture below shows the left padding and right padding:

This Blogger article shows how to customize the Blog Posts asection and Sidebar section.

We already study and customize the Blogger Header and body section. It’s time to study further about the Blogger layout. If you wish to customize the Blogger Minima template extensively, this is better to know more about the overall template layout.

Let’s take a look at the overall layout of Blogger Minami template.

Width of Blogger Minima Template

The width of Blogger Minima template is set in the #outer-wrapper selector.

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

Pay attention to the width and padding styles:

width: 660 pixel width
padding: 10 pixels around four sides

Note:
If you wish to set the width of the template wider (e.g. 900 pixel), you need to change the width property of #outer-wrapper selector.

Header Section

You should be very familar with the Header Section as we have studied and customized the Header in previous tutorials.

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

Pay attention to the width and margin:

width of Header: 660 pixels
margin of Header: 10 pixels Margin at the bottom.

The 10 pixels margin provide some space between the Header and the Contents Sections (Blog Posts and Sidebar) below.

Note:
If you change the width of the template wider in #outer-wrapper (e.g. from 660 pixels to 900 pixels), you may also need to set the width of the Header(e.g. from 660 pixels to 900 pixels).

Width of Blog Posts

The Blog Posts section holds the posts. It is contained in the #main-wrapper div layer which is floating on the left.

#main-wrapper {
width: 410px;
float: $startSide;
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 */
}

Pay attention to the width of Blog Posts section:

Width of the Blog Posts section: 410 pixels

Note:
If you change the width of the template wider in #outer-wrapper (e.g. from 660 pixels to 900 pixels), you may also need to set the width of Blog posts wider accordingly (e.g. from 410 pixels to 600 pixels).

Width of Sidebar

#sidebar-wrapper {
width: 220px;
float: $endSide;
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 */
}

Pay attention to the width of the sidebar:

Width of Sidebar: 220 pixels.

Calculation:
The space or gap between the Blog Posts and Sidebar is 30 pixels (660 – 410 – 220)

Note:
If you change the width of the template wider in #outer-wrapper and the width of Blog posts, you may also need to set the width of Sidebar. Remember to leave some space between the Blog Posts and Sidebar.

Width of Footer

Pay attention to the width of the footerr:

Width of footerr: 660 pixels.

#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}

Note:
If you change the width of the template wider in #outer-wrapper and the width of Blog posts, you may also need to set the width of footer.

This Blogger article study further the Minima template layout – Header, Blog Posts, Sidebar and Footer.

If you don’t like the default Blogger white background body, you can add a background color or add a background image easily by editing the body property of the HTML code.

Let’s take a look at the original CSS Style Code of Blogger Body:

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Add Background Color to Blogger Blog Body

You can add or set a background color to Blogger body by adding a background-color property to the body tag. For example:

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
background-color: #999;
}

The Dreamweaver screen should look like:

Add Background Image to Blogger Blog Body

To add a background image to Blogger body, use the background-image property.

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
background-image: url(images/body-bg-color.gif);
}

Note:
use the following code instead in your blogger:

background-image: url(http://www.YourImageLoc.com/images/body-bg-color.gif);

The final result of your Blogger will look like:

This Blogger article shows how to add background color and background image to Blogger blog.