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

to this

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.

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:

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