IntenseDebate Comment System

CSS Documentation

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

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 theFireBug 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.

#idc-container

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>)

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

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

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

.idc-new

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

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

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

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

.idc-foot

The footer of IntenseDebate

Example: Remove the top border:

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

.idc-thread

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

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

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

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

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

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

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

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

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

.idc-c-h .idc-v

Comment header voting section.

Example: Disable voting:

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

.idc-m

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

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

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

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

End of document.