Modern Comment List Styles
Restyles the comment list as soft cards with round avatars, a highlighted post author and thin lines that show reply threads.
Opens WPIDE on
Code
// Style settings.
$accent: #2271b1;
$card-bg: rgba(127, 127, 127, .07);
$radius: 10px;
$indent: 1.5rem;
.comment-list,
.wp-block-comment-template {
list-style: none;
padding-left: 0;
.comment-body,
li > .wp-block-columns,
li > .wp-block-group {
padding: 1rem 1.25rem;
margin-bottom: 1rem;
background: $card-bg;
border-radius: $radius;
}
.children {
list-style: none;
margin-left: $indent;
padding-left: $indent;
border-left: 2px solid rgba($accent, .25);
}
.avatar {
border-radius: 50%;
}
.bypostauthor > .comment-body,
.bypostauthor > .wp-block-group,
.bypostauthor > .wp-block-columns {
box-shadow: inset 3px 0 0 $accent;
}
}Notes
Theme styles with higher specificity may win; inspect the comment markup of your theme if something does not change.
How to add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.