How to customize Disqus with the Twenty Fifteen theme

Disqus in WordPress.

I used to have the Disqus plugin on my blog, but nowadays I prefer the WordPress builtin comments.

Disqus is a service for web comments and discussions. Disqus makes commenting easier and more interactive, while connecting websites and commenters across a thriving discussion community.

The Disqus for WordPress plugin seamlessly integrates using the Disqus API and by syncing with WordPress builtin comments.

Disqus doesn’t fit with WordPress Twenty Fifteen theme.

The problem I had with the plugin was that it didn’t quite fit my theme.

That is not really the ‘clean, blog-focused, and designed for clarity look’ you’re looking for in the Twenty Fifteen theme‘.

Quick fix Disqus for Twenty Fifteen theme.

Before we continue, I’d like to give you the full CSS to customize Disqus for Twenty Fifteen. You can copy and paste this in your child theme CSS.

In the next paragraph I’ll go through the configuration in detail.

#disqus_thread {
    padding: 3.3333% 7.6923%;
    background-color: white;
    margin: 3% 0;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
}

@media screen and (min-width: 38.75em) {
    div#disqus_thread {
        padding: 3.3333% 7.6923%;
        margin: 3.3333% 7.6923%;
    }
}

@media screen and (min-width: 59.6875em) {
    div#disqus_thread {
        padding: 3.3333% 8.3333%;
        margin: 3.3333% 8.3333%;
    }
}

This is how your website will look when you apply the above CSS. Much better, the comment section is now in the same style as the rest.

We’ll lets go through all the settings then.

The #disqus_thread is the div used by the plugin.
This is the main div.

#disqus_thread {
    padding: 3.3333% 7.6923%;
    background-color: white;
    margin: 3% 0;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
}

@media screen and (min-width: 38.75em) is is specially for screens with a minimum width of 37.75em.

For more about @Media screen please follow this URL:
https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

@media screen and (min-width: 38.75em) {
    div#disqus_thread {
        padding: 3.3333% 7.6923%;
        margin: 3.3333% 7.6923%;
    }
}

CSS Properties.

Padding

The padding clears an area around the content (inside the border) of an element. The padding is affected by the background color of the element.

The top, right, bottom, and left padding can be changed independently using separate properties. A shorthand padding property can also be used, to change all paddings at once.

Margin

The margin clears an area around an element (outside the border). The margin does not have a background color, and is completely transparent.

The top, right, bottom, and left margin can be changed independently using separate properties. A shorthand margin property can also be used, to change all margins at once.

Box-shadow

The box-shadow is there to give the element a shadow. This does not have a background-color, and is completely transparent.

Source: w3 schools

Why can I not change the font-family?

I’ve heard designers say they can’t work with Disqus because it’s unacceptable that they can’t completely customize the comment section. I find that unacceptable as well since it’s not using the same font-family as I do in my theme.

It is not possible to style any of the elements within the Disqus iframe using CSS. it is possible though to use CSS on the #disqus_thread container, but nothing within the Disqus iframes that load inside that container, because the elements are loaded from Disqus and not your own CSS.

Legacy content.

This post dates from June 13, 2015. I created it at the beginning of my blog ‘career’. These days I don’t blog about about WordPress or Disqus any longer. I don’t even use Disqus anymore as I prefer the WordPress builtin comments.

The content is no longer relevant, but because there are still views, I have updated the post.