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.

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: [תמונה] Making custom CSS changes on your site Site Management bookmark This guide explains how to make CSS changes on your Discourse site, including an introduction to CSS, where to add CSS in Discourse, and how to find the right selectors using browser inspection tools. person_raising_hand Required user level: Administrator Summary This guide covers: A brief introduction to CSS and key concepts How to add CSS to your Discourse site using theme components Using browser inspection tools to find the right CSS selectors Understanding CSS basics C… It will help you to make many visual customizations on your forum. On Figma, we can target the line element like this: [image] 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: [image]

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

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

קו מתחת לאווטאר?

מפתח

Canapin (Coin-coin le Canapin) 25 בפברואר,‏ 2023,‏ 6:38pm 4

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

נושא		תגובות	צפיות
Could we have a thin outline border around the avatar pictures? UX	4	1470	23 ביוני,‏ 2015
How to move the avatar_template inside the topic body Development css	4	294	29 בדצמבר,‏ 2024
Can the user avatars on the website and the content page of the post be hidden? Product Support	1	153	4 בספטמבר,‏ 2024
CSS: how to make the line (border) between messages bigger? Product Support	10	1889	3 באוגוסט,‏ 2016
How to change the color of the line below the top navigation Product Support	8	1414	21 בדצמבר,‏ 2016

קו מתחת לאווטאר?

נושאים קשורים