Base Threaded Comments Styling
Last updated on:
November 25, 2009
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
That was very useful piece of code, thanks for sharing!
gg
Thanks this was a sweet helper!
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/
Even that I don’t use WordPress – well done!
Wow, this could be very helpful.. hope to apply it right away.
same here!
Thanks for the informtaionen
Thanks. This part of code is difficult.
You saved me a lot of time! thanks a lot!
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!!!
Great post, really usefull
as always, an extremely helpful and straight forward example that is highly customisable.
You sir… are a legend!
Shweet. Saved my bacon. Thanks!
This is sweet!!!
Save me a lot of time…
Thanks A Lot Sir!
Even being experienced with front side development, the threaded comments was pretty tricky to get a handle on.
So awesome. Just help me with my project! That’s great! Thanks!
hi, i need a beautiful, eye-catching style for the comments on my forum,
just the style, not any programming code, any suggestion??
Chris,
Based upon your CSS here, I quickly whipped up a nice clean SCSS version of your WordPress comment styling for those who need it. Check it out over @ https://gist.github.com/4391954