DISQUS

The Disqus Blog: Custom Css for iframe

  • gerardo · 9 months ago
    It doesn't work for me neither. It just don't add the css to the iframe.
  • Daniel Ha · 9 months ago
    Hi guys,

    I'll take a look into this and update you guys.
  • Infidelesto · 8 months ago
    I'm having the same issue Daniel. The iframe is not recognizing the advised script in the head. Thanks for looking into it.
  • gerardo · 8 months ago
    Thanks Daniel, very appreciated :)
  • indieshows · 8 months ago
    <script type="text/javascript">var disqus_iframe_css = "http://www.my-blog-url.com/disqus-form.css'''";</script>

    For what it's worth, the above code worked for me. I was able to edit my iframe. I had to make the font size smaller to get rid of some ugly scroll bars.

    Did you try adding !important at the end of your css like:
    body {color:#fff !important;}
  • Infidelesto · 8 months ago
    Which style sheet did you add "body {color:#fff !important;}" to? The Disqus-form stylesheet? or the blog's main style sheet?

    I tried adding it to all my stylesheets and still nothing. Has anyone else gotten an external stylesheet to load? Would love to get a resolution on this.
  • indieshows · 8 months ago
    First the code I listed in my post above is incorrect... there is an extra quote at the end that is not needed and could cause errors. Here is the correct code to put in your header:

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

    Make a css file called "disqus-form.css" and put your css code in there. Then include the above code into your site's header (make sure you use your site name instead of my-blog-url.com).

    I added "body {color:#fff !important;}" to the disqus-form.css style sheet. But I also have some in my regular style sheet. Basically anything you want to edit that is in the disqus iframe (so the comment box, submit button, etc) put that ccs code in the disqus-form.css file. If you are trying to edit anything else, like the look of the actual comments, that can go into your regular style sheet... basically if you follow the directions on the following page EXACTLY then it should work...

    http://wiki.disqus.net/CustomCSS

    If you follow the intructions on the above page and it is still not working, then try deleting all your cookies and emptying your cache. I followed the instructions on the page above, but didn't see any changes... got frustrated and turned off my computer. The next day I went to my site and everything was working... so I think my browser just needed to be shut down and restarted for some reason.
  • Infidelesto · 8 months ago
    Indie, thanks for taking the time to help out.

    I've done everything exactly as you suggested.

    -Exact Script (with my URL of course) is added correctly to the head
    -CSS file exists and placed correctly where it should be
    -added "body {color:#fff !important;}" to my disqus-form.css
    -followed directions exactly how the Wiki states
    -I even took the steps to clear my cookies, clear my cache and restart the computer

    All of this hasn't worked. When I look at it using Firebug, it's still pulling the styles from the default Disqus hosted style sheet. I have no idea why it would bypass the call to my external stylesheet.

    You can see an example by viewing the source code from this URL:

    http://infidelsarecool.com/2009/04/13/taliban-g...

    Everything seems to be in place. Can someone from the Disqus team please address this? It's been a few weeks and we've heard nothing on this.

    Thanks!
    -John
  • Jason · 8 months ago
    We've pushed a fix which prevented the disqus_iframe_css override from working with the WordPress plugin.

    I was looking in the CSS file you provided for disqus_iframe_css (http://infidelsarecool.com/wp-content/themes/th...) and noticed that it is referencing the widgets which are outside of the iframe. The styling that you would want to put inside of disqus_iframe_css would be anything that has to do with the reply form.
  • Infidelesto · 8 months ago
    Thanks Jason!

    What about styling the widgets in the sidebar (popular comments/recent/top commenters).

    How would I override the in-line styling of those widgets?
  • Jason · 8 months ago
    To style widgets, you can put the style you have in http://infidelsarecool.com/wp-content/themes/th... on your main page's CSS. These aren't inside of any frame so you are free to style them without using disqus_iframe_css.
  • indieshows · 8 months ago
    I'm sorry, I know that's frustrating. I wish I could help more... I hope someone from Disqus chimes in for you.

    I will say again, it was weird the way mine started working. I spent an entire day trying to change the look of my Disqus section with CSS and then I just gave up. Then, the next day, I got online, and it was like magic! :) The CSS suddenly worked. So I have no clue what's going on.

    Maybe theres some other CSS or script that is conflicting. Come to think of it... that could be it. Your blog could be using another javascript that is conflicting with this javascript:

    <script type="text/javascript">var disqus_iframe_css = "http://www.my-blog-url.com/disqus-form.css";</script>
  • Giannii · 8 months ago
    I will have an answer for you by tomorrow at the latest.

    My sincere apologies,

    Giannii
    DISQUS
    Community Manager
    help@disqus.com
  • Jason · 8 months ago
    For WordPress users: The issue with "disqus_iframe_css" not working is a bug that will be fixed today.