In this simple tutorial for beginners, i’ll provide several small blocks of CSS code which you can use to change the background color of all replies to comments made by the administrator.
Here’s what the default comments list looks like on the new Lifestyle Pro child theme by StudioPress.
And here’s an example of what the comments list looks like after adding a background color to the admins comment only.
All you need to do is add this CSS code near the end of your child themes style.css file before the Media Queries start.
.comment-list .bypostauthor > article,
.comment-list .children > .bypostauthor > article {
background: red;
padding: 25px;
}
.comment-list .bypostauthor > article,
.comment-list .children > .bypostauthor > article p,
.comment-list .children > .bypostauthor > article a {
color: white;
}Note: There are other ways to highlight any authors comments however this is the easiest and won’t be lost when you update Genesis.
Hey! Had a quick question –
I see this post was originally from 2013. I’m not sure if things have changed, but my code doesn’t have a selector for .comment-author-admin – however, it DOES selector for .bypostauthor.
I’ve made some adjustments in my CSS to .bypostauthor, but the problem I’m having is that all nested comments below the author comment are also inheriting the customization of .bypostauthor. And if I try to target those posts specifically, it also means that if I reply to a reply (So, imagine this comment chain: poster, admin, poster, admin) the second admin post loses the formatting of .bypostauthor as well. It doesn’t seem like Genesis come with a way for me to specifically target non-admin posts for customization.
Is there a clever way around this that I just can’t think of? Or would I really need to code some convoluted scheme of tags to target specific instances that could be upwards of 5 comments deep?
Hi Chrisy
Sorry but i don’t understand exactly what you want? Happy to help if i know the answer.
Thanks Brad 🙂
Essentially, imagine a comment string that is nested 5 replies deep, and looks like this:
Comment 1: Reader
– Comment 2: Admin
– – Comment 3: Reader
– – – Comment 4: Admin
– – – – Comment 5: Reader
When I use .bypostauthor to change the style for admin comments, these styles end up not only applying to Admin comments but also to every comment nested below it. So using the above example, Comment 1 is in standard format, but Comment 2, Comment 3, Comment 4, and Comment 5 all end up inheriting the .bypostauthor style because they’re nested below it.
Another example:
Comment 1: Reader
– Comment 2: Reader
– – Comment 3: Reader
– – – Comment 4: Admin
– – – – Comment 5: Reader
In this case, Comment 4 and Comment 5 would have the same formatting as .bypostauthor.
Ideally, I’d like ONLY admin comments to have this formatting, but because WordPress/Genesis doesn’t seem to grant a special style for non-admin posts, I’m kinda at a loss. I can’t figure out a way to target admin posts but exclude the non-admin posts nested below them.
For now I’ve made changes in my WordPress Discussion settings to only allow comments to nest 2 deep, but I’d really rather allow them to nest up to 5 deep to encourage more discussion.
Is this possible?
Here’s all the classes from the HTML output
You could try .depth-1, .depth-2, .depth-3, .depth-4, .depth-5
Can you write out a few examples for me? Sorry, I feel like I’m still missing something crucial (and probably really simple) here 🙁 I’ve tried defining more tags to better target users vs author but the problem still persists. Once there’s an author comment, every comment below it picks up the same formatting. And if I manage to fix that, then .bypostauthor no longer works for comments that nested deeper.
If I had a comment structure like the one below, how would I use the depth tags to target ONLY the admin posts and not the reader posts? And how could I define it so that if the order of the comments were different, the style would still work?
Comment 1: Reader
– Comment 2: Admin
– – Comment 3: Reader
– – – Comment 4: Admin
– – – – Comment 5: Reader
In my previous attempts, I haven’t been able to separate the two – it’s like once the .bypostauthor is defined, everything below it inherits the style no matter how hard I try to target out of it. Maybe this is just an issue with lists and formatting?
This will style all the post authors comments only including nested comments
You can change
.bypostauthorto a specific user like this.comment-author-braddaltonThanks for the response Brad!
Sadly, even with your CSS above, anything nested below a comment tagged with .bypostauthor inherits the styling.
Is there a way to add a custom class name to non-admin comments? At this point, I’m starting to think that’s the only way I have around this.
Okay, I just tried your code (and cleared my cache afterwords) and it works!! Thank you SO much 😀 😀 😀 This is a HUGE relief! I spent a week struggling with it.
I still need to work out how to get it to only apply to a specific number of comments.
How could I highlight editor comments, not just the admin role?
So one could apply correspnding colors similarly to “contributor” “subscriber”, “guest”
How would identify a comment from unregistered user/…what would be the correct term for that in the CSS model provided?
thanks.
Well ofcourse. I changed it since your code didnt provide the white font for some reason.
The code clearly includes the white color for font.
I think the reason it didn’t work for you was because you may have manually modified the code rather than copy and paste the entire block.
You’ll also need to paste the code before your Media Queries near the end of the file and not at the ab solute end of file.
I just changed it to a light blue instead. Do you know how to edit it so that every post author could be highlighted?
How is it wrong? It is identical to that.
No its not the same.
Check the second line in the 2nd rule and you’ll see its different.
This is your code at the end of your style sheet:
Was talking to you over at studiopress. How do I change author comment text to white in this green background?
Try the code in this post.
That is the code I tried. Gives me black font.
Strange because that’s exactly what i used to create the screenshot which displays white text.
Did you use all 3 rules?
Yes that is exactly what I have see bottom:
Your 2nd rule is wrong. Should be:
Try that and see if it works.