Disqus is easy to customize with your own style rules using CSS. If you're new to CSS, you can get started with W3Schools' tutorials. Disqus highly recommends using the Firebug add-on for Firefox to develop with CSS, although you can also use the default inspection and development tools with Chrome, Safari, and Internet Explorer as well.

You can add your custom CSS in the "Custom CSS" box provided under Appearance settings (make sure you're customizing the right forum). For advanced users, feel free to add the CSS directly on your page or link to an external stylesheet.

The default CSS for Disqus Comments uses very high selectivity. To override default styles, add an !important to the end of each CSS rule.

Troubleshooting CSS

Certain themes may conflict with Disqus CSS and cause some appearance issues, depending on how it was coded. This guide will show you how to fix the most common ones.

You can also find a very good guide on general CSS troubleshooting here.

Large gap before comment box

If you're seeing a large space between the comment box and the header of the Disqus embed, enter the following CSS override to fix it:

#dsq-content div, #dsq-content p, #dsq-content h3 { clear:none !important; }

If the gap persists, try also adding the following CSS:

#dsq-content { overflow:auto !important; }

Change text color

Depending on how the theme is laid out, Disqus may inherit a different text color which may be the same as the background. You can change it using the following override:

#dsq-content { color:#ffffff !important; }

If the text color still does not change, you will need to target comments more directly. This can be done with the following CSS:

.dsq-full-comment { color: #ffffff !important; } (for Narcissus theme users)

.dsq-comment-body { color: #ffffff !important; } (for Houdini theme users)

Note: #ffffff can be replaced with the appropriate color to show up against your background color. For more colors, see Web colors on Wikipedia.

Change header background color of moderators' comments

One easy way to differentiate your moderators' comments is to change the background color of the header -- the area that shows their name and bio -- on their comments. This can be done with the following CSS:

#dsq-content .dsq-moderator .dsq-comment-header {
  background: #EBF0F5;
}

Change comment font size

Best practices for changing font size would be to first edit your site's own stylesheets before overriding them in Disqus. If this is not feasible or desirable, you can change a comment's font size using the following override:

#dsq-content #dsq-comments .dsq-comment-message { font-size: 12px; }

Like and Dislike buttons are askew

Using some themes, the global toolbar will show up to the left or right side of the page and underneath the sidebar, usually in Firefox only. Use the following code to fix this:

#dsq-content #dsq-global-toolbar { clear: both !important; }

Adjust width of the embed

If the comment box is either too wide or too narrow, use the following and just adjust the number until appropriate:

#disqus_thread { width: 500px !important; }

Mobile theme is covering the content

This most often manifests as a large white rectangle which appears over your content, and can be fixed with the following CSS:

#disqus_thread { clear: both !important; }

Post and Cancel buttons don't appear in the Reply box

This is specific to Internet Explorer, and can be fixed with the following CSS:

.dsq-append-post {zoom: 1;}

(For more information on the cause behind this issue, we recommend Dean Edwards' article "On having layout".)

Hide "Subscribe by email" and "RSS" links

In most cases we don't recommend removing these links as users will expect them to be on your site. However, if these links don't fit your site's overall flow, they can removed with the following CSS:

#dsq-subscribe { display: none; }

Note: This only applies to the Houdini theme.

Circles or squares appear next to every item

This happens when Disqus inherits your site's <li> (HTML list element) styles. This can be fixed with the following CSS:

div#disqus_thread li, div#disqus_thread span {
  list-style-type: none !important;
}