Custom CSS Code for Disqus Comment System

By on Jun 6, 2012 | 20 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;
}

 

The following two tabs change content below.

Ryan J. Rhoades

CEO & Lead Multimedia Producer at Reformation Designs
Ryan & his wife Laura are a media design team based in Salem, OR. They have worked with people from all walks of life: tech giants, authors, speakers, coaches, pastors, students and entrepreneurs. They specialize in many forms of multimedia creation including graphic art and design, video production and social media marketing. They offer many types of design resources for sale and you can buy Ryan's latest book here.

Latest posts by Ryan J. Rhoades (see all)

  • 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

  • Madeinnina

    Hi! Thanks to you guys I Manage to set up the size of the box. Now I m looking for changing the text size and main colors for my Disqus. Sorry fr my English… I am French! Help me please! Tks

  • http://dimp-zone.net/ Dimp

    I use blogger, where do I place this code?

  • drbdanish

    This is exactly what i was looking for, now my disqus comment system looks better. I will discuss about your post in my blog for sure. Thank you my friend.

  • teazean

    i want to know where i should put the custom css ? could you help me? ty..

  • http://www.manofstone.com/ James Stone

    You have a missing semi-colon “#dsq-comments li.dsq-comment {
    margin-top:12px”

  • donna

    Does anyone know if there is a way to remove the social logins and icons that display with “Sign in with”? My company would love to use the disqus plugin on a product help site, but they don’t want company-related comments posting to facebook or twitter or anywhere other than their product help site.