Archived topic

Styling Comment

3 replies · Started by Willya on November 9, 2022

Viewing posts 1–4 of 4

November 9, 2022 at 5:20 pm #2409075

Hi,

I would like to customize my comment like this: https://prnt.sc/Lov05KqikHnJ

I tried myself to CSS-it, but can not find a way to..
1. create a border-bottom for each comment (see screenshoot)
2. create a border-left for third comment (see screenshoot)

I have input my website url in private information.

Thanks!

November 9, 2022 at 5:41 pm #2409094

Hi Willya,

Try adding this in Appearance > Customize > Additional CSS:

ol.comment-list > li.comment {
    border-bottom: solid 1px #000;
    padding-bottom: 20px;
}

ol.comment-list > li.comment > ul.children > li.comment > ul.children > li.comment {
    border-left: solid 1px #000;
    padding-left: 20px;
}

ol.comment-list > li.comment > ul.children > li.comment > ul.children > li.comment:not(:last-of-type) {
    margin-bottom: 20px
}

You may change the values to your preference.

November 9, 2022 at 7:03 pm #2409153

Thank you Fernando. I change some of the values, but its easy as you have provided me with the classes of CSS.

November 9, 2022 at 7:12 pm #2409158

You're welcome Willya!

This archived topic is closed to new replies.

Start building better websites today.