# 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.

- Type: SCSS
- Runs: Site-wide header
- Category: [Comments](https://wpide.com/library/category/comments/)
- Tags: comments, design, scss
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/modern-comment-list-styles/

## Code

```scss
// 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 use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Modern Comment List Styles" in its snippet library and add it in one click; or create a new SCSS snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/