WP SITES

2785

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

Style Comments In Genesis

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.

default comment list

And here’s an example of what the comments list looks like after adding a background color to the admins comment only.

admin author comment style

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.

Reader Interactions

Comments

  1. 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?

      • 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

          <li class="comment byuser comment-author-braddalton bypostauthor even depth-5" id="comment-183">
<header class="comment-header">
<p class="comment-author">
<div class="comment-content">

          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

            .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;
}

            You can change .bypostauthor to a specific user like this .comment-author-braddalton

          • Thanks 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.

  3. 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.

    • 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.

    • 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:

      .comment-author-admin a:hover {
color: blue;
}
.comment-author-admin a {
color: black;
}
.comment-author-admin {
color: black;
background: #70DBFF;
}

Leave a Reply