IntenseDebate Comment System

This document briefly describes the most important elements styled in the IntenseDebate CSS files.

Important: In order to style the IntenseDebate Widgets (not the comment system), the styles needs to be applied to the blog’s/website’s template directly, usually style.css or similar.

How to use this document

To modify the IntenseDebate CSS styles in your own blog’s stylesheet, append “#idc-container-parent” to your classes. This will make them have higher specificity, which makes your rules override the default ones more efficiently.

For example, to style an individual comment header (.idc-c-h), IntenseDebate natively uses the class

#idc-container .idc-c-h { ruleshere }

When styling IntenseDebate yourself, append #idc-container-parent, like so:

#idc-container-parent #idc-container .idc-c-h { ruleshere }

Step-by-step guide

1. Write the CSS needed to make the change you want. For example: To add a colored background for all comments, the code would look like this:

   #idc-container-parent #idc-container .idc-c {
background: #CCC;
}

2. Login to your account at IntenseDebate.com, find the blog you want to style and click Settings. Then find Custom CSS in the sidebar. This page enables you to paste any CSS styles you write yourself or find here right there on the page. Just hit Save in the bottom when you’re done.

   OR: Access your blog’s stylesheet and add the CSS you just wrote to the file. Anywhere in your stylesheet will work.

   Note: Not all blog hosting providers lets you edit or even view your blog’s stylesheet.

3. Go to your blog to view the changes.

Useful tools when styling IntenseDebate

• We highly recommend the FireBug plugin for FireFox. It enables you to “Inspect” any element on a website (such as the parts of your comment system), which enables you to easily see how IntenseDebate natively styles an element in the comment system. More importantly though, you can find out what the classname is for the element you want to tweak.

Change font & font size↑ Table of Contents ↑

We have some great documentation on changing fonts and font sizes.

Change text/background/link colors↑ Table of Contents ↑

We have some great documentation on changing text, background, and link colors.

Changing the Width↑ Table of Contents ↑

We have some great documentation on changing the width of the comment system.

Moving Comment Box to the Top↑ Table of Contents ↑

We have some great documentation on moving the comment box to the top.

#idc-container↑ Table of Contents ↑

IntenseDebate Comments Container. This is the element that contains the whole comment system.

Example: Add a 2px wide, light grey border around the comments:
#idc-container-parent #idc-container {
border: 2px solid #CCC;
}

All headers (<h3>)↑ Table of Contents ↑

The <h3> header type is used for both the Comments (#) header and Post a New Comment. You can style these easily by using the following code.

Example: Make the header sizes smaller:

#idc-container-parent #idc-container h3 {
font-size: 15px;
line-height: 1.3em;
}

Comments (#) header↑ Table of Contents ↑

This header keeps track of how many comments the page currently has. You can style it differently than the Post a New Comment header by using the following rule:

#idc-container-parent #idc-container .idc-head h3 {
color: #c00;
}

Within the header, we’ve put in hooks so you can easily disable the comment count or modify the looks of it. These classes are called .idc-commentcount_wrap and .idc-commentcount.

Example: Get rid of the comment count altogether:

#idc-container-parent #idc-container h3 .idc-commentcount_wrap {
display: none;
}

Example: Style the count number in a different color to make it stand out more:

#idc-container-parent #idc-container h3 .idc-commentcount {
color: #c00;
}

Also, if you want to style just the “Comments” part of the header, you can use the class idc-commentcount_label.

.idc-comments↑ Table of Contents ↑

Contains the comments themselves, minus the Post New Comment section.

.idc-new↑ Table of Contents ↑

idc-new contains the Post New Comment section.

Example: Put a background and some inline padding to the Post New Comment section:

#idc-container-parent #idc-container .idc-new {
background-color: #f0f0f0;
padding: 10px 15px;
width: auto;
}

.idc-head↑ Table of Contents ↑

The very top part of IntenseDebate. This contains the Comments header, sorting, the logged in view, and more.

Example: Remove the background of the logged in bar:

#idc-container-parent #idc-container .idc-head .idc-user {
background: none;
}
* .idc-user selects the logged in bar, and the logged in bar only.

.idc-head .idc-toolbar↑ Table of Contents ↑

Comment sorting. This styles the comment sorting function.

Example: Change the styling of the selected sorting item:

#idc-container-parent #idc-container .idc-head .idc-toolbar .idc-sel {
color: #CC0000;
}

.idc-head .idc-user_i↑ Table of Contents ↑

User information in the logged in view of idc-head.

.idc-foot↑ Table of Contents ↑

The footer of IntenseDebate

Example: Remove the top border:

