Style Blogger Elements With Colors | Mission 17

Image may be NSFW.
Clik here to view.Previously, we saw how to add threaded comment system in Blogger. Today, it is something totally different. It is time to focus on designing the template with only colors. We are not going to use any background images to color the elements, but only simple plain hex color codes to achieve some beautiful effects and styles. We have tried various styles and customization to fit the elements nicely together. One of them is realigning the footer to get glued with the main blog area.

Note: This template is v1.2 since, there has been many changes and looks more professional.

PREVIOUS MISSION – Mission 16: Adding threaded comments in Blogger.

Let’s see how we went about doing all these changes one by one.

Here is the demo and screen shot before proceeding further.

Screenshot-

Image may be NSFW. Clik here to view.

click to expand

MISSION 17 OBJECTIVES:

1. Recoloring the header navigation.
2. Adding a new background to header.
3. Centering the header title text link.
4. Styling the post title with CSS3
5. Styling the post body links.
6. Adding a comment icon to comment link.
7. Realigning a sticky sidebar and coloring the elements.
8. Coloring the footer and the links in footer.

EXPLANATION:

Note: The background for the complete body of the template has been set to null by changing in the CSS. 
The colored ones in the below codes are the codes changed in the new template.

1. Recoloring the header navigation

CSS:
.topbar{margin:0px auto;height:39px; line-height:13px; background:#DFBE79;}

#nav li a
{
   font-family:Arial;
   font-size:12px;
   text-decoration: none;
   float:left;
   padding:10px;
 background-color: #DFBE79;
color: #0A0A0A;
font-weight: bold;
}

2. Adding a new background to header

Image may be NSFW.
Clik here to view.

Added a new seamless cloud background, below is the CSS

CSS:
#header-wrapper {
/* Header Wrapping */
height:100%;
padding: 0px;
width:100%;
margin:0px auto;
background: url('http://1.bp.blogspot.com/-HmS1GavUczM/UHAJJL_dUnI/AAAAAAAAFEo/Lr70yFO4n2E/s400/clouds.jpg') repeat-x;
border-top:5px solid #2a769c;
border-bottom:5px solid #2a769c;
}

Background from #header has been removed.

3. Centering the header title text link

CSS:
#header {
/* Main header settings */
height:100px;
background:transparent;
font-family:"Times New Roman", Times, serif;
padding:10px 0px 10px 10px;
margin: 0px auto; /* CENTERING HEADER */
min-width: 800px;
max-width: 1000px;
text-align:center;
}

#header h1 {
/* Header Title Text Settings */
display: block;
margin-top:10px;padding:0px;
color:#444;
font-size:35px;
}

#header h1 a {
color: #444;
text-decoration: none;
font-family: Impact, Charcoal, sans-serif;
}

#header h1 a:hover {
text-decoration: none;
color:#B8805B;
}

4. Styling the post title with CSS3

Image may be NSFW.
Clik here to view.

CSS:
h1.post-title {
height:25px;
margin:0px 0px 6px 0px;
border-bottom:1px solid #aaa;
line-height:25px;
}

.post h1 {
padding: 8px 0px 8px 10px;
color: #86BD4A;
text-decoration: none;
font-size: 18px;
background: #3C3C3C;
border-radius: 8px; /* webkit */
-moz-border-radius: 8px; /* Firefox */
 -webkit-border-radius: 8px; /* Safari, Chrome */
height: 25px;
line-height: 25px;
border-right: 5px solid #1ED2EB;
}

.post h1 a, .post h1 a:visited {
font-variant: large-caps;
text-decoration: none;
background:transparent;
color: #F1AD97;
}
.post h1 a:hover{
color: #E0965B;
}

We have used border-radius property to style the borders of the post title with round corners. It has been colored with RED in the code.

5. Styling the post body links

Image may be NSFW.
Clik here to view.

CSS:
.post-body a{
color: #696363;
background: #ECF0BE;
border-bottom:1px dotted #444;
text-decoration: none;
}
.post-body a:hover{
color:#444;
text-decoration:none;
}

6. Adding a comment icon to comment link And realigning the comment link

Image may be NSFW.
Clik here to view.

