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). input.submit The submit button "Post". #disqus_thread Everything Disqus on your page is contained within this. #dsq-content The main wrapper for the comment system. h3 "Add New Comment" and "# Comments" are enclosed in h3 tags. #dsq-options-toggle The toggle button for the thread options. #dsq-extra-links The links within the thread Options #dsq-comments The entire comment thread list. .dsq-comment A single comment in the thread. #dsq-content #dsq-comments .dsq-comment{ margin-bottom: 60px; } .dsq-comment-rate The comment rating arrows for posts. #dsq-content #dsq-comments .dsq-comment-rate { display: none; } .dsq-comment-header The header at the top of posts. #dsq-content #dsq-comments .dsq-comment-header{ background: #c03000; height: 50px; } .dsq-header-avatar img The avatar image for the registered. #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). #dsq-content #dsq-comments .dsq-header-meta { font-size: 110% } .dsq-comment-body The message body of a single comment post. #dsq-content #dsq-comments .dsq-comment-body { background: #000; } .dsq-comment-footer The footer contains the link to "reply." #dsq-content #dsq-comments .dsq-comment-footer { font-size: 20px; } #dsq-pagination This contains and determines the style for the pagination links. #disqus_thread #dsq-content #dsq-pagination { background-color: #c0300; }