5 Customization of Simple Blogger Template | Mission 5

Lesson 5: Five simple customization of the simple Blogger template we created in the previous tutorial.

Image may be NSFW.
Clik here to view.

Previously, we saw how to create the simple Blogger skeletal template. We also saw all the Blogger specific codes involved in the template. Now, we shall redesign the template to the next extent necessary for understanding before going much advanced.

This is how the template looked before in Lesson 4/Mission 4:
DEMO

This is how the template would look after this tutorial:
ALTER EFFECT DEMO

PREVIOUS MISSION – Mission 4: Create A Simple Blogger Template
NEXT MISSION – Mission 6: Understanding Blogger Specific Tags

Mission 5 Objectives:

1) Remove the top nav-bar from Blogger.
2) Adjusting the height of the header space. [ Also other styling possible]
3) Adjusting the sidebar width. [ Also other styling possible for sidebar ]
4) Adjusting the main content area width. [ Also other styling possible for Main Content Area ]
5) Making the sidebar stay to either left or right. Our choice right?

I guess 5 sub-lessons are enough to start with for lesson 5 Image may be NSFW.
Clik here to view.

1. Remove the Top NavBar from Blogger.

Image may be NSFW.
Clik here to view.

The first objective is covered in the link we have provided. You can easily remove by adding a small CSS snippet along with other CSS.

2. Adjusting the height of the header space:

Search for this code from your template:

/* -----   HEADER STYLING  ----- */

#header-wrapper {
/* Header Wrapping */
height:100%;
position: relative;
padding: 0px;
min-width: 800px;
max-width: 1000px;
text-align:center;
margin-bottom:5px;
}

#header {
/* Main header settings */
height:200px;
width:900px;
border:1px solid green;
background: #fff;
padding:0px;
margin: 0px auto; /* CENTERING HEADER */
}

#header{ font-family:"Times New Roman", Times, serif; font-style:italic; }
Full customized code after some changes:#header-wrapper {
/* Header Wrapping */
height:100%;
position: relative;
padding: 0px;
min-width: 800px;
max-width: 1000px;
text-align:center;
margin-bottom:5px;
background:red;
}
#header {
/* Main header settings */
height:100px;
width:900px;
border:1px dashed blue;
background: yellow;
font-family:"Times New Roman", Times, serif;
font-style:italic;
padding:10px;
margin: 0px auto; /* CENTERING HEADER */
}

3. Adjusting the sidebar width.

Similar to header, we can customize and add new styling for sidebar as well.
Here is the complete code you need to search for:

.sidebar-wrapper {
width:300px;
display: inline; /* handles IE margin bug */
float: right;min-width:200px;max-width:400px;
margin:0px;
padding:10px;
margin-left:30px;
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 */
}
.sidebar {
margin:0px;padding:10px;
width:260px;min-width:100px;max-width:260px;
text-align: left;
}

The .sidebar-wrapper is the outer covering/wrapper for the actual sidebar space/area where widgets and other sidebar elements can appear.
You need to proportionally change the .sidebar-wrapper and .sidebar element width.

Note: The min-width and max-width are not supported in older browsers.

Adjusting Background Color of Sidebar:
By default the background colors of the .sidebar-wrapper and #sidebar is “WHITE”.
To change the background color of sidebar-wrapper and sidebar.

You need to add the following code into the CSS as shown below:
We set the sidebar-wrapper to green and sidebar1 to yellow.

.sidebar-wrapper{background:green;}

#sidebar1 {background:yellow; }

Note: #sidebar1 is the first sidebar id.
Important: It is preferred to use same color background for sidebar-wrapper and all individual sidebar.

Adjusting Padding of Sidebar:
Padding is used to get a square space on all side inside a box shaped element.
Margin is used to get a square space on all sides outside a box shaped element.
Both of the padding and margin uses the CSS box-model.

Padding/Margin can be increased for the sidebar-wrapper.
Padding/Margin can be increased for the individual sidebar.
Padding/Margin can be increased for every gadget/widget element in sidebar.
Padding/Margin can be increased for any other element on the sidebar.

Learn more about padding and margin.

Adding Border Around the Sidebars:
You can use the CSS property border to add borders for every element. Borders can be added even for a link in the sidebar or for your headings in the sidebar.
Learn more about borders from here.

Misc. Sidebar settings:
Font Styles can also be changed in the sidebar like font color, font family and other font properties.

4. Adjusting the main content area width:

Before knowing the main content area, we need to know the content-wrapper where Sidebar and Blog content reside.
Here is the code for content-wrapper:

#content-wrapper {
/* Main Content Resides here(Blog content & sidebar )*/
position: relative;
padding:0px;
border:1px solid brown;
min-width: 800px;
max-width: 1000px;
width:900px;
margin:0px auto; /* CENTERING CONTENT WRAPPER */
background:#aaa;
}

#main-wrapper { /* Main wrapping */ float: right; margin: 0px; padding:10px; border:1px solid red; display: inline; /* handles IE margin bug */ width:530px;min-width:300px; max-width:700px; 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 */ }
#main { /* Actual Main blog post area settings */ margin: 0px; padding: 0px; width:530px;background: white; border:1px solid #aaa; }

5. Making the sidebar stay to either left or right:

.sidebar-wrapper {
width:300px;
display: inline; /* handles IE margin bug */
float: right;
margin:0px;
padding:10px;
margin-left:30px;
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:green; /* ADDED IN THIS TEMPLATE */
}
Change the float option as shown:
.sidebar-wrapper {
width:300px;
display: inline; /* handles IE margin bug */
float: left; /* ADDED IN THIS TEMPLATE */
margin:0px;
padding:10px;
margin-left:30px;
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:green; /* ADDED IN THIS TEMPLATE */
}

Hope you liked this tutorial. Catch you again with some of them from the Template tutorial series.

—-To be Continued —-