Disqus: Highlight Author and Moderator Comments

   Posted October 27, 2010 by David Kirk in Internet

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.

 

About 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.
View more articles by David Kirk

The Conversation

Follow the reactions below and share your own thoughts.