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.
AI-generated summary
The discussion revolves around customizing the Discourse forum by adding a line under the avatar. paranoya inquired about this feature, which they saw on Figma’s forum. Canapin provided a helpful response, pointing to a guide on making CSS changes on a Discourse site. They also shared the CSS code used by Figma to achieve this customization, which includes adding a vertical line and removing the horizontal line between posts. paranoya expressed gratitude for the quick response, and Canapin offered further assistance.
Welcome paranoya!
(a sigma example link for reference: https://forum.figma.com/t/introduce-yourself/102/2)
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:
Was not expecting to get an answer so quickly. Thank you very much!
You’re welcome, we’re help to help! 