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

We’re constantly working on improving the speed and usability of Intense Debate, and just thought we’d post something about our most recent achievements.

Firefox 3 Support!

We’re extremely stoked about this! We now support Firefox 3, so if ID was keeping you from giving Firefox 3 a try, you’ve now got no excuse!

Intense Debate Comment Restoration

There’s a new feature in the Intense Debate comments that you’ll hopefully never use. If, for some reason, you browse away before posting your comment, or you login as you’re posting, you won’t lose your comment. Just open the page again, and you’ll find your comment right where you left it.

Widget Update

Some of you didn’t like the way the Intense Debate logo was implemented in the last revision of our widgets (by widgets we mean the Recent Comments, the Blog Stats widget, etc). We’ve now changed this to a non-intrusive text link.

Bugfixes and updates

• We’re happy to report that Intense Debate now works perfectly in the NetNewsWire RSS reader.
• Logging in, displaying the user menu, and voting have all been optimized and are now much faster.
• The error messages within the Intense Debate comments have been looked over, and we’ve updated a big chunk of them to make them more clear.
• And more…

People-Powered Customer Service

Ask a question, share an idea, report a problem, or just talk…

Service and support by Satisfaction

If you have any suggestions for us, things you think could change or if you have new ideas, please contact us ASAP! You can always reach us on the Getsatisfaction forums.

Posted by Isaac Keyet in News