Style Your Wordpress Comments
The most important aspect of a blog is your readers. Without them, you’re only talking to yourself.
The main route of communication between you both is the comments under each post, so why not pretty them up a bit?
In this article I’ll show you the various CSS styles you need to change, and I’ll also explain how I added the custom background when I reply to comments on my own articles.
Styling the Comment Boxes
All the changes we need to make for the comment boxes are in your stylesheet. From inside your Wordpress control panel, navigate to Presentation > Theme Editor and select Stylesheet from the right hand menu. If you’re editing your Wordpress files by hand, your stylesheet is located in your_wordpress_folder/wp-content/themes/your_theme/style.css
The first change we need to make is to the class .commentlist li. If you’re editing the Kubrick theme, the stylesheet is quite large so I suggest hitting Ctrl+F and searching for it.
This class controls all the even comments (2, 4, 6 etc). It’s up to you to style it how you want but here’s what I used:
-
.commentlist li {
-
margin: 15px 0 3px;
-
padding: 5px 10px 3px;
-
list-style: none;
-
background: #666666;
-
border-top: 1px solid #FFFFFF;
-
border-bottom: 1px solid #FFFFFF;
-
}
If you save / upload those changes and check them out, every even comment on a post should have your style.
Styling the odd comment boxes is even easier, as they inherit all the values of the even comments so we just need to change their colour.
Add the following underneath the class we just edited:
-
.commentlist .alt {
-
background: #333333;
-
}
If you save and check again you should see your finished comment boxes in all their styled glory!
Making Your Own Comments Stand Out
When replying to comments on your blog, it’s good to let people know it’s really you. And what better way to do that than with your very own comment background!
This is my own method so I made it as simple as I could. As I’m the only person who posts articles on this blog, I told Wordpress to only apply the custom comment box if the post author wrote the comment. Unfortunately if your blog has multiple contributors and you want them all to have their own background this won’t work for you but let me know if you’d like to see it and I’ll write it up in another post.
There are two things we need to do. First, we need to create a new class for the admin comment background. We then need to check to see if the post author wrote the article and if so, apply our new class.
Back in your stylesheet, create the class .commentlist .admin_comment. For my own comment box, I just added a background image:
-
.commentlist .admin_comment {
-
background: #666666 url(‘images/admin_comment_bg.jpg’) top right no-repeat;
-
}
With our comment box ready to go, we just need to tell Wordpress when to use it. From Presentation > Theme Editor, click on Comments on the right (the file is located in your_wordpress_folder/wp-content/themes/your_theme/comments.php).
I suggest taking a backup of this file before editing as it can be easy to break your site if you delete something by accident. Start scrolling down the page until you find the line:
And replace it with the following:
-
<?php if ($comment->user_id == $post->post_author) { ?>
-
<li class="admin_comment" id="comment-<?php comment_ID() ?>">
-
<?php } else { ?>
-
<?php }; ?>
You now have your very own comment box, make sure you put it to good use!
August 14th, 2008 at 4:41 pm
Thanks! That was helpful