Line under avatar?

[paranoya]

Hi guys, I was wondering if anyone knows how to display a line under the avatar. I saw that on Figma’s forum and I think it look quite dope.

[Canapin (Coin-coin le Canapin)]

Welcome paranoya!

(a sigma example link for reference: 👋 Introduce yourself! - #2 by Josh - General Discussion - Figma Community Forum)

It’s indeed a nice customization.

You can see how they do that using this guide:

Make CSS changes on Your Site

Want to make some CSS changes on your Discourse site but not sure where to start? You’ve come to the right place! You only need to read this topic if you’re very new to CSS. If you already know how to write and add CSS to your Discourse site, then you will most likely not need to read this topic. We’ll cover a few subjects. We’ll start with a brief introduction of what CSS is and some terms that you need to know. We will then move on to how you can add CSS to your Discourse site. Finally…

It will help you to make many visual customizations on your forum.

On Figma, we can target the line element like this:

They added this to their theme CSS:

.topic-body:before {
    background-color: var(--surface-high-contrast);
    content: "";
    display: block;
    position: absolute;
    top: 64px;
    left: -26px;
    height: calc(100% - 72px);
    width: 2px;
}

But some values need to be adjusted so it looks best on your own forum.

Their vertical line looks great because they also get rid of the horizontal line between each post.

.topic-body, .topic-avatar {
    border-top: 0;
    padding-top: 12px;
}

With a bit of tweak, you can achieve something like that:

[paranoya]

Was not expecting to get an answer so quickly. Thank you very much!

[Canapin (Coin-coin le Canapin)]

You’re welcome, we’re help to help!