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: [image] 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]

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

Line under avatar?

Development

paranoya February 25, 2023, 6:37pm 3

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

Topic		Replies	Views
Could we have a thin outline border around the avatar pictures? UX	4	1469	June 23, 2015
How to move the avatar_template inside the topic body Development css	4	292	December 29, 2024
Can the user avatars on the website and the content page of the post be hidden? Product Support	1	153	September 4, 2024
CSS: how to make the line (border) between messages bigger? Product Support	10	1888	August 3, 2016
How to change the color of the line below the top navigation Product Support	8	1413	December 21, 2016

Line under avatar?

Related topics