Line under avatar?

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:

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:

1 Like