How To Customize Disqus Comment System

April 20, 2011

I’m assuming you’ve already installed disqus on your blog. I’m also assuming you are not much familiar with CSS (cascading style sheet) coding, that is required to customize disqus comments. So let’s get started and learn how to do it easily in a few steps.

Login to your Disqus dashboard and choose the blog whose comments you want to customize. Go to Settings -> Appearance -> Custom CSS. You’ll be presented with a blank form where you can write your custom CSS code to get the desired results. Throughout this customization process, we’ll be using color codes to get our own theme. I use Visual Color Picker to generate hexadecimal color codes and highly recommend you using the same.

Disqus comment thread can be broadly divided into four parts.

  • Outer shell encapsulating the entire thread. (#dsq-content)
  • Comment header with author links and date time entries. (.dsq-comment-header)
  • Comment body consisting of entire comment text. (.dsq-comment-body)
  • Comment footer containing various flag, like, reply buttons. (.dsq-comment-footer)

To make things simple we’ll leave the outer shell and will concentrate on customizing comment header, body and footer. Every color code is represented by a 6-digit hexadecimal code prefixed by hash symbol. For example, code for white color will be #FFFFFF. I’ve used #xxxxxx in sample code which should be replaced by the actual color code you want to use.

So let’s get started and see how to customize the comment header. Copy paste the following code in the CSS form in your Disqus dashboard.

#dsq-content #dsq-comments .dsq-comment-header {
background: #xxxxxx; /* Header background color */
border-top:#xxxxxx 1px solid; /* Header top border */
border-left:#xxxxxx 1px solid; /* Header left border */
border-right:#xxxxxx 1px solid; /* Header bottom border */
}

Disqus comment header consists of an avatar, hyperlinked text (author or business name) and comment date time entries. Customization is extremely easy. You only have to provide 4 color codes for background and borders.

The following code will be used to customize comment body where the actual comment text will appear.

#dsq-content #dsq-comments .dsq-comment-body {
padding: 0.571em 0.786em; /* Space between comment text and border */
background: #xxxxxx; /* Comment body background color */
min-height:70px; /* Minimum comment body box height */
border-bottom:#xxxxxx 1px solid; /* Comment body bottom border */
border-left:#xxxxxx 1px solid; /* Comment body left border */
border-right:#xxxxxx 1px solid; /* Comment body right border */
border-top:#xxxxxx 1px solid; /* Comment body top border */
font-family: Lucida Sans Unicode, Helvetica, sans-serif; font-size: 13px; /* Font used for comment text */
}

Apart from background and border colors, there are 3 extra attributes in this code. Leave the padding attribute as it is. min-height ensures that one line comments don’t look ugly with extremely congested comment box. font-famiy attribute is used to choose your favorite font for comment text. You can change it to suit your needs.

Disqus options contains the sorting options, community page link, and subscribe link. If you want to turn them off you can do it by using the following code. This piece of code is optional and can be safely ignored.

.dsq-options {
display: none; /* Turns off various disqus options */
}

As the name implies, the following code turns off the large Disqus graphical logo. This code is also optional and can be safely ignored.

.dsq-dc-logo {
display: none; /* Turns off display of disqus logo */
}

I prefer to switch off Disqus comment footer by using the following code. If you want to keep it, you can replace the display attribute with all the attributes used in customizing header or body.

#dsq-content #dsq-comments .dsq-comment-footer {
display: none; /* Turns off comment footer */
}

The following code is extremely important as it introduces reasonable gap between two comments.

#dsq-content #dsq-comments .dsq-comment {
margin-bottom: 25px; /* Space between two comments */
}

Once you have saved all your CSS code, you can see the effect instantly. I’ll advice you to first try these customizations on a test blog. Once you are satisfied with the theme, you can safely transfer the code to main blog. I hope this customization will give a new look to your blog and visitors will enjoy leaving comments.

Source: onbloggingwell.com

Article by

Admin is the Founder and Administrator of Tech Blog. He love to explore the tech world. He is a part time dedicated blogger, coder and designer of Xinz.

Sarami has written 308 awesome articles for us at Tech and Money Making Blog

| Facebook | Blog → Tech Blog

{ 5 comments… read them below or add one }

1 vivetech June 16, 2011 at 11:39 pm

I found this post very informative. I recently installed disqus on my site and will try this out some time. Great job.

Reply

2 izmir escort January 17, 2012 at 7:14 am

thank u sir.. good articles.. that is a good blog…

Reply

3 smashinbeauty June 26, 2011 at 11:13 pm

question, can I generate random avatar for non-disqus users instead of one standard one?

Reply

4 jumpdates July 20, 2011 at 12:51 pm

Love to add this on my dating sites

Reply

5 iTechColumn March 13, 2012 at 1:40 pm

Interesting stuff here :) Thanks :)

Reply

Leave a Comment

Previous post:

Next post: