Fixing Disqus in the WordPress Twenty Fifteen theme

The new WordPress Twenty Fifteen theme is pretty nice. But if you’ve just activated this theme and you’re using Disqus as a comment system, you might have noticed the comments don’t look right:

 Here’s how I fixed the problem.. 

Update as of 12/23/2014 11:51:16 AM: I’ve done more more work to better integrate Disqus into the Twenty Fifteen theme since I originally created this post..

Basically, Disqus isn’t inheriting the same background color, margin, and padding properties as the rest of the post.

The easiest way to fix it is to install Jetpack. This will give you the ability to have custom CSS in your WordPress theme.

Go to Appearance > Edit CSS:

Then copy/paste the following CSS into the window:

Save it, and take a look at your post again:

MUCH better!

  • Thanks a lot!

  • Nice. Implemented. I also saw the other guy’s comment on reditt and it seems that he was missing the point.

    There was also another instruction, through google search result, but that solution was to add non-css code in function.php – not a wise choice for something that is purely style related.

  • Cool stuff!. I did something similar but by adding the style in a child theme instead. By the way, i didn’t add the “margin: 3% 0 !important;” and it works fine.

    • That’s certainly a possibility. I actually created this solution backwards. I didn’t realize the theme was mobile-first, so I created the wide screen CSS first.. then eventually migrated it all to be mobile first.. and didn’t take the time to make sure it was perfect. :)

  • Pingback: Upgraded to WordPress 4.1 and Twenty Fifteen | Adnan's Den()

  • Thanks a lot Alex… it solves my problems too! :)

  • Pingback: Plugin disqus i szablon twenty fifteen - Code by Quver()

  • Thank U very much for this solution! You make my day few hours longer… :)

  • I have a problem … i added this to my themes main .css because jetack was slowing down my site. at first it worked but all of a sudden it stopped working.. so i checked if the code was still there .. it’s still there but… its not working

  • Works great, thanks!

  • Brilliant! Thank you :)

  • Thanks!

    I noticed that the WordPress comments still seemed a bit narrower than the site content. I played with it a bit, and here’s what I came up with:

    • Awesome! Exactly what I was looking for!

    • Thank you Alex and thank you Joshua!

    • Thanks Joshua!

    • Rhythm

      Thanks Alex and Joshua. Good work.

    • any chance you would know how to fix it on my page https://www.naturalbeautycorner.com/february-love-goodly-lvx-spoiler/ ? please driving me nuts!

      • What are you trying to achieve with the look of the comments in your theme?

        • basically the comments box is stuck right at the bottom under the sidebar at the page bottom, Is there any way to place the comments right underneath the end of the post. I attempted to make the comments box smaller but it still got stuck at the bottom of the page.

          • p.s my theme is not twenty fiveteen theme as you can probably tell

          • I think the div structure of your theme is preventing the comments from appearing where you want them. There might be a way to fix it, but probably not directly with CSS.

            1) Your side bar
            2) Your comments.

          • thank you!!

    • I love you for this. Thank you!!

  • Thanks for posting!

  • Thanks! Exactly what I was looking for!

  • Thanks for this! This worked perfectly!

  • Awesome, it worked! Thanks :)

  • Pablo Quiroga

    Thanks for sharing!

  • Thanks, this helped me.

  • Thank you for taking the time to post this! Fix is awesome and works a treat! Was taking me ages Firebugging it!! Reading your post helped me solve it in 30 seconds!!

  • I’m glad I found your post on this. Saved me a lot of time. There are many ways to address this issue, but yours is probably the simplest and fastest way to fix this issue, and I’m thankful. Cheers!

  • I turned the CSS from @elyon:disqus into a WordPress plugin – so no need to apply custom CSS to your theme, install Jetpack, or any other workaround. Just install the plugin and it enqueues a stylesheet that will style the disquss comment section.

    https://wordpress.org/plugins/twenty-fifteen-disqus-style/

    • Very cool!

    • d8teen

      Thats an overkill

      • What

        • d8teen

          Turning 3 lines of css code in to WordPress plugin.

          • It’s overkill to instal a custom css plugin for 3 lines of CSS

          • d8teen

            But custom css plugin does not limit you to 3 lines.

          • This is for people who aren’t going to know how to do their own CSS which I would contend are 70% of TwentyFifteen users. Users that would prefer a five second solution than installing a CSS plugin and then figuring out what CSS is and how to use it.

  • Thanks! I noticed the odd CSS layout in my Disqus comment, but never really look for a fix until now. Your post really nailed it. Kudos!

  • Works fine.
    Thanks!!

  • Hi, that was a quick and awesome solution. Thank you very much for taking your time to share it with us.

  • Do you have a version for twentyfourteen?

  • Thanks a lot. :)

  • Awesome, these exact lines of code fixed the Disqus formatting. I added them to style.css in a twentyfifteen child theme I had created.

  • Pal

    Perfect solution, just what I needed. Thanks!

  • This still works perfectly, thanks Alex!

  • Well, thank you!!