Please welcome guest blogger Rajeev Edmonds of New Delhi, India! Rajeev is a Problogger, and we met via Twitter. He has a great blog called MintBlogger, with lots of tips, so I invited him to share a techie tip with us. Blogging is Rajeev’s passion and he blogs on diverse topics, ranging from blogging tips to social media marketing techniques.
Rajeev started blogging in 2006, and it has become an essential part of his life. His goal is to share the valuable information and experience of blogging that he has gathered to his readers.
Disqus Comments have become quite popular, and I want to thank Rajeev for taking the time to explain how to customize them.
Every blogging CMS (content management system) inherently supports comments to foster lively discussions around the published content. Although the native commenting system of every popular blogging software is quite good, still they lack some features that are normally supplemented by additional plugins. Since new media has overtaken conventional methods of connecting with people, social media mash ups are quite common. We can witness integration (via plugins) of various social media services with native comment system of blogging software. Several third party commenting systems are also developed that entirely replace the native commenting system of any blogging CMS. Disqus is one such third party commenting system that has gained massive popularity in blogosphere.
I use disqus commenting system on my blog and so far I’m more than happy with it. Today we are going to discuss about customization (look ‘n’ feel) of disqus comments. Unless you’re using a dark theme, by default, you’ll get a white background with black text for your comment thread after installing disqus on your blog. This is pretty basic theme that gels well with majority of blogs. What if you want a custom theme to match your blog template? A real example is shown below where I’ve customized disqus comments to match the blog theme.
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 -> Customize -> 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.
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.
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.
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.
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.
display: none; /* Turns off comment footer */
}
The following code is extremely important as it introduces reasonable gap between two comments.
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.
Update: I’ve been observing comment threads on this post and noticed that lot of people are asking about removing Disqus logo, ‘Expand Community’ box, RSS button, and ‘Subscribe by email’ link . So here’s that magic code to completely remove these elements from your Disqus thread.
#dsq-content #dsq-authenticate .dsq-login-buttons {
background: none !important;
background-image: none !important;
margin-bottom: 0 !important;
}
#dsq-subscribe a {
display: none !important;
}
#dsq-content #dsq-global-toolbar {
display: none !important;
}
#dsq-sort-by {
display: none !important;
}
Credit goes to Cristina for sharing this useful code for the entire Disqus community.
If you get stuck anywhere, feel free to shoot me an email and I’ll be more than happy to help you.
86 comments ↓
Hi Linda,
Thanks for having me on OnBloggingWell. I hope readers will find the post informative and useful.
Hi Rajeev,
I want to thank you for sharing your expertise with us! I’ve learned a lot from your blog and look forward to learning more!
Hey… great tips here Rajeev. As soon as the Disqus support staff gets back to me, I’ll be implementing a few of these (they are somewhat LESS than responsive).
Great read… I was just wondering how to do a few of these things and all of the answers are in one place.
Keep up the good work Linda…
Thanks, Matt!
Rajeev, thankx so much for your info. And your blog is extremely helpful. I have been considering switching to discqus. Your instructions will come in handy when I do.
Off the topic, I’ve hesitated to switch because when I first switched to IntenseDebate, I lost every comment I had. If I switch again, will I lose the comments?
@Matt – Glad you found it useful.
@Aggie – There’s no question of losing any comments. You can export all your existing comments into Disqus. Whether you’re on Worpress or Blogger, comment exporting requires just a click of a button
Hope your transition to Disqus will be smooth
Thankx so much Rajeev. I guess I lost those first comments from my own lack of understanding. This helps me much!
[...] borrowed/updated from http://onbloggingwell.com/how-to-customize-disqus-comments [...]
just wanted to pass on, I could not get this to work unless I added !important -and linking to an external CSS file was a definite no no!
thanks for posting this
http://adrianford.com/blog/2010/05/17/customising-disqus-comments/
Great tips Rajeev, used it on my blog, thanks
@Adrian , @Spooky – Glad it worked for you. I would love to hear some new tricks, you may learn while implementing this.
I used this as well. Thank you.
Nice writeup, I think at this point, many of the comment services are starting to provide very similar functionality. Disqus has been pretty good about leading the thinking, and it’s natural for other services to begin delivering on what their users liked about Disqus. So that’s why in the coming weeks, we’re going to make it much easier for people to decide the better service for them. The new features in the coming release should be compelling enough and I really hope you’ll find them useful as well.
My tumblr theme isn’t one that is automatically set up to use disqus. So I had to install the code manually as instructed on the disqus site. The problem is that when I try to add this code into my tumblr test blog it doesn’t work. I’m usually pretty good at figuring things out, just please point me in the right direction.
I wish disqus allowed users to customize the color of their comment boxes so that someone like me could easily do it.
Thanks for your help in advance.
@Talk Binary @linkmoko – Glad you found it useful.
@Notaclue – Well, we can’t color the comment box itself, but we can customize the comment thread. Thanks for the visit.
Hello to all of you.
I have added the disqus comment platform and i have modified it according to my needs.
I have succeeded of having the comment count showing into a bubble comment (on my home page) but another comment count from disqus appears next to the bubble.
You can have a look at it on my blog http://logioshermes.blogspot.com/
Does anyone knows how can i ”hide” the second tiny comment count (red coloured number) in order to have it appear only in the bubble as it is?
Any help will be greatly appreciated!
How do I do to disqus not count comments author?
I have blogger
Thanks
Customizing disqus is pretty straight forward. I have seen many sites where you never realize that the commenting system they use is disqus. I say you go for disqus.
Here is one site I bumped on recently. http://tipswallet.com . I bet you that you won’t realize soon that they are using disqus.
I just used the code on my blog and everything works very well. Thanks for the great tutorial!
Thanks a million mate! You made my day, week, month and year!!!
Thank you VERY much for this post! Your instructions are 100xs better than the ones on Disqus
@logios – I couldn’t find the tiny comment count!
@Lara – I’m not aware of any such technique to exclude author comment count from entire comment thread counts. Sorry.
@Eugene , @vjk , @TheTechTemple – Glad you found the tutorial useful.
Can i implement my custom theme into comments form.
Thanks, this explains things really easily. However, I have another question: can you change the content of the default text that Disqus uses?
For example, can I append a message to the section that displays the Unsubscribe and Subscribe by RSS buttons? Or can I replace the text in the comment box that says “Type your comment here.” with something of my own choosing?
if you want to change the direction of the writing of disquess text box of comments
then you need to do is if you are using wordpress disqus plugin , open the comments.php file
at the line where javascript is sending variable like
disqus_url is for instance
add line
var disqus_iframe_css = “your css link “;
it will add your css to disquss and change the direction of text box writing
for changing direction you have to use
css property
direction:rtl !important;
Many thanks, Rajeev.
is there a demo of these changes in action?
Hello
Disqus comment system and use your information was very useful.
I not want Like and reply button.
Can you help
Thank you
Hiii … I Like This CSS to Modif my disqus comment
#dsq-comments-title h3 {
color:#333;
}
#disqus_thread {
padding:12px;
margin-bottom:-10px;
}
#disqus_thread h3 {
color:#333;
font-weight:bold;
font-family: Helvetica, sans-serif;
font-size:22px;
padding-bottom:.5em;
}
#dsq-content div.dsq-options {
background:none;
padding-bottom:0px;
}
#dsq-comments li.dsq-comment {
margin-top:12px
margin-bottom:12px;
padding:12px;
background:#F0F0E9;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border:1px solid #ccc;
}
#dsq-content div.dsq-post-area {
padding:12px;
background:#F0F0E9;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border:1px solid #ccc;
-webkit-box-shadow: 0px 0px 10px #ECF40B;
-moz-box-shadow: 0px 0px 10px #ECF40B;
}
#dsq-content .dsq-comment-header {
background:none;
}
.dsq-brlink {
display:none;
}
#dsq-content .dsq-comment-message {
background:#fff;
padding:10px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
#dsq-content #dsq-authenticate .dsq-login-buttons {
background:none;
background-image:none;
margin-bottom:0;
}
#dsq-content #dsq-form-area .dsq-textarea .dsq-textarea-wrapper,
#dsq-content #dsq-form-area .dsq-post-fields .dsq-input-wrapper {
border: 1px solid #ccc;
}
#dsq-new-post div.dsq-request-user-info {
background:none;
padding-bottom:0px;
}
Hello
I’m using “disqus” comments system.
I do not want “reply” and “like” options in the system.
What are the CSS codes or settings?
Thank you
Lot of people are asking about ‘Like’ ‘Reply’ buttons in footer.
Use this code to hide them
#dsq-content #dsq-comments .dsq-comment-footer {
display: none; /* Turns off comment footer */
}
thx for info; i want to customize the date & time display so that it appears on top (besides user name)—just like this page of yours.
how to do that?
thanks
…great post, most helpful !!
I am not able to find that which controls the font size for “subscribe by email”; “RSS”; “Next-Previous”
could someone point that out ??
and THNX! Journalist Blog’s for sharing BIG help !!
THNX!! everyone
Thanks, I used the exact code on my site and it now looks great! Really stands out compared to the default style.
How can I change the color of the hyperlinks used like profile and subscription links?
thanks Rajeev for this blog it was helpful to some extent.
Also, thanks to #29 Journalist Blog for your modified CSS, it was also very helpful.
btw we do not necessarily need to put the text,
/* Comment body left border */
like this in css field right??
Also, if anyone of you could help me in this last problem that would be great,
I want to change my link color: when someone points mouse pointer over there. For eg: my links color is Red when i put a mouse pointer it turns out to black which happens to be my background color. I just want the link color to be either Red only or any other besides black.
Thank you in advance,
Chris!
Thanks a lot mate. I’ve asked around forums and everything and no one seemed to know how to do this. Keep it up
hello. I just want to know how to remove the upper part of the comment. It seems to be redundant if the like button appear since i already installed the like button from facebook.
Bro.. im gonna try this to my disqus, but.. i just wondering.. if i customize it, will i still have the option to post my comment to my Facebook Newsfeed??
(Sending posted comment to my Facebook is important to me..)
Im waiting your reply in a great expectation. Thanks.
Can you please email the ‘custom CSS’ code you have used for this page? I like its format, style and simplicity, and it will greatly suit my needs. Thanks in advance.
PS: Can you also tell me how I can include – like, reply, moderate, edit to your custom CSS?
Help! I can’t get rid of the logo! I tried what you said, without any luck. Did Disqus catch on and “disable” removing their logo? Is there anything else I can do? Please let me know, thanks in advance!
Thank you for posting this information. It is very helpful. I am wondering whether you know of a way to have the Disqus comments appear AFTER the blog posts? I can only figure out how to make them appear before and of course it would make more sense to have them appear afterwards. Thank you so much for your help! Grace
Do you have a free account? because i do and theres no custimazation part on mine
@Lana, Disqus did some modding to their CSS form. You can still disable the logo. However, now use the following code snippet:
#dsq-global-toolbar
.dsq-clearfix {
display: none;
}
Hope this helps! Cheers
Thanks, i’m used display:none to my disqus theme
#disqus_thread {
margin-top: 0.75em;
position: relative; }
#disqus_thread #dsq-global-toolbar, #disqus_thread .dsq-options, #disqus_thread #dsq-comments-title, #disqus_thread .dsq-item-trackback, #disqus_thread .dsq-comment-footer, #disqus_thread #dsq-pagination {
display: none; }
#dsq-content cite p {
font-weight: 400 !important; }
#disqus_thread #dsq-content #dsq-comments .dsq-comment {
padding: 0;
margin: 0; }
#disqus_thread #dsq-content #dsq-comments .dsq-comment .dsq-full-comment {
padding: 16px 0 0;
border-top: solid 1px #dddddd; }
#disqus_thread #dsq-content #dsq-comments .dsq-comment .dsq-full-comment .dsq-comment-header {
background: transparent;
border: 0;
font-size: 16px;
margin-left: 0 0 0 -8px;
padding: 0 0 0 80px;
position: relative;
font-weight: 400;
font-family: copse, serif; }
#disqus_thread #dsq-content #dsq-comments .dsq-comment .dsq-full-comment .dsq-comment-body {
font-size: 14px;
line-height: 1.5em;
padding: 0 0 0.75em 90px;
color: #484848; }
#disqus_thread #dsq-content #dsq-comments .dsq-comment .dsq-full-comment .dsq-comment-header .dsq-comment-header-meta-wrapper .dsq-comment-hide-thread, #disqus_thread #dsq-content #dsq-comments .dsq-comment .dsq-full-comment .dsq-comment-header .dsq-comment-header-meta-wrapper .dsq-comment-header-time {
display: none; }
#disqus_thread h3 {
display: none !important; }
.comments .dsq-brlink {
display: none !important; }
#disqus_thread .dsq-header-avatar {
position: absolute;
top: 0;
left: 0; }
#disqus_thread .dsq-header-avatar img {
width: 60px;
height: 60px; }
#disqus_thread:after {
content: "";
width: 80px;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 5;
display: block; }
.dsq-request-user-avatar, .dsq-request-user-info {
display: none !important; }
.dsq-comment-text p {
margin: 0 0 1.5em 0 !important; }
I’ve installed to my blog, yet..
XD
But, that’s great tips..
thanks..
Hello, is there any chance to write a piece of rules or conventions on how to comment or not to comment, which comments will be deleted and why… in the disqus commenting system. I know that in intensedebate you can do it, what about disqus, and how you do it?
tnx for help.
For Narcissus theme, this is my css :
#disqus_thread #dsq-global-toolbar {
display: none;
}
#disqus_thread h3 {
display: none !important; }
.post-comment-link {
display: none !important; }
#disqus_thread .dsq-options .dsq-item-sort {
display: none !important; }
#disqus_thread .dsq-options .dsq-subscribe-email {
display: none !important; }
Thanks a lot mate. I’ve asked around forums and everything and no one seemed to know how to do this. Keep it up
Very helpful. I am trying to move the whole disqus section over to the right but have not been able to figure it out. Which code should I modify?
I recently customize my disqus theme using different code but I am still unable to find how to give dofollow links through disqus. I love to use disqus as my commenting system and can’t shift to other commenting system. Rajeev Edmonds will you please tell me how to make disqus links dofollow? Thanks in advance
wow ….this is a very useful article.
Hi Rajeev, this was incredibly helpful. there is one thing though:
Do you know a way to change the “COMMENTS” text into “PRAYERS”. Any ideas?
Thanks again.
[...] Comment Communities — Even blog comments have hopped aboard the social media bandwagon through sites such as Disqus. (Note: My friend Rajeev Edmonds recently wrote an informative guest post about customizing Disqus comments.) [...]
Thank you for this post, it´s very helpfully!
Greetings from Tyrol/Austria
Thanks for the post. I just installed Disqus but am struggling to find a solution to by issue. The comments box is sitting on top of the “Add a comment” text. Also the Subscribe & RSS links appear in an odd place until a comment is posted. Do you have any suggestions for how I can fix this being a novice with CSS? The issue is here: http://escapism-online.com/blog/
Thanks
Putting the finishing touches on this new site and need the Disqus comments to be centered with the post content. How would I do that?
I want to thank Rajeev for submitting an update that will answer a lot of the questions readers have been asking! – Linda
Thanks for updating the post Linda! Hope readers will find it useful.
Nice tips Rajeev, thanks!
Great post!
I was wondering if the left space that Disqus adds to replies in the comments thread can be customizable too… is there a way to change it?
Thanks!
Hello !!! my friend, great site ! Greetings from Greece! i have a problem with my blog ! the url is this : http://gr24newsbeta.blogspot.com… The comments counter is inside the red bubbles, but i ve change the comments system from blogger to disqus and dosnt work anymore..
what can i do ? can somebody help me ? my email constmp@gmail.com
@Kurt – The smaller reply box with left space is made so to distinguish it from a normal comment. Threaded comments are always encapsulated within the primary comment with each new reply. That’s a norm and does make sense.
Thanks Rajeev, I know it makes sense, I’d just like to narrow a little bit that space so in posts with many replies there’s more space per line. I guess by your answer that it’s not possible to reduce that space, am I right?
Thanks!
Hi, great post, just one thing is challenging me: The text of people’s replies is wrapping severly and justifying itself left. I cannot as of yet find a solution, so it must be an issue with own site CSS layers. this is the CSS for the div that my DISQUS box is sitting in:
#parent_article_wrapper_left{
display:block;
margin-top:20px;
color:#666666;
background-color:#FFFFFF;
margin-bottom: 0px;
width:660px;
height:auto;
margin-right: 0px;
padding-top: 10px;
padding-right: 15px;
padding-bottom: 30px;
padding-left: 15px;
text-align: left;
font-size: 36px;
Could this be the cause?
@Kurt – Exactly.
@Darren – CSS directives of the parent always overrides the child unless you explicitly declare the same in the child .
What if i want the avatar to pull off from my own profile pic of my site? Lets say the site also has its own avatar/profile pic upload. How can it be integrated to disqus? I created a social site where they upload an avatar, i want to use this pic also in disqus.
@Karlo – Simply upload that pic (avatar) in your Disqus profile.
Thanks for this post.. I want to show no. of comments on a post on Homepage?
hi rajeev! thanks for this post ..
please tell me how to load disqus comments irrespective of the users location on page i.e. i want disqus comments to load even if the user has not scroll’d down to the bottom
Any ideas on how to change just the comment number size? I want to leave the “comments” line as it is, but would like to increase the font size of the actual number. Anyone know how to do this? The rest of this article has been incredibly helpful. Thanks!
Any idea how to change just the font size of the comment count? I want to leave the comments line as is, but would like to place great prominence (and maybe a background image like a talk bubble) behind the number.
Thanks Rajiv this was really helpful!
@Chiranjeev – If you’re installing WP plugin for the same, it automatically provides comments count on the homepage for posts.
Divyansh – Deferred loading of comments is controlled by the service end and is used to eliminate any performance related issue during page load. It cannot be overridden from the client’s end.
Lauren – Let me check if there’s any solution to this. I’ll post it here as soon as I find something positive.
@Nurul Imam and Rajeev – Thank you for your code! It worked PERFECTLY on my Disqus thread. Now it does exactly what I wanted to do.
How do I update the changes I make after I change them on Disqus?
Got it to work! Check it out: http://www.thesoulofashark.com .
Thanks a ton!!!
thanks! im going to apply this on my disquss comment form.
How separate Moderator’s comment in Disqus 2012? CSS option not available.
[...] system. Almost all of these comment platforms support import and export of comments. You can also customize these comment systems to blend them in a better way with your [...]
Hi, good morning
I want the way to unit the blog counter with the disqus comments number in the main page. The proof blog is pruebasmohicanodos.blogspot.com Can you help me?
Thank you.
Luna.
I am so totally new to this so please please. Simple answer would be appreciated.
I don’t mind having the Disqus logo bottom right of my comments BUT. I do mind that if you click on it, it takes people away from my blog.
The logo can stay, i really do not mind but please oh please, how do i stop the link?
How can I remove the dates on the (Disqus) comments?
can i remove disqus logo using any css code to hide?
i just want to know that using disqus comment system, can we reduce bandwidth ?
Please, how do you make the Discus box narrower (or change the size of it at all)??? Mine is just all across the bottom of my page and I want it to fit under my posts. What code would I need and where would it put it?? Your help would be much appreciated… this is so frustrating. >.<
Leave a Comment