We’ve received a lot of requests recently to move the comment form to the top of the comment section rather than having it at the bottom. We prefer having the comment form at the bottom so your visitors have a chance to catch-up on the debate before posting their comment – that helps cut down on duplicate comments and encourages interaction. But it’s your site and we’re all about customization!

To make it happen, you need to add the following CSS to your Custom CSS page in your IntenseDebate account:

#idc-container-parent #idc-container {
position: relative;
padding-top: 320px;
}

#idc-container-parent #idc-container #IDCommentsNewThreadCover {
position: absolute;
top: 0;
left: 0;
width: 100%;
}

For more CSS help, check out our CSS Documentation and feel free to give us a shout at support@intensedebate.com with any questions. Oh, and don’t forget to check out our other styling tips to simplify your comment section design!

Posted by Michael Koenig in features

This is the first in a series of articles which will hopefully inspire and help you style the IntenseDebate comment system so it fits better with your blog. We’ve reached a point in IntenseDebate’s history where the basic HTML and CSS classes the comment system is built on is solid, so now you should be able to style it more than ever, without fear of your new styles breaking in future updates.

Styling IntenseDebate: Simplify comment design

If you have a really clean and simple blog, you might find IntenseDebate’s pretty glossy comment headers and rounded corners a bit too much. With just a few simple CSS rules, you can alter the comment header to your own liking. In this tutorial we’ll be modifying the .idc-c-h element, which is “ID language” for “.IntenseDebateComments-Comment-Header”.

How to use this guide
All styles can be added either to your “Custom CSS” box in your IntenseDebate admin panel (recommended, go to Settings>Custom CSS) or directly to your blogs/sites stylesheet.

1. First, we’ll remove the normal background from the comment headers, apply a top border and make sure the padding and margins look good.
   #idc-container-parent #idc-container .idc-c-h {
background: none;
border-top: 1px solid #ddd;
padding: 3px 0 0;
}

   Background: none; means we’ve removed the normal background image. If you instead want a light gray background, you could try background: #f6f6f6;!

2. Next, we’ll remove the spacing around the comment elements that make it not align with our new pretty top border. If you add in these CSS elements, you should know how all of the comment contents perfectly aligned with the top border:
   #idc-container-parent #idc-container .idc-c-h-inner {
margin: 0;
}

   #idc-container-parent #idc-container .idc-c-t,
   #idc-container-parent #idc-container .idc-c-b {
   margin-left: 0;
   margin-right: 0;
   }

   #idc-container-parent #idc-container .idc-c-b .idc-btn_s {
   margin-left: 0 !important;
   }

3. Lastly, if you still want a special look for the comments posted by an admin, we can apply a special styling to admin comments by using the class .idc-c.idc-admin this class is used for all admin comments posted on your blog.
   
#idc-container-parent #idc-container .idc-c.idc-admin .idc-c-h {
border-top-color: #c00;
}


   This style will exchange the light gray border we just added for a very fashionable dark red shade.

Tips on styling IntenseDebate:

• When you want to start styling IntenseDebate, and need to know what the elements in the comment system are called, we highly recommend FireBug, a developer extension for Firefox. Using the Inspect feature, you can just click the element you want to style, and it will bring up all the CSS associated by it, including what the element’s CSS class is. Pretty handy!
• Look up the element you want to style, for instance .idc-c-h and then apply #idc-container-parent to the rule when you write the CSS. In this example, you would write #idc-container-parent #idc-container .idc-c-h to style .idc-c-h, the comment header.
• Put your new CSS rules in the Custom CSS box in your IntenseDebate admin panel, located at Settings>Custom CSS.

Make sure you check out our CSS Documentation for a complete list of elements you can style in IntenseDebate with tips on how to modify them, and feel free to let us know if you have any questions.  Until next time!

Posted by Isaac Keyet in features

You may have noticed some changes that were rolled out in last night’s release. Three cheers to the team for getting all this out!

HTML Parsing
We’re proud to answer the call and release HTML support in IntenseDebate comments. If you’ve got the urge to add a little self-expression, feel free to add some bold or italic characters. You can also customize your links and add some photos to your comments. You can allow your readers to add images to their comments by enabling this option in your Blog Settings page (login into IntenseDebate.com, select the tab named after your blog followed by the “Settings” sub-tab). The option is located on the right side of the page under the heading “Display Settings.” Image tags are disabled by default. IntenseDebate supports the following HTML tags – <a>, <b>, <i>, <u>, <em>, <p>, <blockquote>, <br>, <strong>, <strike>, <img>.

Popular Blog Posts Widget
We released a new widget that displays the most popular blog posts on your blog (as determined by the number of comments made per post). By displaying this widget on your home page, you’ll be able to breath new life into your past blog posts and drive some fresh traffic their way. This widget is the next step in bringing your content into the light (check out our past progress here & here). This widget can be found on our Add-on’s page along with our other kick-ass widgets (Blog Stats, Recent Comments, My Recent Comments, and Top Commenters).

New Usernames & Profile URL’s
After much deliberation, we’ve decided to take the plunge and update our approach to usernames and profile URL’s. Before we get any further into this, this does not have anything to do with your Display Name – your Display Name has not changed.

Basically we’ve changed your username from an account ID number to a friendlier name. Integrating your IntenseDebate account with other 3rd party services like FriendFeed will be a bit easier now. For those of you that have enabled IntenseDebate’s FriendFeed Comment Retrieval you might recall having to enter your IntenseDebate profile URL that consisted of an ugly user account ID number. Your profile URL is a little prettier and looks a little something like this: http://intensedebate.com/people/michael.

If you are using our IntenseDebate FriendFeed Comment Retrieval, you do not need to update your IntenseDebate profile URL in your FriendFeed account. You’re all set.

Here’s the skinny on the new usernames. Your username has automatically been updated. Please note that any incompatible characters were removed from your username. In addition, numbers from your IntenseDebate account ID may have been added to your username in the event that there were duplicate usernames. Again, this will not affect your IntenseDebate Display Name.

We wanted to let you know about this in case you want to set your username and profile URL to something that fits your style so you can remember it more easily. To update your username please edit your IntenseDebate user profile. We apologize for the inconvenience, but it will be worth it in the long run!

As always, please feel free to drop us a line with any questions or feedback.

Sincerely,
The fellas at IntenseDebate

Posted by Michael Koenig in features