Comment styles will really set your blog apart. It’s something that is all too often overlooked in blog design, but it’s one of those finishing touches that really round out a well-designed WordPress theme. In this article we’ll have you styling your WordPress comments like a pro in 5 minutes.
Let’s start taking a look at the source code of the comments section. The following screenshot is the source for the default comments on my Default WordPress theme:
As you can see, by default, WordPress assigns certain classes to the comments section just to make it easy for you to style it. Here’s an image of what’s displayed, followed by the same image with the important elements outlined:
So, you should be able to see from the two figures above that we just need to reference the ids and classes that wordpress automatically assigns to the comments in our style.css file.
So, using Figure 3 above as a reference, if we want to style the heading that says “3 Responses to ‘An image in a post’ ” so that the text is blue, we’d need to add an entry to our style.css file like so:
|
1
2
3
|
h3#comments { color: blue;} |
Then if we wanted to, say, outline the entire comment section with a big, ugly, red 5 pixel border, we’d add an entry to style.css like so:
|
1
2
3
|
ol.commentlist { border: 5px solid red;} |
As you can see, just by using the classes and ids that WordPress auto-assigns certain elements, you can really control the way comments are displayed. In the future I’ll get a bit more specific and show some examples of what can be done with this technique.
