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


  1. User Avatar
    Permalink to comment#

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

  2. User Avatar
    Permalink to comment#

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

  3. User Avatar
    IT Rush
    Permalink to comment#

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

  4. User Avatar
    Permalink to comment#

    Thanks for the informtaionen

  5. User Avatar
    Andriy Skorbatuyk
    Permalink to comment#

    Thanks. This part of code is difficult.

  6. User Avatar
    Permalink to comment#

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

  7. User Avatar
    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!!!

  8. User Avatar
    Permalink to comment#

    Great post, really usefull

  9. User Avatar
    Jamie Murphy
    Permalink to comment#

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

    You sir… are a legend!

  10. User Avatar
    Permalink to comment#

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

  11. User Avatar
    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??

  12. User Avatar
    Permalink to comment#

    Can some one please help me style the comment form for WordPress in a way that is similar to on this site? The form will not fit appropriately on the page and i am getting frustrated any help will be greatly appreciated.

  13. User Avatar
    Permalink to comment#

    i want to ask that i was also trying to do threaded comments in wordpress, i coded it but it still appears in same line not in threaded form.But when i styled it with your given css it works and shows in threaded style.So my question is that styling is also required for threaded comments with coding.Can it be done without styling.

Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.