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!

32 Comments

  1. Webomatica says:

    This is an example comment, styled using CSS *not* in disqus-form.css

  2. Looks good! Very nice styling!

  3. Bryce says:

    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.

  4. Webomatica says:

    good tip, I plan on making another pass and will see if I can override the disqus styles without using !important.

  5. Speedocar says:

    Wow !
    Interesting , thanks for sharing the post and links. Kepp up posting the good work .

  6. Excellent blog, thanks for the share. I'll be a regular viewer

  7. richardz315 says:

    Good post. ive actually been thinking about adding disqus to my own blog

  8. caeious says:

    Can anyone provide an example of whta Bryce is talking about here? I would like to avoide !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?

  9. bible study says:

    nice post, thanks for sharing :)

  10. faber112 says:

    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

  11. brian93 says:

    Very nice, keep it up!

  12. stayhere01 says:

    Can i have more info on this ?

    Regards

  13. EkramPrashanta says:

    i added this to my article site.

    regards
    kailis
    ______________________________________________
    Cheap Aion kinah | Buy Aion Kinah

  14. odelle says:

    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

  15. LukeFr says:

    Amazing but it works at fisrt I can't change my css, but then everything is ok!

  16. max191 says:

    I have discovered and learned much from your blog. Your blog is really good.
    regards
    charcoal grill

  17. Thanx so much for sharing the list bro .. Stumbled your blog..

    Btw, do you think windows movie maker is good option to make videos

  18. thesiets says:

    This is something new that I learn. The blidget pro tutorials just bring a lot of fun.

  19. JohnTey says:

    Great info site..thanks!

    JohnTey
    Giapy Technology World

  20. this living room wall of his living room you who will allow you to live a

  21. I can't work out where to type these lines of css.
    If I type them in the edit box of Wordpress nothing happens.

  22. louiscox says:

    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

  23. audrey159 says:

    This new design is better one.

    Colon Cleanse

  24. smith33jast says:

    I have problems with Internet Explorer 6 and 7. The browser freezes. No problem with Firefox, Opera and Safari.JW has insured that with the version 1.1 the issue would have disappeared, but there is still.However, it is a great idea, especially because DISQUS is a great comments system. We look forward of the improvements!
    Colon Cleanse

  25. Acai Berry says:

    I don't think so that if we change the Discus css it will affect a lot.

  26. sklad says:

    thanks a lot for that amazing post!

  27. thanks for that great post

  28. I like Disqus comment system. I think it's just not an ordinary commenting system. But it's comment system that add more value to our blog..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..

  29. John Lee says:

    Such a nice post DISQUS is a good commenting tool, with this commenting on other social networking sites become very easy.I really recommend using DISQUS for comments on your Wordpress, Blogger and Tumblr blogs..

  30. PLaYeR says:

    I need to change the Disqus comment style. can anybody help???

Please Comment