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.

  • Anonymous

    This is an example of the moderator highlights that we currently have enabled.

  • hepatologist

    I’m just here for the geeky women. Can you highlight them?

    • Anonymous

      I’ve enabled that feature. We just have to hope now that one day an actually girly geek shows up to test it. 😛

  • http://www.tech-recipes.com David Kirk – Founder/Editor

    I just wish we could have disqus detect facebook-enabled moderators.

    • Anonymous

      If I reply to your comment, I would just be talking to myself.

      Doh.

  • Anonymous

    This is cool!!!! 😀

    • Anonymous

      Enjoy the power.

  • Astro

    Ok…

  • GE-Filter

    hey guys,

    nice information but i have some other smal question too about disqus customize. how you add the star for moderators behind the mods name ? or is this a function from the “old” version of disqus?

    i hope you can help me.

    thanks a lot !

    • Anonymous

      It’s not a customization that I did and I don’t see an option for it in disqus. We are not running a “new-style theme” if that helps.

      • GE-Filter

        oh thnks for the fast reply. i get this information from disqus support.

        Quote: Moderators are only identified in the embed with a change in background color of their comments. However, you may be able to accomplish your desired goal of adding a “Moderator” text behind their name with a bit of custom CSS, though that is not something we officially support.

        So it must be possible but i dont know how to do it. Can you help me? If not its ok then i change the style from the admin header like your tutorial.

        • Anonymous

          I’ve not played with it a bunch but the star here is placed automatically by disqus.

          Certainly, you could play with the background-image part of the css to customize your moderator’s header to do a bunch of neat stuff. You could have a little star in the upper-right hand corner or a moderator’s badge. You could change the background to have an image representing the text you want displayed. It’d obviously be hard to do anything around the actual text itself though.

          You could hack out some javascript to add text and manipulate all the moderator’s posts in a variety of ways. It’d be painful and nasty but likely possible. 🙂

          • GE-Filter

            i dont like pain 😀 so i think i user the color variation of the header. thanks for your fast help!

          • Anonymous

            Yeah, I don’t blame you. Thanks for visiting. 🙂

  • Guest

    Thanks for this, don’t know if you’re still reading the comments, but your script works great for highlighting comments made by a MODERATOR (as designated in the Disqus dashboard area). Wondering if it’s possible to just designate a particular USER as the ‘highlighted’ commenter.

    Basically, I want to give a particular person highlighting without giving them MODERATOR status. I don’t know much about CSS, but should something like this be possible?

    Thanks!

    • Anonymous

      With CSS it isn’t possible. Disqus sets unique classes for users that are moderators so you can use CSS to tweak those classes. All regular users get the same class so there is no way for CSS to be able to tell one regular users from another. Once again, you could do it with some nasty javascript… but I sure wouldn’t want to code it. 🙂

      • Guest

        Thanks
        for the reply. At the end of the day, as I said, I just want to give
        particular people highlighting without giving them MODERATOR powers (because they could then go and delete any and every comment they wanted to.)

        Can you think of any workarounds that could accomplish this?
        Are the only 2 classes that Disqus recognizes “moderator” and
        “non-moderator” (aka ‘user’)? Or are there other classes that I can
        assign (and then have Disqus highlight based on that)?

  • Anonymous

    Certainly, you could play with the background-image allotment of the css to adapt your moderator’s attack to do a agglomeration of accurate stuff. You could accept a little brilliant in the upper-right duke bend or a moderator’s badge.

    hp coupon code

  • http://techeverytime.com Ankur

    I added the CSS on custom CSS but stil no change. am i doing anything wrong ?

  • Guest

    Also, another Q I wanted to ask > are there any Disqus support/community forums you know of? I want somewhere to ask Q’s about functionality, tweaking, etc, but found very little in the way of Disqus-specific forums out there…

  • Silvina

    How to use another avatar for the guests?

  • Silvina

    Sorry, I fixed that… silly question. What is now I want to change the appearance of not the admin comments, but the guests? What is the CSS code to use? #dsq-content .dsq-guest?

  • Anil Sardiwal

    And u yourself do not use Disqus ;p

    • David Kirk

      We used disqus for a long time but eventually decided to switch for several reasons…

      • Michiel

        Hey David, would you mind sharing some of your key considerations? I am trying to decide what comment system to move to and am/was close to picking Disqus. Your comment makes me reconsider that decision though. Thanks in advance 🙂

        • David Kirk

          Disqus was slow compared to the rest of our content. It added several seconds to our pageload. If it had added some functionality for that time, it might have been worth it… but I never saw that our visitors actually gained a lot of function from it. Additionally, it did a poor job keeping our comment database in sync with their version. Thus, if somebody spammed the site hard, I would need to delete it both places. Managing comments is hard enough without having to do double the work.