How-to: Customize blogger comments

I figure I would do a blogger tutorial, since I haven't had much beauty-related posts to do. This is something decently easy to do (assuming you have a general understanding of html/css) and really can add a personal touch to your blog (:

HOW TO CUSTOMIZE YOUR BLOGGER COMMENTS

I'll use the comment format from the "TicTac Blue" template since I find it the most readily customizable. You can refer to the image below.














































I'll explain each part of the comments code you can customize. First, you'll have to go to: Dashboard > Layout > Edit html

Scroll until you find the section of code that starts with:
/* comment styles */

This is where all the editing will take place.
This should be the first section of code:

#comments {
padding: 10px 10px 0px 10px;
font-size: 85%;
line-height: 1.5em;
color: #666;
background: #eee url(http://www.blogblog.com/tictac_blue/comments_curve.gif) no-repeat top $startSide;
}

Padding is how much space is around the comment text. I change mine to all 0px. More padding will push the text into a smaller space.

Font-size alters how big the comment text will be. I change the percent to a pixel (#px) size.

Line-height alters the height of the text. I also change this to pixel size. Usually line height would be the same as the font size unless you want more space between each line of text.

Color alters the color of the comment text. You can use a hex code or color name. Use http://www.colorpicker.com/ to get hex codes.

Background alters well, the background! In the picture you'll see that the background is light gray (#eee) along with a url for a background image (the curve at the top). You can either use a solid color for your background (delete from "url" on). Or use another image url for a background.

I also add the text-align property so you can left, right, center, or justify-align your text.

***You can add text attributes anywhere you want to edit the look of the text.
For example:
text-align: left;
text-transform: lowercase;
line-height: 12px;
letter-spacing: -1px;

This should be the second section of code:

#comments h4 {
margin-top: 20px;
margin-$endSide: 0;
margin-bottom: 15px;
margin-$startSide: 0;
padding-top: 8px;
padding-$endSide: 0;
padding-bottom: 0;
padding-$startSide: 40px;
font-family: "Lucida Grande", "Trebuchet MS";
font-size: 130%;
color: #666;
background: url(http://www.blogblog.com/tictac_blue/bubbles.gif) no-repeat 10px 0;
height: 29px !important; /* for most browsers */
height /**/:37px; /* for IE5/Win */
}

Comments H4 is the Comment header. In the picture, it's "3 Comments" and "Post a comment"

Margins will push the block of comment text up, down, left, or right (I don't use $endSide, I replace with left and right). They won't squish the text like padding does.

Padding attributes can be edited accordingly. Again, I don't use $endSide. I replace with left and right.

Font-family is the font the header will be in. I only use one. "Georgia" for example.

Font-size alter the header size. Again, I usually change to pixel size.

Color will alter the header color.

Background (in this case, the little speech bubbles) can be changed with a different image url. It's best if the image is around the same height as the text line-height. You can delete the code starting with "background" if you don't want one.

Remember, you can add whatever attributes you want.

The next two sections of code should be:

#comments ul {
margin-$startSide: 0;
}

#comments li {
background: none;
padding-$startSide: 0;
}

UL stands for Unordered list. LI stands for List item. I just take those two sections of code and replace it with this:

#comments ul {
margin-left: 0;
}

#comments li {
background: none;
padding-left: 0;
}

The next section of code deals with the Comment body.

.comment-body {
padding-top: 0;
padding-$endSide: 10px;
padding-bottom: 0;
padding-$startSide: 25px;
background: url(http://www.blogblog.com/tictac_blue/tictac_blue.gif) no-repeat 10px 5px;
}

Padding attributes can be edited accordingly.

Background (in this case, the little blue bullet) can be changed with a different image url. It's best to use a small image. You can delete the background code if you don't want one. You can replace it with a solid color, just add: display:block; to the code. You can also add borders: border: 1px solid #000000; for example if you want a border around the comment body.

You might have to edit the padding and background attributes according to the image you use.

The next section of code deals with the amount of space there is below the comment body:

.comment-body p {
margin-bottom: 0;
}

Margin-bottom alters the space below the comment and the comment footer... a higher number = a bigger space.

The next section of code customizes the Comment author; the link to the person who posted the comment.

.comment-author {
  margin-top: 4px;
  margin-$endSide: 0;
  margin-bottom: 0;
  margin-$startSide: 0;
  padding-top: 0;
  padding-$endSide: 10px;
  padding-bottom: 0;
  padding-$startSide: 60px;
  color: #999;
  background: url(http://www.blogblog.com/tictac_blue/comment_arrow_blue.gif) no-repeat 44px 2px;
  }

Margins and padding attributes can be edited accordingly.

Color alters the link color of the comment author. You can add more text attributes to this if you want.

Background (in this case, the little orange blogger symbol) can be changed with a different image url. It's best to use a small image. You might have to mess around with the pixels depending on the background image you use.

The next section of code deals with the Comment footer; the date the comment was posted.

.comment-footer {
  border-bottom: 1px solid #ddd;
  padding-bottom: 1em;
}

Border-bottom will change the line separating each comment. You can delete this line of code if you don't want one.

Padding attributes can be altered accordingly. You can add more text attributes if you wish.

The last section of comment customization code deals with Deleted comments:

.deleted-comment {
  font-style:italic;
  color:gray;
  }

This is the way the text that says "Comment has been deleted by..." will look. In this case, it's italic and gray font. You can change this and add attributes if you wish.

This is how I customized my comments to look using the Tictac Blue comments template as a base.



I hope this tutorial helped clear up some of the basics of customizing blogger comments (: If not, please let me know and I'll try to explain a little better! This is pretty uncharacteristic of me to give away my personalized coding so freely, but if you would like to learn off my comment CSS, here is my coding:

/* Comments
----------------------------------------------- */
#comments {
padding: 0px 0px 0px 0px;
color: #222222;
text-align:justify!important;
background: #ffffff url() no-repeat top left;
}


#comments h4 {
margin-top: 10px;
margin-right: 0;
margin-bottom: 15px;
margin-left: 0;
padding-top: 8px;
padding-right: 0;
padding-bottom: 0;
padding-left: 10px;
font-family: "Georgia";
font-size: 130%;
color: #D88080;
background: url() no-repeat 10px 0;
height: 29px !important; /* for most browsers */
height /**/:37px; /* for IE5/Win */
}


#comments ul {
margin-left: 0;
}


#comments li {
background: none;
padding-left: 0;
}


.comment-body {
padding-top: 0px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 15px;
background: url(http://i44.tinypic.com/kezryc.gif) no-repeat 0px 5px;
}


.comment-body p {
margin-bottom: 5px;
}


.comment-author {
margin-top: 4px;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
padding-top: 0;
padding-right: 10px;
padding-bottom: 0;
padding-left: 40px;
color: #000;
background: url(http://i43.tinypic.com/35dc16v.gif) no-repeat 25px 2px;
}


.comment-footer {
border-bottom: 0px dashed #FEFEEE;
padding-bottom: 10px;
padding-top: 10px;
text-align:right;
}


.deleted-comment {
font-style:italic;
color:gray;
}

This may make things a little more clear as to what I've replaced and added from the original coding. If you want to customize your comments similarly to mine, just replace all your original comment coding with my code and edit away! Good luck & have fun (:

---