DISQUS

Intro

On this page, you will find descriptions of the selectors and style rules used in the comment system.
Disqus recommends using the Firebug add-on for Firefox to explore the comment system style.

Tip: Each example below uses high specificity for precedence.
Otherwise, you may need to use !important at the end of your custom rule.

Styling the input fields in the Iframe

The input fields for Add Comment and Reply are in an iframe. To stylize, you need to provide the URL to an external stylesheet with your desired rules.

Add the following inside <HEAD> where disqus-form.css is the name of your external stylesheet.

<script type="text/javascript">var disqus_iframe_css = "http://www.my-blog-url.com/disqus-form.css";</script>

The following are CSS selectors you can use in your external stylesheet.

textarea	The box where a post is typed into.
Ex. Change the border → `textarea { border: 2px solid orange; }`

input.form-text	The form elements (Name, Email, Website).
Ex. Change the font-size → `input.form-text { font-size: 115%; }`

input.submit	The submit button "Post".
Ex. Change the background color → `input.submit { background-color: #c03000; }`

Styling the Comments

#disqus_thread	Everything Disqus on your page is contained within this.
Ex. If there was a customization example, it'd go here.

#dsq-content	The main wrapper for the comment system.
Ex. Change the font size → `#disqus_thread #dsq-content { font-size: 10px; }`

h3	"Add New Comment" and "# Comments" are enclosed in `h3` tags.
Ex. Unbold the text → `#disqus_thread #dsq-content h3 { font-weight: normal; }`

#dsq-options-toggle	The toggle button for the thread options.
Ex. Disable the Options button/link → `#dsq-content #dsq-options-toggle { display: none; }`

#dsq-extra-links	The links within the thread Options
Ex. Remove links → `#dsq-content #dsq-extra-links { display: none; }`

#dsq-comments	The entire comment thread list.
Ex. Change the background color → `#dsq-content #dsq-comments { background-color: #000 }`

.dsq-comment	A single comment in the thread.
Ex. Change the spacing between comments → `#dsq-content #dsq-comments .dsq-comment{ margin-bottom: 60px; }`

.dsq-comment-rate	The comment rating arrows for posts.
Ex. Remove the arrows → `#dsq-content #dsq-comments .dsq-comment-rate { display: none; }`

.dsq-comment-header	The header at the top of posts.
Ex. Change header color and make taller. → `#dsq-content #dsq-comments .dsq-comment-header{ background: #c03000; height: 50px; }`

.dsq-header-avatar img	The avatar image for the registered.
Ex. Enlarge the avatar → `#dsq-content #dsq-comments .dsq-header-avatar img { height: 48px; width: 48px; }`

.dsq-header-meta	This is the meta information about the post (time stamp and points).
Ex. Enlarge the text → `#dsq-content #dsq-comments .dsq-header-meta { font-size: 110% }`

.dsq-comment-body	The message body of a single comment post.
Ex. Change the background color → `#dsq-content #dsq-comments .dsq-comment-body { background: #000; }`

.dsq-comment-footer	The footer contains the link to "reply."
Ex. Change the font size → `#dsq-content #dsq-comments .dsq-comment-footer { font-size: 20px; }`

#dsq-pagination	This contains and determines the style for the pagination links.
Ex. Change the background color → `#disqus_thread #dsq-content #dsq-pagination { background-color: #c0300; }`

All Docs

Docs > Custom CSS

Intro

Styling the input fields in the Iframe

Styling the Comments