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

Bonjour!  We spent last week in Quebec with our fellow Automattic colleagues for our annual company meetup, and we had an amazing time.  This was the first time Jon, Isaac, Beau, and I have been in the same room, so it was a pleasure to work side-by-side and kick around some ideas together.

We also got the chance to collaborate with the rest of the Automattic crew to look at how IntenseDebate can integrate with other Automattic projects, and learn how to apply their scaling knowledge to our systems.

While some of the projects aren’t ready to be disclosed yet, here are some general details about what we’re working on (please note that these include long-term projects):

• Backend Loading Optimization: We’re really excited about this project.  We are currently working on a new method for optimizing how we load comments and trackbacks.  This will improve load times even as the volume of comments on your blog continues to increase, as well as correct a couple of bugs.  Loading IntenseDebate will be even more seamless!
• More Sync Improvements: We had the opportunity to pick the brains of our brilliant WordPress system engineers about the inner-workings of WordPress. We will be adapting some of the code and principles they use to improve the quality of our syncing engine.  This is going to be huge for our plugin and will correct those pesky sync discrepancies that have been floating around affecting comment counts and backups.
• WordPress Plugin Overhaul: The core of our WordPress plugin was written prior to joining Automattic.  Since then our understanding of the WordPress codebase has drastically improved.  We have now identified significant portions of the plugin code that can be simplified or optimized making it much more lightweight and perform better.  The principles that we are applying in this overhaul will eventually be applied to our integrations with other platforms across the board.
• Moderation, Moderation, Moderation! Bug fixes aside, optimizing moderation is high priority.  The main moderation project that we’re currently working on is reworking your moderation page.  We will be minimizing the time you spend moderating comments and filtering spam, and simplifying your user experience.
• Support Documentation and Forums: We’re beefing-up our FAQ and support resources for end users, publishers and developers. This will help  everyone to find the answers they’re looking for.  More info to come on this one soon.

It’s an exciting time here at IntenseDebate!  We’re looking forward to pushing out loads of new code, and we will be depending on you for your feedback.  Keep an eye right here on our blog for the latest news.

Posted by Michael Koenig in News,WordPress Plugin

As Matt mentioned in the September Wrap-Up, we are heading to Québec City with the rest of the Automattic crew for our biannual meetup to work on some top-secret projects.

Here at Automattic we are spread across the world, and are in a sense a distributed company.  For instance, Beau is located in San Fransisco, CA; Jon is in Boulder, CO; I’m in Chicago, IL; and Isaac is in Veddige, Sweden.  So we relish the opportunity to get together to kick-it, toss around some ideas, and collaborate with the rest of the Automattic team.

Past meetups have yielded some super-cool features and enhancements for IntenseDebate like our PollDaddy Polls plugin, Gravatar integration, localization, backend integration, and some top-secret projects that are still underway.  We’ve also contributed to WordPress.com features like Reply-By-Email which was a product of our time with the Automattic crew last October in Breckenridge, Colorado (picture below).

The Automattic family has grown since our last meetup so we’re excited to have the opportunity to meet and trade ideas with our newest colleagues. With that in mind, while support will still be readily available and answered daily, please allow for some extra-time in the upcoming week as we might take slightly longer to respond. We greatly appreciate your patience.

You can expect great things to come!

Posted by Michael Koenig in News

Every now and than then their there are times when we all slip-up with a misused word in a blog post.  It’s slightly embarrassing to find after you publish your post, especially if someone has to point it out to you.  Thankfully Raphael Mudge recently joined us at Automattic and is saving us from making careless mistakes with his intelligent proofreading technology, After the Deadline (download it here for your blog/website).

After The Deadline brings cutting-edge contextual spell checking, grammar checking, and style checking to the web, in a seamless service integration with the most popular online publishing tools and platforms (WordPress, TinyMCE, etc.). Through a combination of carefully-tuned statistical machine learning and NLP techniques, AtD’s sophisticated language models can catch and suggest corrections to subtle errors in context – even in poetry! http://bit.ly/badpoetry

AtD is that second set of eyes we all love to have to proofread our blog posts.  Wouldn’t it be amazing to have that same expert spelling and grammar checking for your comments?  Now you can with the After the Deadline IntenseDebate plugin!  Raphael has been hard at work to bring you a lightweight solution to catch any spelling, misused words, and grammar errors before you post your comment.

Give it a try when you post a comment.  After typing your comment select the “Check Spelling” icon at the top right of comment textbox.  Misspelled words will have a red underline while grammar errors will have a green underline.  Because AtD uses artificial intelligence to identify misused words, you no longer have too to worry about contextual errors.  Click the underlined word and you’ll be presented with alternative suggestions to correct your mistake.

Visit your Plugins page in your Blog Account admin panel to locate and activate the AtD plugin.  Make sure you check out the rest of the IntenseDebate plugins while you’re there like PollDaddy Polls, Seesmic video comments, Smileys, and loads more.  Learn more about our Plugins and Plugins API.

Posted by Michael Koenig in features

We’re excited to announce the latest release for our IntenseDebate.com interface redesign: your brand new Admin Panel and Blog Account pages. We’re sure that you’ve noticed the unmistakable design changes to the Blog Overview, Moderation, Comment History, Plugins, Settings and Layout, and Tools pages, and we think you’ll agree that it’s a major improvement!

Over the past weeks we have released redesigns for our homepage, your User Account page, and your account Dashboard and Following page.  These releases feature our new sidebar navigation. So far your feedback has been excellent, and we’re pleased to hear that you’ve found it to be much improved (we were told that it was “life changing” and we agree!).

Our old blog account pages were definitely due for an overhaul, especially the Settings page.  That was our go-to page when we introduced new admin features, and admittedly it was getting a bit crowded.  The redesign embraces the sidebar and has split your old Blog Settings into a couple of different tabs:

• Blog Account overview: manage email notification settings, blog title and RSS.
• Moderation: for all of your spam and moderation management tools.
• Layout: customize your comment section components and language options.
• Comments: manage Facebook Connect, Twitter Sign-in, along with all of your other comment settings.
• Custom CSS: this is a brand new tab where you can style and add new CSS to your comment section without having to upload files anywhere!
• Miscellaneous: customize your comment links among other elements.

Give it a try and let us know what you think! There’s more to come (especially for our moderation page) so keep an eye on our blog for more info.

Posted by Michael Koenig in features