CSS:
a.comment-link {
/* ie5.0/win doesn't apply padding to inline elements,
so we hide these two declarations from it */
padding-left: 0px;background:  url('http://4.bp.blogspot.com/-SwXsiNGKj-E/UHAqkEAPfXI/AAAAAAAAFHA/g6KIblYmvbo/s1600/small-chat-icon.png') no-repeat;
color: #D83D3D;
margin-top: -40px;
margin-right: -34px;
line-height:26px;
height:32px;
width:32px;
border:1px #fff;
text-align:center;
font-size:15px;
}

Realignment of the comment link:
margin-top: -40px;
margin-right: -34px; 

7. Realigning a sticky sidebar and coloring the elements in Sidebar

First, we change the background color of the content-wrapper using the below CSS:

CSS:
#content-wrapper {
/* Main Content Resides here(Blog content & sidebar )*/
margin: 0 auto;   /* Centering the Blogger Layout(Important)*/
overflow:auto;
background: #C3E7D1;
width:997px;
border-top: 6px solid #8C9E8B;
border-bottom: 6px solid #8C9E8B;
}

Second, we add a border to the right of the main-wrapper using the below CSS:

CSS:
#main-wrapper {
/* Main wrapping */
float: left;
padding:10px;
display: inline; /* handles IE margin bug */
width:640px;
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 */
position:relative;
background:#fff;
border-right: 10px solid #8C9E8B;
}

Third, we realign the sidebar to align or stick with the main-wrapper using the below CSS:

CSS:
.sidebar-wrapper {
width: 300px;
display: inline; /* handles IE margin bug */
float: left;
margin:0px 7px 10px -20px;
padding:10px;
position:relative;
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 change the float from right to left and change the right margin to -20px to go in negative side.

Fourth, we keep the same color as that of the main-wrapper right 10px border for the sidebar1 background using the below CSS:

CSS:
#sidebar1 {
background: #8C9E8B;
}

The color of the border and background color of sidebar is same with #8C9E8B

Fifth, coloring the other elements of the sidebar using the below CSS:

CSS:
#sidebar1 .widget {
border: 1px solid #82CFE7;
padding: 4px;
margin-bottom: 6px;
background: #E1EBCD;
/* Common Sidebar Widget Settings Here */
}

#sidebar1 .title{padding-left: 5px;
margin-bottom: 3px;
border-left: 5px solid #444;
font-family: "Comic Sans MS", cursive, sans-serif;
background: #C28868;
color: white;}

.sidebar h2 {
padding-left: 5px;
margin-bottom: 3px;
border-left: 5px solid #444;
border-right: 5px solid #444;
font-family: "Comic Sans MS", cursive, sans-serif;
background: #C28868;
color: white;
height: 26px;
line-height: 26px;
border-radius: 6px;
-moz-border-radius: 6px; /* Firefox */
 -webkit-border-radius: 6px; /* Safari, Chrome */

}

.sidebar a, .sidebar a:visited {
/* LINKS IN SIDEBAR */
color: #BB2184;
}

8. Coloring the footer and the links in footer

For footer background:

CSS:
#footer-wrapper {
overflow:auto;
background: #E7E3AE;
width:997px;
margin:0px auto;
display:block;
}

CSS:
#footer h2{margin: 3px;
padding-left: 5px;
margin-bottom: 3px;
border-right: 4px solid #91BAC2;
border-left: 4px solid #91BAC2;
font-family: "Comic Sans MS", cursive, sans-serif;
background: #8D766A;
color: white;
height: 24px;
line-height: 24px;
border-radius: 6px;

-moz-border-radius: 6px; /* Firefox */
 -webkit-border-radius: 6px; /* Safari, Chrome */

}

For Footer links:

CSS:
#footer a, #footer a:visited{
color: #154A50;
border-bottom: 1px dotted black;
background: white;
}

#footer a:hover{
color: #d9c564;
border-bottom: 1px dotted #fff;
}

That’s it!! We achieve the new template with some beautiful effect. We will learn more in the next tutorial.
Stay tuned for the next weekend.

Enjoy for now!

— to be continued —

Image may be NSFW.
Clik here to view.