Last active

Embed URL

HTTPS clone URL

SSH clone URL

You can clone with HTTPS or SSH.

Download Gist

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/

View 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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.