# Adding text below avatar or next to username

**URL:** https://meta.discourse.org/t/adding-text-below-avatar-or-next-to-username/41715
**Category:** UX
**Created:** [March 29, 2016, 3:24pm UTC](https://meta.discourse.org/t/adding-text-below-avatar-or-next-to-username/41715 "2016-03-29T15:24:54Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![DoMiN8ToR](https://avatars.discourse-cdn.com/v4/letter/d/b2d939/32.png) [@DoMiN8ToR](https://meta.discourse.org/u/DoMiN8ToR)
#### Post date: [March 29, 2016, 3:24pm UTC](https://meta.discourse.org/t/adding-text-below-avatar-or-next-to-username/41715/1 "2016-03-29T15:24:54Z")

</div>

I’m trying to customize the template where the avatar is shown. I’m able to overwrite many other templates, but for some reason post/poster-avatar.raw doesn’t work for me.

I tried e.g. the following code and tried to add it in “before /head” and in “header” and it simply doesn’t appear.

```html
<script type='text/x-handlebars' data-template-name='post/poster-avatar.raw'>
  <h1>LOL</h1>
</script>

```

Any ideas?

I would also like to add some text to the template where the username, full name and usergroup is displayed but can’t find the correct template, could someone point me into the right direction?

---

<div class="post-metadata">

### Author: ![Falco](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/falco/32/179432_2.png) [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [March 29, 2016, 3:33pm UTC](https://meta.discourse.org/t/adding-text-below-avatar-or-next-to-username/41715/2 "2016-03-29T15:33:29Z")

</div>

I think that after the vdom rewrite of topics, templates don’t work anymore on that page.

> [@Using the JS API](https://meta.discourse.org/t/using-the-pluginapi-in-site-customizations/41281):
>
> Discourse’s JavaScript API allows themes and plugins to make extensive customizations to the user experience. The simplest way to use it is to create a new theme from the admin panel, click “Edit Code”, and then head to the JS tab. For file-based themes, the API can be used by creating a file in the api-initializers directory. For theme’s that’s {theme}/javascripts/api-initializers/init-theme.gjs, and for plugins, it’s {plugin}/assets/javascripts/discourse/api-initializers/init-plugin.js. The c…

---

<div class="post-metadata">

### Author: ![DoMiN8ToR](https://avatars.discourse-cdn.com/v4/letter/d/b2d939/32.png) [@DoMiN8ToR](https://meta.discourse.org/u/DoMiN8ToR)
#### Post date: [March 29, 2016, 3:54pm UTC](https://meta.discourse.org/t/adding-text-below-avatar-or-next-to-username/41715/3 "2016-03-29T15:54:39Z")

</div>

Aaargh, just when I thought I understood it 😉 Thanks for the quick reply @Falco, much appreciated. I guess something new to dive into!

---

<div class="post-metadata">

### Author: ![Mittineague](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mittineague/32/114259_2.png) [@Mittineague](https://meta.discourse.org/u/Mittineague)
#### Post date: [March 29, 2016, 4:22pm UTC](https://meta.discourse.org/t/adding-text-below-avatar-or-next-to-username/41715/4 "2016-03-29T16:22:03Z")

</div>

Yes the post.hbs file is no more.

With it’s removal, 5 plugin-outlets are gone with it.

discourse/templates/post.hbs (5)  
{{plugin-outlet “poster-avatar-bottom”}}  
{{plugin-outlet “poster-name-right”}}  
{{plugin-outlet “post-after-cooked”}}  
{{plugin-outlet “topic-after-cooked”}}  
{{plugin-outlet “post-bottom”}}

AFAIK (I haven’t tried yet) custom\_fields and Widgets need to be used now

---

<div class="post-metadata">

### Author: ![Yuun](https://avatars.discourse-cdn.com/v4/letter/y/977dab/32.png) [@Yuun](https://meta.discourse.org/u/Yuun)
#### Post date: [March 29, 2016, 4:22pm UTC](https://meta.discourse.org/t/adding-text-below-avatar-or-next-to-username/41715/5 "2016-03-29T16:22:21Z")

</div>

You can add text below avatars pretty easily, at least (no plugin outlet required). There’s an empty div `poster-avatar-extra` right underneath avatars, just use that with some CSS.

e.g.

```plaintext
.poster-avatar-extra {
    display: inherit;
}

.poster-avatar-extra:after {
     content: "LOL";
}

```

The first bit is because the `poster-avatar-extra` div has `display: none` by default. Just style it up with some more CSS and you’re good to go. 🙂

Oh, I’ll go ahead and put this here as well. If you want to use groups to decide what text goes under the avatar (wrapping the above in `.group-GroupName{}`, needs to be user’s primary group to show up), you’ll want to toss this in as well (or something else to handle the issue):

```plaintext
.embedded-posts {
    .poster-avatar-extra:after {
        content: none !important;
    }
}

```

The embedded posts’ `poster-avatar-extra` (from the reply indicator expansion) has the same group membership as the main post, which means the text below the avatars will be applied incorrectly if you’re doing it by group. Only caveat I can think of off the top of my head, though.
