Highlight only author comments in a nested thread

• 

  missfidgety · Member · Sep 17, 2015 at 11:44 pm

  • Copy link
  • Add topic to favorites

  I recently updated the CCS on my blog to highlight my own (author) comments and to place my avatar on the right of my comments instead of the left. Unfortunately, any replies to my comments have the same “author” formatting as my own comments. I’ve been trying everything I can find to change this, but can’t figure it out.

  There is an example in this post:
  http://missfidgety.com/2015/08/03/in-my-dreams-i-can-run/

  Thanks for any help you can give!

  The blog I need help with is: (visible only to logged in users)

• 

  darrellschulte · Member · Sep 18, 2015 at 12:50 am

  • Copy link

  Hello missfidgety,

  Try replacing:

  .bypostauthor .avatar {
      top: 0;
      position: relative;
      float: right
  }

  with:

  #grav-7231396f6c06ce7d636a93bd5ad7a292-1 {
      top: 0;
      position: relative;
      float: right
  }

• 

  thesacredpath · Member · Sep 18, 2015 at 1:56 am

  • Copy link

  @missfidgety, this is a tough one. I’m afraid I’m stumped on this. I’m sure once I get with one of our developers I’ll smack my head and go D’oh! I’m hoping to get with one of them in a few hours.

• 

  darrellschulte · Member · Sep 18, 2015 at 2:12 am

  • Copy link

  @thesacredpath, did my solution not work?

• 

  darrellschulte · Member · Sep 18, 2015 at 3:18 am

  • Copy link

  I see the issue now!

  The IDs need to be unique. @missfidgety is grav-7231396f6c06ce7d636a93bd5ad7a292, but each time she registers a comment, the ID at the end of her Gravatar identifier increments (-0, -1, -2).

  This CSS will handle 10 comments on a post. If you ever go beyond 10 comments, just add more on, incrementing the end value by 1.

  #grav-7231396f6c06ce7d636a93bd5ad7a292-0, #grav-7231396f6c06ce7d636a93bd5ad7a292-1,
  #grav-7231396f6c06ce7d636a93bd5ad7a292-2, #grav-7231396f6c06ce7d636a93bd5ad7a292-3,
  #grav-7231396f6c06ce7d636a93bd5ad7a292-4, #grav-7231396f6c06ce7d636a93bd5ad7a292-5,
  #grav-7231396f6c06ce7d636a93bd5ad7a292-6, #grav-7231396f6c06ce7d636a93bd5ad7a292-7,
  #grav-7231396f6c06ce7d636a93bd5ad7a292-8, #grav-7231396f6c06ce7d636a93bd5ad7a292-9 {
      top: 0;
      position: relative;
      float: right
  }

• 

  thesacredpath · Member · Sep 18, 2015 at 7:20 am

  • Copy link

  Whoops, sorry, I had it open for quite a while in my browser and didn’t refresh the page.

• 

  missfidgety · Member · Sep 18, 2015 at 11:50 pm

  • Copy link

  That worked perfectly for the avatar, thank you! (I never would have come to that on my own, and I’d been tinkering like crazy.)

  How do I achieve the same thing with the background shading? I currently have the following:
  .bypostauthor {
  padding-right: 20px;
  background-color: #fcf9e0 !important;
  }
  But that highlights replies to my comments as well, instead of just highlighting comments that I make.

• 

  darrellschulte · Member · Sep 19, 2015 at 1:18 am

  • Copy link

  I think using threaded (nested) comments makes this a little more difficult. Try this out!

  .comment-author-missfidgety.bypostauthor {
      padding-right: 20px;
      background-color: #fbf6cf !important
  }
  
  .byuser {
      padding-right: 20px;
      background-color: white !important
  }

• 

  missfidgety · Member · Sep 22, 2015 at 10:03 pm

  • Copy link

  That works out fine! The nested comment ends up with my background color around it, but that’s fine by me.

  I really appreciate the help!

• 

  timethief · Member · Sep 22, 2015 at 10:12 pm

  • Copy link

  @darrellschulte
  I see Staff under your name – congrats! :)

• 

  darrellschulte · Member · Sep 23, 2015 at 4:38 am

  • Copy link

  @missfidgety That’s great to hear. I was glad to help!

  @timethief Thank you!