Grow your CSS skills. Land your dream job.

Last updated on:

Base Threaded Comments Styling

ol.commentlist { list-style:none; margin:0 0 1em; padding:0; text-indent:0; }
ol.commentlist li { }
ol.commentlist li.alt { }
ol.commentlist li.bypostauthor {}
ol.commentlist li.byuser {}
ol.commentlist li.comment-author-admin {}
ol.commentlist li.comment { border-bottom:1px dotted #666; padding:1em; }
ol.commentlist li.comment div.comment-author {}
ol.commentlist li.comment div.vcard { font:normal 16px georgia,times,serif; }
ol.commentlist li.comment div.vcard cite.fn { font-style:normal; }
ol.commentlist li.comment div.vcard cite.fn a.url {}
ol.commentlist li.comment div.vcard img.avatar { border:5px solid #ccc; float:right; margin:0 0 1em 1em; }
ol.commentlist li.comment div.vcard img.avatar-32 {}
ol.commentlist li.comment div.vcard img.photo {}
ol.commentlist li.comment div.vcard span.says {}
ol.commentlist li.comment div.commentmetadata {}
ol.commentlist li.comment div.comment-meta { font-size:9px; }
ol.commentlist li.comment div.comment-meta a { color:#ccc; }
ol.commentlist li.comment p { font-size:11px; margin:0 0 1em; }
ol.commentlist li.comment ul { font-size:11px; list-style:square; margin:0 0 1em 2em; }
ol.commentlist li.comment div.reply { font-size:11px; }
ol.commentlist li.comment div.reply a { font-weight:bold; }
ol.commentlist li.comment ul.children { list-style:none; margin:1em 0 0; text-indent:0; }
ol.commentlist li.comment ul.children li {}
ol.commentlist li.comment ul.children li.alt {}
ol.commentlist li.comment ul.children li.bypostauthor {}
ol.commentlist li.comment ul.children li.byuser {}
ol.commentlist li.comment ul.children li.comment {}
ol.commentlist li.comment ul.children li.comment-author-admin {}
ol.commentlist li.comment ul.children li.depth-2 { border-left:5px solid #555; margin:0 0 .25em .25em; }
ol.commentlist li.comment ul.children li.depth-3 { border-left:5px solid #999; margin:0 0 .25em .25em; }
ol.commentlist li.comment ul.children li.depth-4 { border-left:5px solid #bbb; margin:0 0 .25em .25em; }
ol.commentlist li.comment ul.children li.depth-5 {}
ol.commentlist li.comment ul.children li.odd {}
ol.commentlist li.even { background:#fff; }
ol.commentlist li.odd { background:#f6f6f6; }
ol.commentlist li.parent { border-left:5px solid #111; }
ol.commentlist li.thread-alt { }
ol.commentlist li.thread-even {}
ol.commentlist li.thread-odd {}

Reference URL

Comments

  1. Permalink to comment#

    That was very useful piece of code, thanks for sharing!

  2. Permalink to comment#

    Thanks this was a sweet helper!

  3. eric
    Permalink to comment#

    I use this article ALL the time… but I finally had use this one w/ it:

    http://www.scriptygoddess.com/archives/2009/01/15/wordpress-wp_list_comments/

  4. Permalink to comment#

    Even that I don’t use WordPress – well done!

  5. Wow, this could be very helpful.. hope to apply it right away.

  6. Permalink to comment#

    Thanks for the informtaionen

  7. Thanks. This part of code is difficult.

  8. You saved me a lot of time! thanks a lot!

  9. Permalink to comment#

    The other day I made a question regarding how you make such beautiful comments section…. I have just found out a little on modyfing text boxes and text inputs…

    Thanks a lot!!!

  10. Mark
    Permalink to comment#

    Great post, really usefull

  11. as always, an extremely helpful and straight forward example that is highly customisable.

    You sir… are a legend!

  12. Permalink to comment#

    Shweet. Saved my bacon. Thanks!

  13. This is sweet!!!
    Save me a lot of time…

    Thanks A Lot Sir!

  14. Permalink to comment#

    Even being experienced with front side development, the threaded comments was pretty tricky to get a handle on.

  15. Permalink to comment#

    So awesome. Just help me with my project! That’s great! Thanks!

  16. Permalink to comment#

    hi, i need a beautiful, eye-catching style for the comments on my forum,
    just the style, not any programming code, any suggestion??

  17. Permalink to comment#

    Even, it is 4 years old (this post), still useful. Thx!

    Cheers,
    Sahin

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".