Disqus: Highlight Author and Moderator Comments
Posted 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
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
View more articles by David Kirk
The Conversation
Follow the reactions below and share your own thoughts.
October 27, 2010 at 2:51 pm, Anonymous said:
This is an example of the moderator highlights that we currently have enabled.
October 27, 2010 at 2:54 pm, hepatologist said:
I’m just here for the geeky women. Can you highlight them?
October 27, 2010 at 2:58 pm, Anonymous said:
I’ve enabled that feature. We just have to hope now that one day an actually girly geek shows up to test it.
October 27, 2010 at 2:56 pm, David Kirk - Founder/Editor said:
I just wish we could have disqus detect facebook-enabled moderators.
October 27, 2010 at 2:59 pm, Anonymous said:
If I reply to your comment, I would just be talking to myself.
Doh.
October 27, 2010 at 3:01 pm, Anonymous said:
This is cool!!!!
October 27, 2010 at 3:27 pm, Anonymous said:
Enjoy the power.
February 11, 2011 at 5:06 am, Astro said:
Ok…
February 28, 2011 at 10:47 am, GE-Filter said:
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 !
February 28, 2011 at 10:55 am, Anonymous said:
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.
February 28, 2011 at 11:03 am, GE-Filter said:
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.
February 28, 2011 at 11:21 am, Anonymous said:
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.
February 28, 2011 at 11:29 am, GE-Filter said:
i dont like pain
so i think i user the color variation of the header. thanks for your fast help!
February 28, 2011 at 11:36 am, Anonymous said:
Yeah, I don’t blame you. Thanks for visiting.
May 07, 2011 at 8:40 pm, Guest said:
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!
May 08, 2011 at 1:36 am, Anonymous said:
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.
May 12, 2011 at 8:57 pm, Guest said:
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)?
May 09, 2011 at 11:25 pm, Anonymous said:
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
May 12, 2011 at 11:58 am, Ankur said:
I added the CSS on custom CSS but stil no change. am i doing anything wrong ?
May 12, 2011 at 9:00 pm, Guest said:
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…
February 21, 2012 at 2:36 am, Silvina said:
How to use another avatar for the guests?
February 21, 2012 at 2:51 am, Silvina said:
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?