#idc-container-parent #idc-container .idc-foot {
border: none;
}

.idc-thread↑ Table of Contents ↑

Comment thread. This is a basic thread in IntenseDebate, complete with indention and other goodies.

Example: Add a thick border to each thread level:

#idc-container-parent #idc-container .idc-thread {
border-left: 10px solid #CCC;
padding: 0 0 0 10px;
}

.idc-c↑ Table of Contents ↑

A comment. This is the wrapper for a comment. Use it to refer to different elements of the comment structure. This is by far the most important part of the IntenseDebate commenting system.

Example: Take out the reply arrow:

#idc-container-parent #idc-container .idc-c {
background: none;
}

.idc-c.idc-admin↑ Table of Contents ↑

A comment made by an admin. By using this class you can highlight the admin comments in whatever way you want.

Example: Make all text posted by an admin green:

#idc-container-parent #idc-container .idc-c .idc-admin {
color: #9c3;
}

.idc-c.idc-c-highlighted↑ Table of Contents ↑

When a comment is posted, this style is applied to the comment to highlight it in a light yellow color to indicate that it’s new and has been posted. The effect is improved by some javascript that slides the background image up, so it looks like it fades away. This class is also applied of you link directly to a comment using the comment permalink (URL+#IDComment123456789).

Example: Remove the highlighting:

#idc-container-parent #idc-container .idc-c.idc-c-highlighted {
background: none;
}

.idc-c.idc-facebook↑ Table of Contents ↑

Comments posted using Facebook accounts will have this style applied to them. This means you can style these comments differently if you want!

Example: Add a blue top border to all comments posted using Facebook Connect (and remove the background image from the comment header):

#idc-container-parent #idc-container .idc-c.idc-facebook {
border-top: 1px solid #3b5998;
}
#idc-container-parent #idc-container .idc-c-h {
background: none;
padding-top: 3px;
}


.idc-c.idc-twitter↑ Table of Contents ↑

If a comment was posted using a Twitter account to login to IntenseDebate, their comments will have this style applied to them. IntenseDebate doesn’t use this style currently, but you could!

Example: Add a turquoise top border to all comments posted using Twitter (and remove the background image from the comment header):

#idc-container-parent #idc-container .idc-c.idc-twitter {
border-top: 1px solid #33ccff;
}
#idc-container-parent #idc-container .idc-c-h {
background: none;
padding-top: 3px;
}


.idc-c-h↑ Table of Contents ↑

Comment header. The top bar in a comment. This contains the avatar, avatar menu, name, reputation and voting functionality.

Example: Take out the background and put in a light gray background and a top border instead:

#idc-container-parent #idc-container .idc-c .idc-c-h {
background: #F6F6F6;
border-top: 1px solid #CCC;
}

.idc-c-h .idc-a↑ Table of Contents ↑

Comment header avatar. Contains the avatar associated with the person posting the comment.

Example: Apply a cool blue border to the avatar images:

#idc-container-parent #idc-container .idc-c-h .idc-a {
border: 1px solid #09f !important;
}

.idc-c-h .idc-i↑ Table of Contents ↑

Comment header profile information. Displays the commenters name and the reputation indicator.

.idc-c-h .idc-v↑ Table of Contents ↑

Comment header voting section.

Example: Disable voting:

#idc-container-parent #idc-container .idc-v {
display: none;
}

.idc-m↑ Table of Contents ↑

The fabulous avatar menu. The avatar menu displays a personal message or your latest twitters (set this setting in your Edit Profile page), links back to other site’s you have, links to profiles on other social networks, a Follow button and a personal comment RSS feed. Your readers can sign up for an IntenseDebate account and get all this extra functionality. It helps build a strong community, as everyone gets to know more about one another.

.idc-c-t↑ Table of Contents ↑

Comment top part. This part of the comment is where the comment text is displayed. It contains a textarea instead of text if the comment styles are used as a container for a reply or an add new comment form.

Example: Put a thick gray border to the left of the comment text:

#idc-container-parent #idc-container .idc-c .idc-c-t {
border-left: 4px solid #999;
}

.idc-c-t-inner↑ Table of Contents ↑

A <div> kept inside .idc-c-t that ensures stability and the addition of child div elements within a posted comment. This is useful if you’re using a WYSIWYG editor plugin, for instance. Can also be used to create fancy borders and other creative stuff!

.idc-c-b↑ Table of Contents ↑

Comment bottom part. This section contains the reply/submit comment buttons and the thread indicator if the comment has replies.

Tags: css, documentation — Can't find your answer here? Let us know.

Last modified: February 23, 2012 by Michael