Listed in topics: Appearance, Customization

Customize Your CSS »Changing the Width

The easiest way to change the width of the comment system is to add some CSS code to the Custom CSS page of your site/blog.

Step-by-step guide

  1. Sign-in to your IntenseDebate account.
  2. Select your site/blog and go to Settings>Custom CSS (shortcut link: the Custom CSS page).
  3. Add the following code to the textbox:
    #idc-container-parent #idc-container {
    width: 460px;

    Important! You can change the width to any value you like between 350px-800px to better fit your blogs/sites layout.

  4. If you’re having trouble with the margin/padding of the comment system on your blog (perhaps it looks like IntenseDebate is pushed up against other elements) then try adding some padding instead. To do this, add the following code to your Custom CSS page instead:
    #idc-container-parent #idc-container {
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    padding-bottom: 0px;
    width: auto;

    Play around with the padding values to find something that fits your blog nicely. You can for instance change the padding for padding-left and padding-right to be 35px instead if more space would look better on your site/blog.

  5. Click Save Settings, and then view your blog to see your changes.

If you want more details on how to alter IntenseDebate elements using CSS, please visit the IntenseDebate CSS Documentation page. It contains a full list of all the elements in IntenseDebate that you can modify using CSS, and examples on how to do so.

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

Last modified: July 15, 2010 by Isaac Keyet

Help us improve:

We're always looking to improve our documentation. If this page didn't answer your question or left you wanting more, let us know! We love hearing your feedback. For support, please use the forums or contact support form. Thanks!

You must be logged in to post a comment.