24 Oct 2009

Styling Tip: Simplify Comment Design

This is the first in a series of articles which will hopefully inspire and help you style the IntenseDebate comment system so it fits better with your blog. We’ve reached a point in IntenseDebate’s history where the basic HTML and CSS classes the comment system is built on is solid, so now you should be able to style it more than ever, without fear of your new styles breaking in future updates.

Styling IntenseDebate: Simplify comment design

If you have a really clean and simple blog, you might find IntenseDebate’s pretty glossy comment headers and rounded corners a bit too much. With just a few simple CSS rules, you can alter the comment header to your own liking. In this tutorial we’ll be modifying the .idc-c-h element, which is “ID language” for “.IntenseDebateComments-Comment-Header”.

How to use this guide
All styles can be added either to your “Custom CSS” box in your IntenseDebate admin panel (recommended, go to Settings>Custom CSS) or directly to your blogs/sites stylesheet.

  1. First, we’ll remove the normal background from the comment headers, apply a top border and make sure the padding and margins look good.
    #idc-container-parent #idc-container .idc-c-h {
    background: none;
    border-top: 1px solid #ddd;
    padding: 3px 0 0;
    }

    Background: none; means we’ve removed the normal background image. If you instead want a light gray background, you could try background: #f6f6f6;!

  2. Next, we’ll remove the spacing around the comment elements that make it not align with our new pretty top border. If you add in these CSS elements, you should know how all of the comment contents perfectly aligned with the top border:
    #idc-container-parent #idc-container .idc-c-h-inner {
    margin: 0;
    }

    #idc-container-parent #idc-container .idc-c-t,
    #idc-container-parent #idc-container .idc-c-b {
    margin-left: 0;
    margin-right: 0;
    }

    #idc-container-parent #idc-container .idc-c-b .idc-btn_s {
    margin-left: 0 !important;
    }

  3. Lastly, if you still want a special look for the comments posted by an admin, we can apply a special styling to admin comments by using the class .idc-c.idc-admin this class is used for all admin comments posted on your blog.

    #idc-container-parent #idc-container .idc-c.idc-admin .idc-c-h {
    border-top-color: #c00;
    }

    This style will exchange the light gray border we just added for a very fashionable dark red shade.

Tips on styling IntenseDebate:

  • When you want to start styling IntenseDebate, and need to know what the elements in the comment system are called, we highly recommend FireBug, a developer extension for Firefox. Using the Inspect feature, you can just click the element you want to style, and it will bring up all the CSS associated by it, including what the element’s CSS class is. Pretty handy!
  • Look up the element you want to style, for instance .idc-c-h and then apply #idc-container-parent to the rule when you write the CSS. In this example, you would write #idc-container-parent #idc-container .idc-c-h to style .idc-c-h, the comment header.
  • Put your new CSS rules in the Custom CSS box in your IntenseDebate admin panel, located at Settings>Custom CSS.

Make sure you check out our CSS Documentation for a complete list of elements you can style in IntenseDebate with tips on how to modify them, and feel free to let us know if you have any questions.  Until next time!

Posted by Isaac Keyet in features


Missing out on the latest IntenseDebate developments? Enter your email below to receive future announcements direct to your inbox. An email confirmation will be sent before your subscription is activated - please check your spam folder if you don't receive this.

Join 4,688 other followers

18 Comments »

  1. i dont need styling or lot of features.. all what i need is translation, what i send 3 weeks ago.. and as i read other comments im not alone who waits translations!!!

    Comment by zorroh — October 26, 2009 @ 11:33 am
  2. I just responded to your other comment. My apologies for the delay. Can you please resend your translation to the labs address? Thank you.

    Comment by Michael Koenig — October 26, 2009 @ 3:35 pm
  3. my translation is resended to labs address. i hope that now comes possobilty to use this translation…

    Comment by zorroh — October 27, 2009 @ 1:33 pm
  4. Thanks for posting the primer. Can't wait to dig into the ID css.

    Comment by yickit — October 26, 2009 @ 10:19 pm
  5. great thing… This takes the comments customization to another level.:)

    Comment by nikhilg — October 28, 2009 @ 10:57 pm
  6. How do I stop these comments people apply next to my picture?

    Comment by milfordresident — October 30, 2009 @ 9:13 pm
  7. Oh I get it – intensedebate put a comment there saying something like "milfordresident is hiding under a rock and doesn't want to be known" because I had not put one there yet – yeah you guys think your funny…that was funny.

    Comment by milfordresident — October 30, 2009 @ 9:57 pm
  8. Sorry for the confusion. We'll update that text.

    Comment by Michael Koenig — October 30, 2009 @ 9:59 pm
  9. Hi there,
    Thank you for your post!

    Could you maybe give a few tips on how to implement this system with a "right-to-left" design ?

    What should we do if we want to have all the comment area RTL ?

    Thanks,
    Tal

    Comment by @talgalili — November 2, 2009 @ 4:36 pm
  10. Hi Tal, we're planning on adding the ability to switch to a RTL layout, but we haven't figured out the CSS required just yet. In the meantime if you wanted to experiment, you could play with some custom CSS yourself. You'd most likely need to start with something like
    #idc-container { direction: rtl; }
    and then also experiment with some float:left; and other alignment attributes in the CSS.

    The plan is that this will be an option either associated automatically with certain languages, or available as a checkbox so you can easily enable/disable it.

    Comment by Beau Lebens — November 2, 2009 @ 7:05 pm
  11. thanks man.

    Comment by osman — November 20, 2009 @ 11:28 pm
  12. Thanks for posting the primer.

    Comment by Cafemsn — November 21, 2009 @ 12:10 am
  13. Nike translated into Chinese.basketball shoes

    Comment by basketball shoes — April 7, 2010 @ 7:58 am
  14. I am only 50 but can’t believe how everyone needs advice on how to survive an economic disaster or how anyone even got into an bad economic situation. Health problems should be the only excuse.basketball shoes

    Comment by kobe shoes — April 21, 2010 @ 7:00 am
  15. Life just like shoes at our feet. Only wear comfortable, it can help to move forward for you. Believe me, if you want to achieve something in life, you need a pair of good shoes. Our website [url="http://www.airyeezy.net /"] [/url] provides cheaper but high-quality shoes, hope you like it.

    Comment by nike air yeezy — April 23, 2010 @ 8:38 am
  16. Nike lebron shoes is more light, more low,and more stable.Nike succeeded do it again.

    Comment by gugu — May 24, 2010 @ 1:16 pm
  17. Skechers Shape UPS and discount shape ups are well-known for healthy-care shoes. And Skechers shape ups shoes is with best quality, huge selection and compare price. Therefore, skechers shape UPS is hot sale now.

    Comment by uggaustralia8 — July 5, 2010 @ 6:08 am
  18. thank you:D:D:D:D:D

    Comment by PeliculasTube — July 25, 2011 @ 8:01 pm

RSS feed for comments on this post. TrackBack URI

Leave a comment

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 2.5 License. | IntenseDebate – Official Blog
%d bloggers like this: