CHouseLive

Styling the comments section of your blogger post

Blogger is an easy blogging platform from which to launch your first blog. But what happens when you get tired of the standard themes and want to overhaul the look on your own terms? The answer is … create your own theme! Today we are going to look at how we can change the standard style of the comments section from this


image

to this

image

The Code

In order to style the comments we need to know how they were coded.  Using the Firefox add-on, firebug, we can see analyse the code and find out what elements need to be styled.

image

Using this information we can then use CSS to style the comments.

CSS

#comments{
  margin-top:40px;
}

#comments h4,
.comment-form h4{
  color:#990000;
  font-size:1.3em;
  font-weight:normal;
  margin:0;
  padding:5px 0;
  border-bottom:3px double #ccc;
}

#comments dl{
  margin:10px 0;
}

#comments dt{
  float:left;
  -moz-box-shadow: 2px 2px 2px #666;
  -webkit-box-shadow: 2px 2px 2px #E6E6E6;
  box-shadow: 2px 2px 2px #E6E6E6;
  border:1px solid #E6E6E6;
  padding: 5px;
  text-align:center;
  width:75px;
  margin:0 20px 0 0;
  background-color:#990000;
  color:#fff;
}

#comments dt a{
  color:#fff;
}

#comments dt a:hover{
  text-decoration:underline;
}

.comment-body{
  padding:0;
  margin:0;
  font-style:italic;
  float:left;
  width:500px;
}

.comment-footer{
  clear:both;
  font-size:.8em;
  color:#000;
  border-bottom:1px dashed #ccc;
  margin:0 0 15px 0;
  padding: 0 0 5px 0;
  text-transform:uppercase;
  font-style:normal;
  text-decoration:none;
  text-align: right;
}

.comment-footer a{
  color:#000
}

And the result:

image

Using Firebug and a little CSS it is possible to style any element of the blogger template.

2 comments:

Jan Skácelík said...

Man, you are great, you are the only one who have something about this, I googled like a mad and did not found anything! Thank you!

vastav reddy said...

see my blog.....it's working.....
www.zeropollution.blogspot.com

Post a Comment

Copyright CHouseLive - 2010 - All Rights Reserved