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 {}
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


  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:

  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!


Leave a Comment

Posting Code

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like this:

<div>Example code</div>

You don't need to escape code in backticks, Markdown does that for you. If anything screws up, contact us and we can fix it up for you.

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