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!

Categories: Technology :: ::

Related Posts:
Futureworld: When Technology Comes Together
10 Reasons Why I've Decided To Get An iPad
The iPad: "iPod Pro" For Consuming, Not "MacBook Mini" For Creating

Previous Post: Movie Notes: Up
Next Post: WWDC 2009 Predictions