public
Last active

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/

  • Download Gist
WordPress Comment Styling SCSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104
/* =========================================================
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

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.