Last active
October 19, 2022 14:25
-
-
Save jeffgolenski/4391954 to your computer and use it in GitHub Desktop.
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/
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* ========================================================= | |
| 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 |
Thanks for this!
BTW line 5 should now be ol.comment-list
https://gist.github.com/shaharhesse/08ab888c6aa8b3c2b94c2c48fbb1764c
Thanks for the code!
line 28 seems wrong to me font-weight: 14px;. You mean font-size, right?
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Thanks so much man! Legend