Life as Rose

I’m calling this a custom comment for wordpress tutorial, although you could easily take the CSS and apply it to some other comment system, as long as you’re able to manipulate the HTML.

There are a bazillion ways that you can style comments, and this is just one of those ways. I think that the more you style comment areas, the better you get at it, and the more creative you become. This tutorial is for a pretty common speech-bubble type look, but I like it, and I think it never goes out of style

So. Graphics first. I created two gradients that are very similar, just different colours. I saved them as grad.png and grad2.png.

Then I created two arrow things. The colour of these arrows match the bottom of the gradient that they belong to. I called them diamond.png and diamond2.png, because I made them using a diamond brush and then cut off all of the diamond but the very bottom.

FINALLY, I had to get little people icons for my comments. The ones I used are from an adorable set called Web Cartoon – it’s actually just the one user.png icon, and then I edited him and added a hat for the ‘alternate’ version. I tried to turn him into a girl at first but he looked like he was wearing a cheap wig. So I cheated and changed it to a hat. So.. Sorry about the lack of female representation in this tutorial.

NEXT: HTML.
If you’re doing this in wordpress you’re editing your comments.php file. I didn’t think there was much to be explained, but for those of you who aren’t as up-to-speed on wordpress, I included some sidenotes to explain what’s going on.

<?php if ( have_comments() ) : ?> <!-- This only happens if there ARE comments to be seen -->
  <ol class="commentlist">
<!-- For each comment that exists, a <li> tag will be generated with all the comment stuff inside -->
  <?php foreach ($comments as $comment) { ?>
    <li <?php comment_class(); ?> id="li-comment-<?php comment_ID(); ?>">
    <div id="comment-<?php comment_ID(); ?>">
<!-- This is where the comment itself appears -->
    <div class="comment-body"><?php comment_text(); ?></div>
<!-- This is where the comment author information appears -->
    <div class="comment-author vcard">
    <p> Posted by <?php comment_author_link(); ?> on <?php comment_date('F jS, Y'); ?> at <?php comment_date('H:i:s'); ?> </p>
    </div>
    </div>
    </li>
  <?php } ?>
  </ol>
<?php endif; // end have_comments() ?>

This is the bare-bones HTML needed for the comment CSS to work. If you want to include “Your comment is awaiting moderation” notes and other things like that, you’d have to add it in separately

So. The CSS.

I started off by just getting rid of defualty padding and margins. If you’re including this in your design and you’re afraid the default remover will ruin other tags, then you’ll have to add margin:0; and padding:0; to your CSS for the <li> and <ol> separately.

* {
margin:0;
padding:0;
}

I also imported some fonts so that people who don’t have the Teen font-family can still see the custom font for the forms.
@font-face { font-family: Teen; src: url('teen.ttf'); }
@font-face { font-family: Teen; font-weight: bold; src: url('teen-bold.ttf'); }

I then started to work my way down the comment styling:
/* Just get rid of the 01. 02. 03. in front of each comment */
ol.commentlist {
list-style-type:none;
}
/* Add a bit of space between comments so that they're not smooshed together */
ol.commentlist li {
margin-bottom:20px;
}

ol.commentlist li div.comment-body {
background:#96d1ff url("grad.png") 0px 0px repeat-x; /* gives the comment a gradient background */
padding:15px; /* space around edges is always good */
border-radius:15px; /* this gives it a round corner. I didn't include any of the rounded corner css 'hacks' but if you want browsers like firefox to see rounded corners, you should. For now at least. You can find a useful border radius generator here*/
font-family:arial,sans-serif;
font-size:15px;
line-height:150%;
color:#000;
}

/* This sets the 'alternate' comment background. You can tell because it says li.even instead of just li
ol.commentlist li.even div.comment-body {
background:#a7dfc9 url("grad2.png") 0px 0px repeat-x;
}

/* This sets up the speech balloon look. The 'top' of the comment author field has a background of the triangle thing. I pushed it to the right a little so that it's not on the far left edge of the comment */
ol.commentlist li div.comment-author {
background:url("diamond.png") 50px 0px no-repeat; /* 50px from the left, 0px from the top */
padding:10px 0px 0px 30px;
}

/* The 'alternate' look */
ol.commentlist li.even div.comment-author {
background:url("diamond2.png") 50px 0px no-repeat;
}

/* Where the author's info actually goes, plus the little man icon */
ol.commentlist li div.comment-author p {
background:url("user.png") left center no-repeat;
padding:7px 0px 5px 30px; /* 30px from the left so that the author text isn't on TOP of the icon */
font-family:Teen;
font-weight:bold;
font-size:18px;
}

/* getting used to this yet? Alternate man icon...*/
ol.commentlist li.even div.comment-author p {
background:url("user2.png") left center no-repeat;
}

/* ALMOST DONE! This is link styling for the comment authors, both regular & alternate */
ol.commentlist li div.comment-author a {
color:#0073cb;
text-decoration:none;
}

ol.commentlist li div.comment-author a:hover {
color:#3baaff;
}

ol.commentlist li.even div.comment-author a {
color:#468f73;
}

ol.commentlist li.even div.comment-author a:hover {
color:#85c3ab;
}


Done.
Sorry about the huge dump of CSS. If it helps, you can Check out the demo here and view the source instead.

Basically what was done was:

1. The background of the comment is the gradient.
2. The background of the author information is the little speech bubble arrow thing
3. The background of the paragraph tag is the little man icon
4. Everything else is just positioning and padding and pretty colours.

Some notes:

• Read about @font-face here and how you can use custom fonts in your design…
• Read about border-radius here

..Depending on your browser, you may notice that you can’t see the rounded corners in the real-live version. This is because I only used the css3 border-radius, and not the -moz-border-radius or the -webkit-border-radius. Both of these you can use in YOUR version if you choose to.

And I don’t know if I ever made this clear before, but feel free to steal the graphics and such I use in the tutorials if you want to just flat out copy what I’ve done and stick it in your site. I don’t mind, as long as you give me credit for it

And finally: I’m not quite sure where to go next with tutorials and freebies. What do you guys want to see? (Tutorial wise or download wise…)