I prefer IntenseDebate to Disqus, but the default IntenseDebate layout leaves much to be desired. It’s very easy to change IntenseDebate using the “Custom CSS” option in the settings section. This is important because there are lots of things which need to be customized.
In this tutorial, we’ll see how to do these four things:
Remove the flashy and annoying “Login” buttons
Increase the height of the comment box
Enable and customize the “CommentLuv” plugin for IntenseDebate
Move the “Name” and “Email” fields above the comment box
These tips below should work for everyone. The documentation provided by IntenseDebate leaves much to be desired and I had to use Google Chrome’s “Inspect Element” command to figure out how to achieve the following.
Removing the Login Buttons
Most of our readers are simple people. They get confused by multiple login choices with different colors. Some of them don’t know that it’s optional and ask why they have to login (and sometimes create an account) and enter their Name, Email, URL! You can lose a lot of readers, cause the first rule of designing comment systems is Keep it simple!
Our first job is to hide all the annoying login buttons such as IntenseDebate, WordPress, Twitter, Facebook, and OpenID as well as the “Comment as a Guest, or Login” message. To do that, type the following into your “Custom CSS” section in the “Settings” tab:
.idc-postnav-label { display: none !important; }.idc-postnav-list { display: none !important; }
Save the CSS, reload your page and confirm that the buttons have vanished.
Increase the Height of the comment box
I never understood why the comment boxes are always so tiny. I like room to type my thoughts without having my last two lines scroll up and vanish. Unfortunately, the “Enable auto-expanding textareas” option doesn’t work. I sent an email to the IntenseDebate support group, but didn’t get any reply, which was a pity since it would be quite a killer feature if it worked. Anyway, increase the height of the comment box to 200px to give your commenters some breathing space:
#idc-container div.idc-text_noresize, #idc-container textarea.idc-text_noresize {height: 200px !important;}
Make sure you disable the “Enable auto-expanding textareas” checkbox.
IntenseDebate doesn’t always link names to your Website!
Some time ago, Automattic – the creators of WordPress – acquired IntenseDebate. Because of this, IntenseDebate got a new “feature.” Anyone who’s signed into their WordPress account is automatically signed into the IntenseDebate commenting system and so they see a “Posting as username” message when they comment on an IntenseDebate enabled site. This sounds great, but the big gaping hole is that after posting the comment, the name of the person links to their IntenseDebate profile instead of their website!
Most people don’t have an IntenseDebate account, but lots of people have a WordPress account. When I comment on someone’s post, I want my name to link back to my website. As of now, if a WordPress logged-in user comments on your IntenseDebate enabled site, their name will link to a blank IntenseDebate profile, leaving other readers no way of knowing who they are, or what their website is. Here’s what it looks like:
See the link in the red box? That’s what the name of a commentor links to. And most people’s default IntenseDebate profile is blank. The only way for a WordPress Logged in commenter to get their name linked to their own URL is to log out first, then fill in the Name, Email, and URL fields.
No one is going to take that much effort.
There’s no workaround for this. As of now, there’s only one thing I’ve been able to do that somewhat mitigates the effect of this terrible design decision – and that is to activate the “CommentLuv” plugin.
Enable and customize the “CommentLuv” plugin
If you’re using IntenseDebate, you simply have to use the CommentLuv plugin for the reasons given above. What this plugin does, is that it allows commenters to fill out a “URL” field. It then grabs the latest post from the feed of that URL and appends it to the comment. So people who want to find out more about a commenter can click that link to go to their website.
To enable the CommentLuv plugin just go the “plugins” section in your IntenseDebate account and activate it. This will place a small “Site URL” box underneath the comment box. But once again, there’s a big flaw.
For the CommentLuv plugin to work, a user has to type their URL into the box. But after that, they have to click somewhere else for the plugin to retrieve the latest post. By default, the CommentLuv box is below the main comment form and so most users just click “Reply” after typing in their URL. This means that the plugin won’t have the time to go get the latest post and thus won’t work.
The solution is to use CSS to place the CommentLuv section above the comment entry box. This way, users will first fill in their URL and then type in their comments giving the plugin plenty of time to find the latest post and prepare it for insertion. Here’s the CSS to do that:
#IDCommentsNewThread {position: relative !important;padding-top: 80px !important;}
#IDCommentReplyForm1{position: relative !important;padding-top: 80px !important;}#luv_field_new {left: 0px !important;position: absolute !important;top: 10px !important;}
#luv_field_reply {position: absolute !important;top: 10px !important;left: 0 !important;}
This pads the top of the comment box and the “Reply” box with 80 pixels and positions the CommentLuv primary and reply sections on the top left.
Move the “Name” and “Email” fields above the comment box
Of course, now that the “Site URL” field is above the comment box, we should move the “Name”, “Email” and “URL” fields to to the top as well next to it. Here’s the CSS to achieve just that:
#IDCommentReplyDiv{position: relative !important} /*Prepare reply comment for positioning */
#IDCommentReplyForm2{position: absolute !important; top: 31px !important; left: 200px !important;}
#IDCommentNewThreadForm2 {position: absolute !important; top: 7px !important; left: 175px !important;width: 100% !important;}
These have to work in conjunction with the CSS commands in the previous section.
Hide the “CommentLuv” image and the “IntenseDebate” logo
If you really want to clean up the comment section, this CSS will hide the unnecessary images:
.idc-foot { display: none !important; }
span#mylastpost img:first-of-type { display: none !important; }
Putting it all together
Here is my consolidated CSS put together for easy copy paste:
.idc-postnav-label { display: none !important; }
.idc-postnav-list { display: none !important; }
.idc-foot { display: none !important; }
#idc-container div.idc-text_noresize, #idc-container textarea.idc-text_noresize {height: 200px !important;}/*Pad and prepare new comment and reply comment boxes */#IDCommentsNewThread {position: relative !important;padding-top: 80px !important;}
#IDCommentReplyForm1{position: relative !important;padding-top: 80px !important;}#IDCommentReplyDiv{position: relative !important} /*Prepare reply comment for positioning */
#IDCommentReplyForm2{position: absolute !important; top: 31px !important; left: 200px !important;}
#IDCommentNewThreadForm2 {position: absolute !important; top: 7px !important; left: 175px !important;width: 100% !important;}#luv_field_new {position: absolute !important;top: 10px !important;left: 0 !important;}
#luv_field_reply {position: absolute !important;top: 10px !important;left: 0 !important;}#all_luv{font-weight:bold !important;} /*Bold the text for comment luv */
span#mylastpost img:first-of-type { display: none !important; }
After making all these changes, here’s what the final result looks like for a non-logged in user:
It’s close enough to the default WordPress comment system for me. Hope this little tutorial helps you out!
Hello, thanks for this awesome guide, but my only question is: is it possible to remove only WordPress and IntenseDebate login buttons, and not the rest (facebook, twitter, openid)?
In reply to Alexander
I’m afraid not. It’s sad isn’t it? But it’s either all the buttons or none of them. The reason is that the various login buttons don’t have individual identifiers which can be hidden via CSS. And we can’t change the code that comes in from IntenseDebate. So we have to hide all the buttons at the same time.
In reply to bhagwad
Yeah, that’s sad! Well, thank you for the feedback in any case, have a nice day!
hello from Malaysia. thanks for the css. been searching forever for clean ID comment form. now i have added the custom css to my ID. thanks again :)
In reply to tupaikaran
You’re welcome. I checked out the form on our site and it looks nice :)
Thanks so much! I was not very happy with my comment for before this. SO much better! Thanks!
In reply to Chelsey – Paper Mama
You’re welcome. Looks great on your blog!
Thank you so much for creating this useful blog entry. I’ve always wanted to customize Intensedebate but like so many others out there, I really don’t have a clue to CSS coding. Although if you give us the actual code, we have no problem doing the copying and pasting!
Anyways, I was wondering if you can teach me how to move the Name and Email field below the Site URL. Reason being is that whenever you type in a site and then move over to the Name field, the recent post entry fields would extend over to the Name field (where it says Display Next to Your Comments). I’m sorry but I’m really picky when it comes to these things so I would appreciate it if you tell me how to move those two fields. I have tried to alter the code in your post to the right position but the fields extend inside to the comment text area.
Thanks!
In reply to Simon
Thanks Simon – and the form looks really nice on your site. I remember thinking this very same thing at the time but don’t remember why I didn’t implement it…maybe I tried and it didn’t work.
First possible solution:
Try changing the padding of the comment box to 200px instead of 80px by replacing
#IDCommentsNewThread {position: relative !important;padding-top: 80px !important;}
#IDCommentReplyForm1{position: relative !important;padding-top: 80px !important;}
with
#IDCommentsNewThread {position: relative !important;padding-top: 200px !important;}
#IDCommentReplyForm1{position: relative !important;padding-top: 200px !important;}
I’m not sure, but this should move the comment box lower and prevent the fields from mucking it up. But I haven’t done this in a while and data tends to leave my head (which is why I write it down in a blog post!) so don’t be mad at me if it doesn’t work.
Second solution would be to remove the “Displayed next to your comments” text. I believe there’s an option in ID to do this though of course it’s a design decision that you’d have to make…
Let me know if either of these work for you
In reply to bhagwad
SWEET! Awesome with the fast reply! But yes, everything worked. Thanks! I had no idea you could disable the field description right inside ID until you mentioned it. That would have been a simple solution, however, I’m not sure if users will know that their Email will not be displayed publicly and so it might scare away some potential commenters.
I do have one last request. Is it possible to split the Email field from the Name field? Basically, I want the style to look like your comment system here where the Name, Email and Website field are on their own lines. This style looks the cleanest from all the comment systems I have seen online so far.
Of course it would be rude to keep asking and not give back. I have accidentally stumbled upon a site that shows how to highlight replies or comments made by the adminstrator. This was a highly requested feature from ID and so I’m sharing it here! This would give the admin comment a light yellow background to distinguish it from other replies.
#.idc-admin {background-color: #fffacd !important;}
Thank you so much once again!
In reply to Simon
Again, I have no idea if this will work, but try putting this in (based on your new site changes):
#txtEmailNewThread{position: absolute !important; top: 62px !important; left: 0px !important;}
Basically the ID field for the email box is “txtEmailNewThread” so I’m trying to position it lower (62px) and not move it to the left.
Let me know it works…
In reply to bhagwad
Unfortunately, that one didn’t work. The Email field did actually move to the next row but the field box was stretched really long. Also, while the textbox did move, the Email title and description did not! It is still displayed next to the Name field.
However, I’m thinking of leaving it to the first design because when someone is logged into ID and visits the comment section, both the name and email fields disappear and therefore, that area is a big blank white space. I’ll no doubt play around with it some more but right now, it’s not whether the CSS works or not because the problem lies within ID itself.
Thanks again for the help bhagwad! You’ve still been a big help for me.
In reply to bhagwad
I really enjoy to read this post
I have had intense debate comments working on my site. However, I just recently added a new post to my site and i found out that the post do not show the comment box at the bottom. Not like the other post which got comment box of intense debate
nuru massage gel
I have had intense debate comments working on my site. However, I just recently added a new post to my site and i found out that the post do not show the comment box at the bottom. Not like the other post which got comment box of intense debate.
Can anyone help me figure out why the comment box won’t appear? ;(
Great source of info here. Thanx! :)
Thanks a lot for the info … Great work :)
thankyou bhagwad for the awesome post. can u tell me how to edit (Submit Comment) image to a custom image.
I am considering Intense Debate on my site at thenlifehappens.com … I am currently testing it on darrensproat.com and am running into a little problem…
First, let me say that I intend to use several of your suggestions above… very well done and very informative. Now, here’s what else I am trying to do…
1) I want to indent the reply-to comments by 50px or more to make it a little clearer on first glance that the comment is a reply to an existing comment. (I have tried their custom CSS suggestions but with unfavorable results)…
2) I want to include a call to action link (Leave Your Comment Now!) at the bottom of my article that links to a #respond tag or something that will jump the reader over my author box, related articles, previous comments, and other content straight to the “Post a new comment” title so they are able to enter a new comment without scrolling through all that ‘garbage’ they are not interested in seeing EVERY visit to my site.
Any suggestions?
Hey again,
I have been playing around and believe I have what I was looking for. I found a few other sites with custom CSS examples (not as well done as this one, mind you ;)).
The “Leave Your Comment Now” link to the #respond tag works in IE but not in firefox for some reason. Engaged ID support for this one.
Finally, and I have been playing around but can’t seem to get this one working… I want to change the order of the CommentLuv, Name, E-mail fields from your example above (CommentLuv, Name, E-mail) to Name, E-mail, CommentLuv…
I have seen it done SOMEWHERE. Any thoughts?
D
In reply to Darren Sproat
Hi Darren, thanks for your thoughts on this…it’s true that browser compatibility can be irritating at time. Unfortunately, ID support doesn’t seem very responsive to our problems and it’s one of the reasons why I gave up ID comments after a while.
It might just be possible to change the fields, but it would require quite a lot of messing around and testing with the CSS and it might break depending on the size of the user’s screen etc…
Sorry for not being able to help out more, but it’s been a while since I did this and I’m not sure I remember half the stuff I knew at one time!