WP SITES

Log in

Style Comments In Genesis

—

by

Brad Dalton

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.

Comments

22 responses to “Style Comments In Genesis”

  1. homemadehooplah Avatar
    homemadehooplah

    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?

    1. Brad Dalton Avatar
      Brad Dalton

      Hi Chrisy

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

      1. homemadehooplah Avatar
        homemadehooplah

        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?

        1. Brad Dalton Avatar
          Brad Dalton

          Here’s all the classes from the HTML output

          [code]

        2. [/code]

          You could try .depth-1, .depth-2, .depth-3, .depth-4, .depth-5

  1. homemadehooplah Avatar
    homemadehooplah

    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?

  2. Brad Dalton Avatar
    Brad Dalton

    This will style all the post authors comments only including nested comments

    [code]
    .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;
    }
    [/code]

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

  3. homemadehooplah Avatar
    homemadehooplah

    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.

  4. homemadehooplah Avatar
    homemadehooplah

    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.

  5. Brad Dalton Avatar
    Brad Dalton

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

  • Michael Avatar
    Michael

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

  • BILL GRAM-REEFER Avatar
    BILL GRAM-REEFER

    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.

  • Michael Avatar
    Michael

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

    1. Brad Dalton Avatar
      Brad Dalton

      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.

  • Michael Avatar
    Michael

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

  • Michael Avatar
    Michael

    How is it wrong? It is identical to that.

    1. Brad Dalton Avatar
      Brad Dalton

      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:
      [code]
      .comment-author-admin a:hover {
      color: blue;
      }
      .comment-author-admin a {
      color: black;
      }
      .comment-author-admin {
      color: black;
      background: #70DBFF;
      }
      [/code]

  • Michael Avatar
    Michael

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

    1. Brad Dalton Avatar
      Brad Dalton

      Try the code in this post.

      1. Michael Avatar
        Michael

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

        1. Brad Dalton Avatar
          Brad Dalton

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

          Did you use all 3 rules?

          1. Michael Avatar
            Michael

            Yes that is exactly what I have see bottom:

          2. Brad Dalton Avatar
            Brad Dalton

            Your 2nd rule is wrong. Should be:
            [code]
            .comment-author-admin a {
            color: white;
            }
            [/code]

            Try that and see if it works.

    • Leave a Reply

    Join 5000+ Followers

    Get The Latest Free & Premium Tutorials Delivered The Second They’re Published.