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.
Please subscribe to the Webomatica RSS Feed!
Posted In: Technology
Related Posts:
TV Everywhere, Served Up By The Usual Suspects Blu-Ray: A Bag Of Hurt Haven't Watched All That Many Blu-Ray Movies
Previous Post: Movie Notes: Up
Next Post: WWDC 2009 Predictions
This is an example comment, styled using CSS *not* in disqus-form.css
Looks good! Very nice styling!
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.
Wow !
Interesting , thanks for sharing the post and links. Kepp up posting the good work .
Excellent blog, thanks for the share. I'll be a regular viewer
Good post. ive actually been thinking about adding disqus to my own blog
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?
nice post, thanks for sharing
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
Very nice, keep it up!
Can i have more info on this ?
Regards
i added this to my article site.
regards
kailis
______________________________________________
Cheap Aion kinah | Buy Aion Kinah
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!
I have discovered and learned much from your blog. Your blog is really good.
regards
charcoal grill
Thanx so much for sharing the list bro .. Stumbled your blog..
Btw, do you think windows movie maker is good option to make videos
looking good
This is something new that I learn. The blidget pro tutorials just bring a lot of fun.
Great info site..thanks!
JohnTey
Giapy Technology World
this living room wall of his living room you who will allow you to live a
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
This new design is better one.
Colon Cleanse
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
I don't think so that if we change the Discus css it will affect a lot.
thanks a lot for that amazing post!
[...] From webomatica: [...]
thanks for that great post
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..
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..
I need to change the Disqus comment style. can anybody help???