# Line under avatar?

**URL:** https://meta.discourse.org/t/line-under-avatar/256253
**Category:** Development
**Tags:** css
**Created:** [February 25, 2023, 6:24pm UTC](https://meta.discourse.org/t/line-under-avatar/256253 "2023-02-25T18:24:07Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![paranoya](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/paranoya/32/295641_2.png) [@paranoya](https://meta.discourse.org/u/paranoya)
#### Post date: [February 25, 2023, 6:24pm UTC](https://meta.discourse.org/t/line-under-avatar/256253/1 "2023-02-25T18:24:08Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [February 25, 2023, 6:35pm UTC](https://meta.discourse.org/t/line-under-avatar/256253/2 "2023-02-25T18:35:56Z")

</div>

Welcome paranoya!

(a sigma example link for reference: [https://forum.figma.com/t/introduce-yourself/102/2](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](https://meta.discourse.org/t/make-css-changes-on-your-site/168101):
>
> 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](https://global.discourse-cdn.com/meta/original/4X/b/8/a/b8a95b76d22f65ea64e70877c1d35c8f5f208a77.png)

They added this to their theme CSS:

```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.

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

```

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

 ![image](https://global.discourse-cdn.com/meta/original/4X/5/0/a/50a4bc794a0c880302d07d15dba562e8fc16af3e.png)

---

<div class="post-metadata">

### Author: ![paranoya](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/paranoya/32/295641_2.png) [@paranoya](https://meta.discourse.org/u/paranoya)
#### Post date: [February 25, 2023, 6:37pm UTC](https://meta.discourse.org/t/line-under-avatar/256253/3 "2023-02-25T18:37:32Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [February 25, 2023, 6:38pm UTC](https://meta.discourse.org/t/line-under-avatar/256253/4 "2023-02-25T18:38:20Z")

</div>

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

---

<div class="post-metadata">

### Author: ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)
#### Post date: [March 27, 2023, 6:39pm UTC](https://meta.discourse.org/t/line-under-avatar/256253/5 "2023-03-27T18:39:20Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.