Disqus header

TUTORIAL: Disqus with twenty fifteen theme

Disqus with twenty fifteen theme

As you’ve probably noticed I use the Disqus commenting plugin for my Blog.

Disqus, pronounced “discuss”, is a service and tool 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 comments.

Source: Disqus WordPress plugin


As you’ve probably also noticed I use the standard WordPress Fifteen twenty theme.

This are of course also my own words,

The 2015 default theme is clean, blog-focused, and designed for clarity. Twenty Fifteen’s simple, straight forward typography is readable on a wide variety of screen sizes, and suitable for multiple languages. We designed it using a mobile-first approach, meaning your content takes center-stage, regardless of whether your visitors arrive by smartphone, tablet, laptop, or desktop computer.


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

old disqus lookThat is not really the clean, blog-focused, and designed for clarity look you’re looking for in the Fifteen twenty theme.

Before I’ll start explaining I’ll give you the CSS I use to customize the div. I would like to come back to that and discuss it 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 Disqus commenting system will look with the css I use.disqus commentsMuch better, the comment section is now clean, blog-focused, and designed for clarity.


explanation

The #disqus_thread is the div for the plugin.

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

The @media screen and (min-width: 38.75em) is to make sure it will also fit your smartphone and tablet screens.

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

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 very annoying as well since it’s not using the same font-family as I do in my Fifteen twenty theme.

 

disqus loadingIt is not possible to style any of the elements within the Disqus iframe using CSS. it is possible tho 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.

I really hope they will change that soon or at least give us more fonts to choose from.

Goodluck with your disqus commenting system!

Published by

Bas Wijdenes

My name is Bas Wijdenes and I work full-time as a Services Engineer. In my spare time I write about the error messages that I encounter during my work. Furthermore, I am currently occupied with Office 365, Azure infrastructure, and PowerShell for automating daily tasks.

4 thoughts on “TUTORIAL: Disqus with twenty fifteen theme”

Leave a Reply

Your email address will not be published. Required fields are marked *