WordPress.org

Ready to get started?Download WordPress

Forums

Disqus Comment System
[resolved] CSS in Disqus 2012 (14 posts)

  1. mbuk2k
    Member
    Posted 1 year ago #

    Really struggling with formatting the appearance of Disqus 2012, not sure if I'm missing something?

    I want to add padding/margins so that the Disqus box doesn't fill 100% width of my container as it doesn't look very good:

    http://www.thiswasmynight.com/awesom-o/

    I've used Firebug to tweak it and get it looking great using:

    margin-left: 20px;
    margin-right: 20px;
    margin-top: 15px;

    ...but the style sheet used by Disqus is hosted by them, and I can't edit it.

    http://mediacdn.disqus.com/1344463329/uploads/themes/028ee724157b05d04e7bdcf237d12e60/theme.css?1536

    Does anyone have any ideas?

    Thank you

    http://wordpress.org/extend/plugins/disqus-comment-system/

  2. mbuk2k
    Member
    Posted 1 year ago #

    Finally found some syntax that worked, in style.css I used this:

    #disqus_thread {
    margin-left: 25px;
    margin-right: 25px;
    margin-top: 75px;
    }

    Worked a treat

  3. mycurlymane
    Member
    Posted 1 year ago #

    I am also struggling with the width of Disqus. It is currently too far off to the left of my site. You can see this at http://mycurlymane.com.

    I'm not sure how to adjust this with the 2012 version of Disqus. Any help you can lend is appreciated. I'm also not deeply savvy with coding and could use some detailed steps.

  4. mycurlymane
    Member
    Posted 1 year ago #

    Pasting the code above in my CSS Editor seemed to do the trick!

    #disqus_thread {
    width:400px;
    margin-left:25px;
    margin-right:25px;
    margin-top:75px;
    }

    It's still over to the left, but muuuuch better! If I wanted to adjust further, do you have any tips on the numbers I should use/adjust in the code? I'm a bit nervous about tweaking this further.

    Thank you!!

  5. mbuk2k
    Member
    Posted 1 year ago #

    Hi!

    Glad my findings helped someone :)

    Best thing to do if you're unsure about making live changes is to use either Chrome, right click on the Disqus box and go to inspect element or Firefox and install the Firebug add-on to do a similar thing.

    You can then change the values you've set as much as you like, to decide where you'd like it to be positioned. The changes you make this way are only applied to the current session your browser has, i.e. no one else will see you messing about. Once you've found the values you want to use just change them in your CSS.

    The line you're looking for is:

    <div id="disqus_thread">

    Once highlighted, you'll see on the right the CSS changes we've made above.

    I've had a play about, and I'm guessing you want it a bit more central?

    I tried changing the margin-left to 130px which seemed about correct/central, although I can't vouch for this being the best way to "code" this as I'm only fumbling around to be honest!

    Hope this helps!

    Fun site btw!

  6. kndy71
    Member
    Posted 1 year ago #

    I put this in style.css under content and worked perfectly!!! Thank you guys!

    #disqus_thread {
    width:470px;
    margin-left:25px;
    margin-right:25px;
    margin-top:75px;
    }

  7. rajivvishwa
    Member
    Posted 1 year ago #

    What I did to fix is simplet
    Just added #disqus_thread to the single_post selector of theme's style.css

    .single_post, #disqus_thread {
        bla, bla, bla
    }

    So this will match with the themes style whatever theme you use. No need to figure out the padding or width in px.

  8. Felipe Mário
    Member
    Posted 1 year ago #

    Thanks!

  9. armin3000
    Member
    Posted 1 year ago #

    Good, Thanks :)
    How can I customize more inner layer of disqus? for example I want to change font size of comments. I found #document is responsible for this section by using inspect elemnt. now how can I modify "#document"?

    I tried this but it didn't work:

    #disqus_thread #document{
    font-size:13px;
    font-family:tahoma;
    }

  10. armin3000
    Member
    Posted 1 year ago #

    I think I wrote previous code incorrect. however I wrote this code more carefully and it works on disqus "theme.css" in inspect element but it can't override the rules when I'm using them in my style.css:

    #disqus_thread {
    font-size:13px;
    font-family:tahoma;
    }
    .post-content {
    font-size:13px;
    font-family:tahoma;
    }
  11. Dan Norris
    Member
    Posted 1 year ago #

    It may be because the content of Disqus comments is generated inside an iFrame, which you can't edit with a stylesheet that is linked to outside of the iFrame i.e. style.css

  12. armin3000
    Member
    Posted 1 year ago #

    that's right,now how can I solve this issue? the support team told that maybe they bring back this feature again. but the most important issue I'm facing with is "language direction" that causes many problems with my site.
    I'm using a right to left language and new disqus doesn't have option for right to left language.
    in previous disqus it can be solved easily using "direction:rtl;".

    I read somewhere that it's possible to change iframes style using java script even if the iframe loads from another domain. but as I'm not familiar with programming I can't implement

  13. heartbox
    Member
    Posted 1 year ago #

  14. Dan Norris
    Member
    Posted 1 year ago #

    Sorry for my delayed reply. I couldn't find a way to do it. But what I have found if a better commenting plugin called Livefre

    Not only can you edit the css via your own stylesheet, but it has far more functionality out of the box compared to Disqus.
    I know it doesn't answer your question, but it is definitely a contender.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic