![[Avatar]](/images/avatar26.png){kind=avatar}
CSS Documentation
Explainations/Shorthands
idc = Intense Debate Comments"c" = Comment
"h" = Head
"m" = Main/Menu
"t" = Top
"b" = Bottom
"u" = User
"i" = Info
Example: ".idc-c-h_u" = Intense Debate Comments - Comment - Head_User"
This document briefly describes the most important elements styled in the Intense Debate CSS files.
To modify the Intense Debate CSS styling in your own files: Append "#idc-container-parent" to your classes. This will make them have higher specificity, which makes your rules outrule the default ones more efficiently.
Example: To put in background for all comments, the code would look like #idc-container-parent #idc-container .idc-c { background: #CCC; }
Want to view the full CSS documents? View CSS files for reference here.
| #idc-container |
Intense Debate 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 { |
| .idc-cover |
Covers the main commenting area idc-cover contains the comments themselves, minus the Post New Comment section. Example: Change the header size on Comments, but not Post New Comment
#idc-container .idc-cover h3 { |
| .idc-new |
idc-new covers the Post New Comment section idc-new contains the Post New Comment section. Example: Put a background and some inline padding to the Post New Comment section.
#idc-container .idc-new { |
| .idc-head |
The very top part of Intense Debate This contains the Comments header, sorting, the logged in view, and more. Example: Delete the background of the logged in bar.
#idc-container .idc-head .idc-user { |
| .idc-head .idc-ctools |
Comment sorting This puts in the comment sorting ability. Example: Disable sorting.
#idc-container .idc-head .idc-ctools { |
| .idc-head .idc-user_i |
User information in the logged in view of idc-head. |
| .idc-footer |
The footer of Intense Debate Example: Take out the top border.
#idc-container .idc-footer { |
| .idc-thread |
Comment thread This is a basic thread in Intense Debate, complete with indention and other goodies. Example: Put a border on top of every thread.
#idc-container .idc-thread { |
| .idc-thread-h |
Comment thread header Collapse thread link, thread status and thread rss feed link. |
| .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 Intense Debate commenting system. Example: Take out the reply arrow.
#idc-container .idc-c { |
| .idc-c-h |
Comment header The top comment bar. This contains the avatar, avatar menu, name, reputation and voting functionality. Example: Take out the background and put in a light grey background and a top border instead.
#idc-container-parent #idc-container .idc-c .idc-c-h { |
| .idc-c-h .idc-right |
Comment header voting section Example: Disable voting.
#idc-container .idc-c .idc-c-h .idc-right { |
| .idc-c-h .idc-c-h_a |
Comment header avatar Contains a commenters avatar, and is the source of the avatar menu. |
| .idc-c-h .idc-c-h_u |
Comment header user information Displays the commenters name and the reputation indicator. |
| .idc-c-h .idc-right |
Comment header voting section Example: Disable voting.
#idc-container .idc-c .idc-c-h .idc-right { |
| .idc-m |
The fabulous avatar menu The avatar menu displays a personal message/your latest twitters, links back to other site's you have, links to other profiles on social networks, a befriend button and a personal comment rss feed. |
| .idc-c-t |
Comment top part This part of the comment is where the comment text is displayed. It also contains a textarea sometimes. Example: Put a thick grey border to the left of the comment text.
#idc-container .idc-c .idc-c-t { |
| .idc-c-t |
Comment top part This part of the comment is where the comment text is displayed. It also contains a textarea sometimes. Example: Put a thick grey border to the left of the comment text.
#idc-container .idc-c .idc-c-t { |
| .idc-c-b |
Comment bottom part This section contains the time stamp and the reply/submit comment buttons. Example: Create a fancy grey background.
#idc-container .idc-c .idc-c-b { |
| .idc-c-b .idc-c-b_info |
Comment bottom part, time stamp |
CSS files for reference:
- Main CSS file: idc-unpacked.css
- Enable threads CSS file: idc-threads-unpacked.css
- Theme version 1: idc-version1.css
- Theme version 2: idc-version2.css
Did we miss anything that you think should be in this guide? Don't hesitate to contact us.
More Help
Intense Debate on Satisfaction
Share an idea, get help or report a problem at Satisfaction!
Contact our support
If you haven't gotten your answer in our FAQ or Getsatisfaction forum, or if you want to give us feedback, then you're more than welcome to contact us!
Please send all your help inquires to support@intensedebate.com
Feedback: feedback@intensedebate.com
Thanks!
