Showing CommentLuv Heart in Intensedebate Comments

Since I use Blogger and I always wanted to use CommentLuv, so I decided to use CommentLuv using the IntenseDebate commenting system.

It's pretty good actually and it has increased the amount of comments on my blog.

The only bad thing about this is it's default commenting form is not very good looking. So, about couple of months ago, I changed some of it's design using the Custom CSS option on the Intense debate panel. And it turned out to be quite good looking.

If you don't know where the Custom CSS option, take a look at the image below.

Here's the code I used for the last couple of months.

#idc-container-parent #idc-container {
background:#ffffff;
}
#idc-container-parent #idc-container {
padding-left: 15px;
padding-right: 15px;
padding-top: 10px;
padding-bottom: 10px;
width: auto;
}
#idc-container-parent #idc-container,
#idc-container-parent #idc-container div {
font-size:15px;
font-family: DejaVu Sans Condensed;
}
#idc-container-parent #idc-container a {
color: #C91402;
}
#idc-container-parent #idc-container a:hover {
color: #C91402;
}
#idc-container-parent #idc-container h3 {
color: #000000;
}
#idc-container-parent #idc-container .idc-new {
background-color: #ffffff;
padding: 20px 20px;
width: auto;
}
#idc-container-parent #idc-container .idc-c.idc-admin {
border: 2px #9c3;
}
#idc-container-parent #idc-container .idc-c-h .idc-a {
border: 1px solid #CCC !important;
}
.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: 100px !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: 115px !important;}
#IDCommentNewThreadForm2 {position: absolute !important; top: 7px !important; left: 95px !important;width: 100% !important;}

Note : This code that I used doesn't have the Commentluv heart on the comments.

So, a few days ago, I decided to try to see if I can implement the commentluv-heart

just beside the comments like we see on wordpress blogs.

Well, after 4 hours of hard work and some intense experimentation with CSS I finally managed to do it. I don't even know why I'm giving away this tip ( I should be taking money for this, :p ).

Here's how it will look.

Ok, here's the code.

Now, if you want to make your commenting system look exactly as mine then, you can use my code.

#idc-container-parent #idc-container {
background: #ffffff;
}
#idc-container-parent #idc-container {
padding-left: 15px;
padding-right: 15px;
padding-top: 10px;
padding-bottom: 10px;
width: auto;
}
#idc-container-parent #idc-container,
#idc-container-parent #idc-container div {
font-size:15px;
font-family: DejaVu Sans Condensed;
}
#idc-container-parent #idc-container a[target='_blank']:after  {
display:inline;
content:"   " url(http://blogtipscodes.googlecode.com/files/littleheart.gif);
}
#idc-container-parent #idc-container a[target='_blank'] {
color: #C91402;
}
#idc-container-parent #idc-container a:hover {
color: #C91402;
}
#idc-container-parent #idc-container h3 {
color: #000000;
}
#idc-container-parent #idc-container .idc-new {
background-color: #ffffff;
padding: 20px 20px;
width: auto;
}
#idc-container-parent #idc-container .idc-c.idc-admin {
border: 2px #9c3;
}
#idc-container-parent #idc-container .idc-c-h .idc-a {
border: 1px solid #CCC !important;
}
.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: 100px !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: 115px !important;}
#IDCommentNewThreadForm2 {position: absolute !important; top: 7px !important; left: 95px !important;width: 100% !important;}

This is the code I use in the custom CSS section in the Intense debate panel presently.

If you don't want to change your current settings and just want to show the Heart beside the comments and keep the rest same, then you can use only this small code in the Custom CSS section.

#idc-container-parent #idc-container a[target='_blank']:after  {
display:inline;
content:"  " url(http://blogtipscodes.googlecode.com/files/littleheart.gif);
}

If you want to see a demo of it try commenting on this post or you could check out another of mine awesome Google+ Follower Plugin post.

Having problems with this ? Just leave a comment and share your views. We would love to get your feedback on this.