Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
SCSS WordPress Comment Styles. Based on the WordPress threaded comments CSS over at css-tricks.com, I created this nested SCSS. It's basic, simple, and clean. Quickly copy, paste, and style away! Original CSS located at: http://css-tricks.com/snippets/wordpress/base-threaded-comments-styling/
/* =========================================================
Comments
========================================================= */
ol.commentlist {
list-style:none;
margin:0 0 1em;
padding:0;
text-indent:0;
li {}
li.alt {}
li.bypostauthor {}
li.byuser {}
li.comment-author-admin {}
li.comment {
border-bottom: 1px solid #ddd;
padding:1em;
.comment-author {} // end .comment-author
div.vcard {
font-weight: 14px;
cite.fn {
a.url {}
} // end cite.fn
img.avatar {
border:5px solid #ccc;
float:right;
margin:0 0 20px 20px;
} // end .avatar
img.avatar-32 {} // end .avatar-32
img.photo {} // end .photo
span.says {} // ebd .says
} // end .vcard
div.commentmetadata {} // end .commentmetadata
div.comment-meta {
font-size: 11px;
a {
color: #ccc;
} // end a
} // end div.comment-meta
p {font-size: 12px;} // end p
ul {
font-size: 12px;
list-style: none;
margin: 0 0 0 20px;
} // end ul
div.reply {
font-size: 11px;
a {font-weight: bold;} // end a
} // end reply
ul.children {
list-style:none;
margin: 12px;
text-indent:0;
li {} // end li
li.alt {}
li.bypostauthor {}
li.byuser {}
li.comment {}
li.comment-author-admin {}
li.depth-2 { border-left: 5px solid #ccc; margin:0 0 10px 10px; }
li.depth-3 { border-left: 5px solid #bbb; margin:0 0 10px 10px; }
li.depth-4 { border-left: 5px solid #aaa; margin:0 0 10px 10px; }
li.depth-5 {} // you get the idea
li.odd {} // end .odd
} // end ul.children
} // end li.comment
li.even {background:#fff;}
li.odd {background:#f6f6f6;}
li.parent {border-left:5px solid #ddd;}
li.thread-alt {}
li.thread-even {}
li.thread-odd {}
} // end commentlist
@brickbones

This comment has been minimized.

Show comment Hide comment
@brickbones

brickbones Mar 12, 2017

Thank you!

Thank you!

@lucascaires

This comment has been minimized.

Show comment Hide comment
@lucascaires

lucascaires Mar 10, 2018

Thank you so much! Saved me at least 1 hour haha

Thank you so much! Saved me at least 1 hour haha

@chrisschwartze

This comment has been minimized.

Show comment Hide comment
@chrisschwartze

chrisschwartze Apr 8, 2018

Thanks so much man! Legend

Thanks so much man! Legend

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment