Customize Disqus WordPress plugin with CSS

I’ve recently added the Disqus plugin to two of my WordPress blogs/sites – encounterthis.com/blog and somethingbeautifulpodcast.com.

Unfortunately I found out Friday morning that the default CSS styling makes reading the comments almost impossible if you’re using a dark/black background. I did a lot of searching and saw suggestions to add a Javascript command to the header file, create an entirely separate CSS file and more. None of them seemed to work for me. I just wanted an easy/non-Java option.

So with some help from my Firefox Web Developer plugin I was finally able to figure out the CSS styling and changed it to my liking.

I just added the following code to my main CSS page for the site:


/* --- disqus css -- */

#disqus_thread {
color: #ffffff;
border-style: 0px solid;
border-color: #cccccc;
padding: 5px;
}

#dsq-content #dsq-comments .dsq-comment-body {
color: #fff;
background-color: #000000;
}

.dsq-reaction-body {
color: #fff;
}

.dsq-reaction-header cite, .dsq-reaction-header span {
color: #ccc;
}

.dsq-reaction-retweets {
color: #ccc;
}

/*--- end disqus css --*/

There may be some duplication here, but for whatever reason, this is what got the styling to work how I wanted it to.

To use this, simply copy and paste it into your sites main CSS file and then make any further customizations.

The key is the CSS class selectors. Once you get those figured out, you can do pretty much whatever styling you want.

See the final result:

As a side note, I’m considering adding Disqus or Intense Debate to this site, but I haven’t come to a conclusion on either one yet.

Anyone have any pros or cons to adding either of the commenting systems? I’d love to know.

Published by

Jonathan Blundell

I'm a husband, father of three, blogger, podcaster, author and media geek who is hoping to live a simple life and follow The Way.

22 thoughts on “Customize Disqus WordPress plugin with CSS”

  1. Dickieman is right, you are a God set! I just finished the theme for my future wordpress blog and I had no idea how to fit Disqus into it.
    ________________
    Mathew Farney – Web Hosting

  2. I think Disqus is a lot better, I just want them to roll out that new social media comments feature.I really liking disqus especially the way it integrates twitter…

  3. Recently, i started using intensedb and it looks good towards improving the comment system of my blog. But i see many people are using disqus in their blogs.

    1. Disqus was becoming a resource hog and wasn’t very dependable. It was down or overloaded quite frequently and it would drastically slow my site load time down. I also didnt see it increasing my comments at all or adding any benefits that I needed so I decided to go without.

  4. I don’t think it works anymore in 2018. Disqus is an loaded in an Iframe. Custom css from your own stylesheet won’t work I believe.

Leave a Reply to AnonymousCancel reply