![[Avatar]](/images/avatar26.png){kind=avatar}
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.
Step-by-step guide
- 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;
} - 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. This guide is mainly written for developers that have full access to the files that make up their blog.
- Publish the stylesheet and view the changes by reloading your blog! That was easy, right?
#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;
}
.idc-cover
Contains the comments themselves, minus the Post New Comment section.
Example: Change the header size on Comments, but not the Post New Comment header:
#idc-container-parent #idc-container .idc-cover h3 {
font-size: 25px;
line-height: 1.3em;
}
.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-ctools
Comment sorting. This styles the comment sorting function.
Example: Disable sorting:
#idc-container-parent #idc-container .idc-head .idc-ctools {
display: none;
}
.idc-head .idc-user_i
User information in the logged in view of idc-head.
.idc-footer
The footer of IntenseDebate
Example: Remove the top border:
#idc-container-parent #idc-container .idc-footer {
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-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.
.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 time stamp and the reply/submit comment buttons.
.idc-c-b .idc-c-b_info
Contains the comment’s time stamp.
.idc-c.idc-highlight
When a comment has just been posted, or is linked to, this class puts a background to the comment that lights it up. Then some JavaScript kicks in and makes the whole shebang move in a nice effect, when done it goes back to the looks of a normal comment.
Example: Disable the highlighting:
#idc-container-parent #idc-container .idc-c.idc-highlight {
background: none;
}
End of document.
Production
