HomeInternetDisqus: Highlight Author and Moderator Comments

Disqus: Highlight Author and Moderator Comments

With a little CSS love, styling author or moderator comments within the disqus commenting system is pretty easy.

Here at tech-recipes we are huge fans of the disqus commentings system. This is one of the ways we recently tweaked it.

When reading comments, it is very helpful to know who the authoritative figures are. One way to accomplish this is to highlight the comments of authors or moderators. Here is how to customize the css of disqus to do this:

1. Log into Disqus and select your site
2. Select Settings -> Customize -> Custom CSS

customizing disqus

Now, input and save your custom CSS. I’m not going to give a full CSS tutorial here, but these examples should get you started.

The most typical highlight is to modify the moderator’s header:

#dsq-content .dsq-moderator .dsq-comment-header {
background-color:#CEE3F6 !important;
background-image:none !important;
border:1px solid #58ACFA;
}

To edit the comment body:

#dsq-content .dsq-moderator .dsq-comment-body{
background-color:#CEE3F6 !important;
background-image:none !important;
}

To edit the entire moderator comment area:

#dsq-content .dsq-moderator{
background-color:#yellow !important;
background-image:none !important;
}

Change .dsq-moderator to .dsq-special if you want to change the author class instead of the moderator class.

After saving, you’ll have to refresh a page on your disqus-embedded site to see it in action.

David Kirk
David Kirk
David Kirk is one of the original founders of tech-recipes and is currently serving as editor-in-chief. Not only has he been crafting tutorials for over ten years, but in his other life he also enjoys taking care of critically ill patients as an ICU physician.
RELATED ARTICLES

26 COMMENTS

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisment -

Most Popular

Recent Comments

error: Content is protected !!