Webomatica

 

Changing The Disqus CSS

June 7th, 2009

Another post more for my own future reference, but perhaps others will benefit from it. Since redesigning the blog a few months ago, I finally got around to tackling the design of the comments area, provided by Disqus. To see the custom styles in action, just look below this post.

Disqus has a page regarding custom CSS in their wiki, which is pretty much all the information you need, except it could be presented better, which I’ll do here.

Basically, you can override all the Disqus styles in your own stylesheet. Use Firebug to figure out the Disqus styles. You may have use !important to override Disqus’ styles since that stylesheet loads last (just before </head>).

Then we get down the area where the user would type in their comment, and their information, via form fields and submit button. These are all in an iframe, and to provide your own stylesheet for what is contained there, you must use the code:

<script type="text/javascript">var disqus_iframe_css = "http://www.my-blog-url.com/disqus-form.css";</script>

The unclear part about the wiki page is what styles go where. The implication is that all your styles should go in the disqus-form.css. That is incorrect – only the styles applicable to the elements within the iframe go there. All else you can target using your existing stylesheet.

That one bit of info caused me about an hour of WTF. Hopefully this post will save that hour for others.

RSS Feed Please subscribe to the Webomatica RSS Feed!

  • This is an example comment, styled using CSS *not* in disqus-form.css
  • Looks good! Very nice styling!
  • Bryce
    You can avoid using !important if you just use a more specific style definition by adding an ID or two to the beginning. !important can turn your CSS into an arms race.
  • good tip, I plan on making another pass and will see if I can override the disqus styles without using !important.
  • Guest
    Can anyone provide an example of what Bryce is talking about here? I would like to avoid !important if it might turn my CSS into an arms race.

    #dsq-content #dsq-comments .dsq-comment-body { background: #ffffff; }

    In the above example we see 2 IDs and 1 class. Is this an example of adding an ID or two at the beginning?
  • Excellent blog, thanks for the share. I'll be a regular viewer
  • dodly
    i really like your blog its very nice information.
    Check out my new blog
    http://fatloss-plans.blogspot.com/ You can find easy ways to lose weight, fat loss dieting
  • nightrz
    By far the best comment script i have seen . Thanks for sharing


    Best Regards,
    Mickel - Founder
    http://www.yourtvshow.com
  • Good post. ive actually been thinking about adding disqus to my own blog
  • Finally I found this! Thanks a lot. I realy like Disqus but i was not happy with the style it used to appear on my Blog.. Now I can finally change that
  • mina2020
  • Very nice, keep it up!
  • odelle
    You have to read the SuperBlogger documentation, especially the part about MVC templating. In the template folder used by SuperBlogger, there is a CSS file for Disqus in case you need to also change the comments styling.
    masini de inchiriat
  • Amazing but it works at fisrt I can't change my css, but then everything is ok!
  • looking good
  • I can't work out where to type these lines of css.
    If I type them in the edit box of Wordpress nothing happens.
  • Hi, Ive referred to your posting here - http://louiscox.com/wordpress/?p=248

    I have a slightly different situation with regards to Disqus, but thought you might like to know I posted about it, and made reference to you.

    Cheers
  • thanks a lot for that amazing post!
  • thanks for that great post
blog comments powered by Disqus