• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2785

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

  • Try Premium
  • Log in

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. homemadehooplah says

    July 9, 2016 at 1:28 pm

    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?

    Log in to Reply
    • Brad Dalton says

      July 11, 2016 at 9:18 pm

      Hi Chrisy

      Sorry but i don’t understand exactly what you want? Happy to help if i know the answer.

      Log in to Reply
      • homemadehooplah says

        July 13, 2016 at 10:24 am

        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?

        Log in to Reply
        • Brad Dalton says

          July 13, 2016 at 12:05 pm

          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

          Log in to Reply
          • homemadehooplah says

            July 13, 2016 at 5:07 pm

            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?

          • Brad Dalton says

            July 13, 2016 at 5:41 pm

            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

          • homemadehooplah says

            July 13, 2016 at 6:49 pm

            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.

          • homemadehooplah says

            July 13, 2016 at 6:55 pm

            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.

          • Brad Dalton says

            July 13, 2016 at 8:09 pm

            I still need to work out how to get it to only apply to a specific number of comments.

  2. Michael says

    February 12, 2014 at 10:03 pm

    How could I highlight editor comments, not just the admin role?

    Log in to Reply
  3. BILL GRAM-REEFER says

    October 13, 2013 at 9:17 pm

    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.

    Log in to Reply
  4. Michael says

    October 13, 2013 at 2:06 am

    Well ofcourse. I changed it since your code didnt provide the white font for some reason.

    Log in to Reply
    • Brad Dalton says

      October 13, 2013 at 2:11 am

      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.

      Log in to Reply
  5. Michael says

    October 12, 2013 at 5:12 pm

    I just changed it to a light blue instead. Do you know how to edit it so that every post author could be highlighted?

    Log in to Reply
  6. Michael says

    October 12, 2013 at 5:05 pm

    How is it wrong? It is identical to that.

    Log in to Reply
    • Brad Dalton says

      October 13, 2013 at 2:05 am

      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;
      }
      Log in to Reply
  7. Michael says

    October 12, 2013 at 3:37 pm

    Was talking to you over at studiopress. How do I change author comment text to white in this green background?

    Log in to Reply
    • Brad Dalton says

      October 12, 2013 at 4:28 pm

      Try the code in this post.

      Log in to Reply
      • Michael says

        October 12, 2013 at 4:30 pm

        That is the code I tried. Gives me black font.

        Log in to Reply
        • Brad Dalton says

          October 12, 2013 at 4:36 pm

          Strange because that’s exactly what i used to create the screenshot which displays white text.

          Did you use all 3 rules?

          Log in to Reply
          • Michael says

            October 12, 2013 at 4:40 pm

            Yes that is exactly what I have see bottom:

          • Brad Dalton says

            October 12, 2013 at 5:03 pm

            Your 2nd rule is wrong. Should be:

            .comment-author-admin a {
            color: white;
            }

            Try that and see if it works.

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.