TRICK : Customize your Intense Debate Comment Form

Intense debate is a comment system for blogs. It can be integrated with blogger and WordPress easily. If you are register with Intense Debate then Register Now!

Read my previous post: How to install Intense debate on blogger.

By default comment form is little messy. But with this simple CSS trick you can customize it and give a look and feel like WordPress comment form.

It’s very easy to change Intense Debate using the “Custom CSS” option in the settings section. This is important because there are lots of things which need to be customized. With this CSS trick you can do following customization..

1. Remove the flashy and annoying “Login” buttons
2. Increase the height of the comment box
3. Enable and customize the “CommentLuv” plugin for IntenseDebate
4. Move the “Name” and “Email” fields above the comment box

How to Customize Intense Debate default comment form with CSS trick..

Step 1. Login to Intese Debate account.. Click on sites menu at top and select the site you want to customize layout.

Step 2. Click on Custom CSS at right side of menu bar.(see images below) and then paste code into box.

Step 3. Paste following css code into box and click on save settings.

.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: 18px !important;}
#IDCommentNewThreadForm2 {position: absolute !important; top: 7px !important; left: 10px !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; }

Now refresh your blog post page and check new style to for blog comments.. you can make adjustments with width shown in blue highlighted text above. If you face any problem drop our comments and consider it sharing with friends..

Kindly Bookmark this Post using your favorite Bookmarking service: