Customized Disqus Comment System

Three days ago, I received a question regarding disqus comment system. He is asking how did I customized my comment system from the default one to the current design that I am using.

To help him, I'm posting this step-by-step solution on how to do it. From here on, I assume that you already installed or added or your comment system to your site or blog.

Steps on Customizing

1) Login to disqus.com

2) Pick the site that you wish to customized. Sites are listed to the upper left side.

3) Go to Settings > Appearance and scroll down. I'm not sure if the theme would affect the code but as for this customization, I am using Narcissus.

4) At the bottom part you'll see Custom CSS where you can place your CSS styling. You may place the code below to your CSS style.

Example:

#dsq-content #dsq-comments .dsq-comment-body {
 padding: 0.5em 0.7em;
 background: #000;   /* replace this to change background color */
 min-height:70px;
 font-family: Lucida Sans Unicode, Helvetica, sans-serif; font-size: 13px;
 color:white;    /* replace this to change font-color */

 /* This creates a border around your comments */
 border-bottom:#d3d3d3 1px solid;
 border-left:#d3d3d3 1px solid;
 border-right:#d3d3d3 1px solid;
 border-top:#d3d3d3 1px solid;
 
 /* The style below creates a rounded corner border for your comments */
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 -khtml-border-radius: 5px;
 border-radius: 5px;
}
.dsq-options {
 display: none;     /* this will hide the options */
}
.dsq-dc-logo {
 display: none;    /* this will hide the disqus logo */
}

#dsq-content #dsq-comments .dsq-comment {
 margin-bottom: 10px;  /* adjust for comments' spacing */
}

The background and color properties can be changed depending on your taste. Borders can also be customized or removed if you want.

So that's it, play with the colors and enjoy editing. :)