Blogger Templates Layouts Tutorials | Web Page Design Tutorials Home

Customize Blogger Blog Posts Section and Sidebar Section

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:

Blooger background color of Blog Posts

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:

Blooger background color of Blog Posts

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:

Blooger background color of Blog Posts

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.

Blooger background color of Blog Posts

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:

Blooger background color of Blog Posts

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

blogger layout tutorials