Custom CSS Code for Disqus Comment System

Posted by on Jun 6, 2012 in Blogging | 14 comments

There are tons of bloggers around the world who make use of the Disqus Comment System.

It is very easy to use and it allows users from multiple platforms (Facebook, Google, Twitter, etc.) to converse all at the same time without having to register a new account.

The only trouble is, getting a customized look for this system that works with your blog can be quite difficult for people who don’t know much about using CSS.

I am one of those people.

I found some custom code over at SiteRehab.com that seems to be a pretty popular bit of code that people use on their pages.

I messed around with that for awhile and was able to generate a CSS theme that is more minimalistic (the one you see below all of my posts) and looks good on sites with white backgrounds.

Feel free to use this on your own page as well — leave a comment if you decide to do so with the link to your site!

#dsq-comments-title h4 {
color:#333;
}

#disqus_thread {
padding:12px;
margin-bottom:-10px;
}

#disqus_thread h4 {
color:#333;

font-family: Helvetica, sans-serif;
font-size:12px;
padding-bottom:.5em;
}

#dsq-content div.dsq-options {
background:none;
padding-bottom:10px;
}

#dsq-comments li.dsq-comment {
margin-top:12px
margin-bottom:10px;
padding:5px;
background:#FFFFFF;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border:0px solid #ccc;
}

#dsq-content div.dsq-post-area {
padding:5px;
background:#F0F0E9;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border:1px solid #ccc;
-webkit-box-shadow: 0px 0px 10px #FFFFFF;
-moz-box-shadow: 0px 0px 10px #ECF40B;
}

#dsq-content .dsq-comment-header {
background:#F5F5F5;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #ccc;
}

.dsq-brlink {
display:none;
}

#dsq-content .dsq-comment-message {
background:#EDEDED;
padding:5px;
margin-left: 15px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

#dsq-content #dsq-authenticate .dsq-login-buttons {
background:none;
background-image:none;
margin-bottom:0;
}

#dsq-content #dsq-form-area .dsq-textarea .dsq-textarea-wrapper,
#dsq-content #dsq-form-area .dsq-post-fields .dsq-input-wrapper {
border: 1px solid #ccc;
}

#dsq-new-post div.dsq-request-user-info {
background:none;
padding-bottom:0px;
}

 

  • http://www.thesoulofashark.com/ Alexander Huynh

    Working on it for my website… not quite sure how I upload or update the changes…

    • http://www.revivalorriots.org Ryan Rhoades

      Log in to your Disqus settings and click the ‘appearance’ tab.

      Make sure the ‘Narcissus’ theme is selected — then paste the above code into the “Custom CSS” field and you should be good to go!

      • http://www.thesoulofashark.com/ Shark Soul

        Thanks Ryan! I appreciate the help!

        • http://www.thatsreallypossible.com/ Glyn Taylor

          I have no custom CSS field :-/

  • thiswasmynight

    Not having much luck with this, it looks like things have changed in Disqus 2012 as I can’t see an Appearance tab :(

    • thiswasmynight

      Finally got it working with the following in style.css:

      #disqus_thread {
      margin-left: 25px;
      margin-right: 25px;
      margin-top: 75px;
      }

      • lambdse

        where do you even put code like this?? (new to Disqus and so confused) My Disqus is just a giant box across the bottom of my page…. I want it to be the same size as my post box! How can I do this???

        • http://patrickkoosman.com/ John Patrick Koosman

          Are you using WordPress? If so, simply edit your theme’s style.css and add:

          #disqus_thread{
          width:XXXpx;
          }

          Where XXX is the desired width. Obviously you can add other properties as mentioned by @thiswasmynight:disqus

  • robbie lan
  • superboarder

    Thanks man i was searching this bit of code. :)

  • David

    Thanks for this, very useful

  • http://ilyakazakov.com/ Ilya Kazakov

    Thank u :-)

  • chubulistic

    i can’t change backgound in discus comment ,

  • helpfulnerd

    Hey Ryan thanks for this CSS. Worked great for me. My issue was that Disqus was stretching entirely across the content area and was touching the right edge and it was a small detail that really bothered me. I placed your CSS (unedited, at least for now) into the Custom CSS box in my Theme Settings and it works great. Thanks for this. You can see it at helpfulnerd.com