[Solved] Help customizing WP Comments

[Raven]

Visual Blade

Hello folks! My goal is for each comment at this time to have the same style…but the most I’ve managed to do is style only single comments based on class/div id’s in the source code outputted from the HTML. Can anyone tell me how to style “every” comment that gets posted?

[noahgelman]

Every comment will have a common class that you can target in your css.

[Chris Coyier]

Are you talking about wanting to change the HTML output of wp_list_comments()? You can do that, it’s just stuff you’ll need to do in your functions.php file. We cover it in the book Digging Into WordPress =)

I should add, you can do a ton of customization through CSS alone and the standard HTML structure. I’ve been able to pull off some pretty hardcore aesthetic changes without touching that markup, proof that the WordPress team did a good job with what comes out of that.

[Raven]

Image

Mock Up
^^ I took a few seconds to draw out what I’d like it to be in a general manner.

Thanks for responding guys. To illustrate a general goal, I’ve outlined what I’d like to customize. Each oval occupying a comment is in general what I want, say to have every comment separated by a rounded border but the same background color per comment.

I know it’s probably simple, just been struggling with it for a few days. If I could, I’d like to only touch the CSS right now as I am still learning WP. Based on the link to the site I provided, can anyone tell me which id/class I need to modify the style of my comments (the common class that each comment shares)?

I know each comment has some unique id, just having trouble finding the common class. At that point customization should be very simple.

[Bob]

As you can see, each comment has the class=”” attribute. Between those “” there are multiple words, but each one has ‘comment’ in it. You can use multiple values for the class attribute, so that’s fine.
Since every class attribute has the value comment, you can target that with:

CSS

.comment { border: 1px solid blue; background-color: yellow; }

You should be able to find out about those rounded corners yourself now :)

[Raven]

Wow….this is so sad!

Thanks a lot Bob, I really don’t understand how I missed that point you made. :(

It’s so easy, now I’m going to make some sweet comment styles, thanks so much. ;)

[Author]

Posts