How To Style Post Author Comments In Oxygen Builder

I use the native WordPress commenting system. I've tried using other systems like JetPack, WPDiscuz, Disqus, CommentLuv and so on, but I always end up coming back to native WordPress comments.

Making Changes To WordPress Comments

WordPress' comments are a bit boring, so I make small CSS and code changes to them to liven them up a little. For example,

  • I might change the Leave A Reply text to Enjoy The Article? Leave A Comment
  • I might make the avatars round instead of square
  • and I might style post author comments to have a line down the left hand side so that they stand out from reader comments.

Problems When Styling Post Author Comments

If you have a lot of comments under a particular post, and you've set up those comments to be nested, then there will be comments and sub-comments as more and more people add their comments, and the post author responds.

So when styling post author comments, you have to be careful not to also style comments made by readers when they appear as sub-comments to the post author's comments. Your CSS has to target post author comments and no-one else's.

The CSS below works to only highlight the post author's comments.

CSS For Highlighting Post Author Comments

This CSS below adds a vertical line at the left hand side of the comment if it was made by logged in user who is also the post author.

The CSS below additionally adds a background colour and border to both the name of the comment author and the comment text, if the comment was made by a logged in user who is also the post author.

I add extra CSS code using Microthemer because it's fabulous. But you can add CSS any way you like.

Does This CSS Work In Non Oxygen Sites?

If you're not using native WordPress comments on Oxygen Builder, and the code does not work in your WordPress theme, perhaps check the precise spelling of the class names on your theme, and change the code accordingly.

An Example

I don't have many comments on this site, so I cannot demonstrate the CSS working fully. But if you visit one of my client sites belonging to Dr Susanna McIntyre, there are plenty of comments there.

In this client's case the background colour of her comment content as well as her name is styled in addition to placing a line down the left-hand side of the comment content.

Comments are closed.

linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram