# Make staff users more recognizable with customized avatars, posts, and mentions
**URL:** https://meta.discourse.org/t/make-staff-users-more-recognizable-with-customized-avatars-posts-and-mentions/142794
**Category:** Site Management
**Tags:** css, how-to, users
**Created:** [April 23, 2020, 4:48pm UTC](https://meta.discourse.org/t/make-staff-users-more-recognizable-with-customized-avatars-posts-and-mentions/142794 "2020-04-23T16:48:00Z")
**Posts on this page:** 2
**Page:** 1
### Author:  [@Discourse](https://meta.discourse.org/u/Discourse)
#### Post date: [April 23, 2020, 4:48pm UTC](https://meta.discourse.org/t/make-staff-users-more-recognizable-with-customized-avatars-posts-and-mentions/142794/1 "2020-04-23T16:48:00Z")
There are various methods that can be used to make a staff user immediately recognizable to other users.
## Show moderator shield
Any staff user who is moderator, or admin **and** moderator, will have the moderator shield next to the username.
> đź—¨ **Tips** : _the shield will not appear if the staff user has the role of admin but not moderator._
**CSS to change color of the shield**
> **Change color for all Staff users**
>
> ```css
> /*Change color for all Staff users*/
> span.username.staff .d-icon.d-icon-shield-halved {
> color: #00A9DB;
> }
>
> ```
>
> 
>
> To change the shield’s color in every place where it appears, not only in a topic:
>
> ```plaintext
> span.username.staff .d-icon.d-icon-shield-halved,
> .user-card .first-row .names .d-icon.d-icon-shield-halved,
> .user-profile-names .d-icon.d-icon-shield-halved {
> color: #00A9DB;
> }
>
> ```
> **Change color differentiating ADMIN users from MOD users**
>
> ```css
> /*Change color differentiating ADMIN users from MOD users*/
> span.username {
> &.moderator .d-icon.d-icon-shield-halved {
> color: green;
> }
>
> &.admin .d-icon.d-icon-shield-halved {
> color: red;
> }
> }
>
> ```
>
> 
**CSS to hide the shield**
> **Hide the shield only on posts**
>
> ```css
> .names .svg-icon-title {
> display: none;
> }
>
> ```
> **Hide the shield on posts and user card**
>
> ```css
> .names .svg-icon-title,
> .user-card .names .d-icon.d-icon-shield-halved {
> display: none;
> }
>
> ```
## Add titles
Any staff user can access to the `/admin/users/list/staff` and can create a title for its own account. The title will appear next to the username of the staff users:
See as example:
#### **CSS to customize an existing title**
> **Customize the title for staff members**
>
> ```css
> .names .staff ~ .user-title {
> background: #00A9DB;
> color: white;
> padding: 3px 5px;
> }
>
> ```
>
> 
> **Customize the title differentiating admins and mods**
>
> ```css
> .names {
> .moderator ~ .user-title {
> background: green;
> color: white;
> padding: 3px 5px;
> }
>
> .admin ~ .user-title {
> background: red;
> color: white;
> padding: 3px 5px;
> }
> }
>
> ```
>
> 
> 🗨 **Tips** : _your organization’s staff users do not have to be actual site admins or mods, they can simply be members without special permissions. To customize their title just create a new custom group, [configure it as primary](https://meta.discourse.org/t/what-does-selecting-primary-group-for-a-user-do/) and add the necessary users. It is possible to set an **automatic title** that will be assigned to all the members by default._
> **Customize the title of non-admin and non-mod users belonging to a primary custom group**
>
> Change `YOUR-CUSTOM-GROUP` with the group name, in the example below it’s `.group--community ~ .user-title` etc.
>
> 
>
> ```css
> .group--YOUR-CUSTOM-GROUP ~ .user-title {
> background: #00A9DB;
> color: white;
> padding: 3px 5px;
> }
>
> ```
>
> 
Remember that a user can choose another title from the one assigned, from the user profile - in this case the title on posts will become the one chosen by the user - and also configure it to “none” - in this case no title will be shown.
To avoid this, it is possible to create a custom title from scratch so that it is not editable from the user side.
**CSS to create a custom title from scratch**
Sample:
> **Tips for create a title after the username**
>
> ```css
> /*Display a custom title after the username for all STAFF user
> It will not be displayed if site setting "prioritize username in ux" is disabled */
> .username.staff::after {
> content: 'Staff user';
> color: #00A9DB;
> border: 1px solid #00A9DB;
> border-radius: 8px;
> padding-left: 4px;
> padding-right: 4px;
> margin-left: 5px;
> display: inline-block;
> }
>
> /*Optional - Reduce size in the user card*/
> .user-card .username.staff::after {
> font-size:.7em;
> margin-left:0px;
> }
>
> /*Optional - Hide moderator shield only on posts*/
> .names .svg-icon-title {
> display:none;
> }
>
> ```
>
> 
>
> ```css
> /*Display a custom title after the username differentiating ADMIN users from MOD users
> It will not be displayed if site setting "prioritize username in ux" is disabled */
> .username {
> &.admin:after {
> content: 'Admin user' !important;
> color: red !important;
> border: 1px solid red !important;
> border-radius: 8px;
> padding-left: 4px;
> padding-right: 4px;
> margin-left: 5px;
> display: inline-block;
> }
>
> &.moderator:after {
> content: 'Moderator user';
> color: green;
> border: 1px solid green;
> border-radius: 8px;
> padding-left: 4px;
> padding-right: 4px;
> margin-left: 5px;
> display: inline-block;
> }
> }
>
> /*Optional - Hide the icon shield only on posts*/
> .names .svg-icon-title {
> display: none;
> }
>
> ```
>
> 
> **Tips for create a title after the name**
>
> ```css
> /*Display a custom title after the full name for all STAFF members*/
> span.staff :after {
> content: "Staff";
> color: white;
> background-color: #00A9DB;
> border-radius: 8px;
> margin-left:5px;
> padding-left: 4px;
> padding-right: 4px;
> display: inline-block;
> }
>
> ```
>
> 
>
> ```css
> /*Display a custom title after the full name differentiating ADMIN users from MOD users */
> span {
> &.admin :after {
> content: "Admin" !important;
> color: white;
> background-color: red !important;
> border-radius: 8px;
> margin-left: 5px;
> padding-left: 4px;
> padding-right: 4px;
> display: inline-block;
> }
>
> &.moderator :after {
> content: "Moderator";
> color: white;
> background-color: green;
> border-radius: 8px;
> margin-left: 5px;
> padding-left: 4px;
> padding-right: 4px;
> display: inline-block;
> }
> }
>
> ```
>
> 
> **Question: Can I add both custom titles?**
>
> Yes, it possible, although redundant. See the example below:
>
> ```css
> .username.staff::after {
> content: 'Staff user';
> color: #00A9DB;
> border: 1px solid #00A9DB;
> border-radius: 8px;
> padding-left: 4px;
> padding-right: 4px;
> margin-left: 5px;
> display: inline-block;
> }
>
> /*Optional - Reduce size in the user card*/
> .user-card .username.staff::after {
> font-size:.7em;
> margin-left:0px;
> }
>
> /*Optional - Hide moderator shield*/
> .names .svg-icon-title {
> display:none;
> }
>
> span {
> &.admin :after {
> content: "Admin" !important;
> color: white;
> background-color: red !important;
> border-radius: 8px;
> margin-left: 5px;
> padding-left: 4px;
> padding-right: 4px;
> display: inline-block;
> }
>
> &.moderator :after {
> content: "Moderator";
> color: white;
> background-color: green;
> border-radius: 8px;
> margin-left: 5px;
> padding-left: 4px;
> padding-right: 4px;
> display: inline-block;
> }
> }
>
> ```
>
> 
## Add avatar flair
You can add a flair at bottom right of a staff user’s avatar:
You need to create a custom group, add staff users as members and make the group primary. See [Add group flair on member avatars](https://meta.discourse.org/t/create-a-group-that-automatically-adds-associated-flair-to-its-members-avatars/82700) for details.
If you want to add a **custom image** instead of an icon, you can upload it to your website and use the URL as described in the [Including assets in remote themes and components section](https://meta.discourse.org/t/include-images-and-fonts-in-themes-and-components/62459) guide. After adding the image in the _Uploads_ section of the theme, the variable of the image and its direct link will appear. Right-click on the direct link and copy the link in the Avatar Flair Image field.
## Customize staff names and usernames
Using a bit of CSS you can customize the staff usernames on posts.
Note that those shown below are only examples, everyone can modify the style as they prefer!
### Change color of _username_
By default the username appears before the full name
> **Change color of the username for all staff users**
>
> ```css
> span.username.staff a {
> color: #00A9DB;
> }
>
> ```
>
> 
>
> ```css
>
> ```
> **Change color of the username differentiating admins and mods**
>
> ```css
> span.username {
> &.moderator {
> a {
> color: green;
> }
> }
>
> &.admin {
> a {
> color: red;
> }
> }
> }
>
> ```
>
> 
>
> This variant uses (almost) the same CSS used for the custom title.
>
> ```css
> span.username {
> &.moderator {
> a {
> color: white;
> background-color: green;
> border-radius: 8px;
> margin-left: 5px;
> padding-left: 4px;
> padding-right: 4px;
> }
> }
>
> &.admin {
> a {
> color: white;
> background-color: red;
> border-radius: 8px;
> padding-left: 4px;
> padding-right: 4px;
> }
> }
> }
>
> ```
>
> 
### Change color of _name_
If you want the full name to appear before the username enable the site setting `display name on posts` and disable `prioritize username in ux`
> **Change color of the name for all staff users**
>
> ```css
> .names span.staff a {
> color: #00A9DB;
> }
>
> ```
>
> 
>
> This variant uses (almost) the same CSS used for the custom title.
>
> ```css
> .names span.staff a {
> color: #00A9DB;
> background-color: #D3F5FF; /*use a light color*/
> border: 1px solid #00A9DB;
> border-radius: 8px;
> padding-left: 4px;
> padding-right: 4px;
> margin-left: 5px;
> }
>
> ```
>
> 
> **Change color of the name differentiating admins and mods**
>
> ```css
> .names span {
> &.moderator {
> a, i {
> color: green;
> }
> }
>
> &.admin {
> a, i {
> color: red;
> }
> }
> }
>
> ```
>
> 
>
> This variant uses (almost) the same CSS used for the custom title.
>
> ```css
> .names span {
> &.moderator {
> a {
> color: green;
> border: 1px solid green;
> border-radius: 8px;
> padding-left: 4px;
> padding-right: 4px;
> margin-left: 5px;
> }
> }
>
> &.admin {
> a {
> color: red;
> border: 1px solid red;
> border-radius: 8px;
> padding-left: 4px;
> padding-right: 4px;
> margin-left: 5px;
> }
> }
> }
>
> ```
>
> 
> đź—¨ **Tips** : _for some reason you may want to customize a single staff member - maybe the site founder or a particularly valued member. Here is an example of how to target a single user - and yes, the same method can be used for any user, even non-staff-_
>
> > **Username**
> >
> > ```css
> > /*Change USERNAME with the username of the user*/
> > .topic-meta-data .names span.username a[data-user-card=USERNAME] {
> > color: blue;
> > }
> >
> > ```
> >
> > 
>
> > **Name**
> >
> > ```css
> > /*Change USERNAME with the name of the user*/
> > .topic-meta-data .full-name a[data-user-card=USERNAME] {
> > color: blue;
> > }
> >
> > ```
> >
> > 
>
> > **Both name and username**
> >
> > ```css
> > .topic-meta-data .names span a[data-user-card=USERNAME] {
> > color: blue;
> > }
> >
> > ```
> >
> > 
## Customize background for staff posts
Staff users can manually add a staff color using the Add Staff Color button on posts.
and the result wil be:
> **Add a background color to the whole post**
>
> Adding some lines of CSS, the background color can be applied to the whole post when the Add Staff Color button is clicked.
>
> ```css
> .moderator {
> .topic-body, .clearfix > .topic-meta-data > .names span.user-title, .topic-body .cooked {
> background: #ffffd0; /*change color here*/
> }
> }
>
> ```
>
> 
It is possible to automate this function and customize all posts written by staff users in various ways using CSS. In order to do this, it is necessary to create a **primary custom group** as described above, see the Flair chapter. When your staff members are in a **primary** group you can target their posts with CSS.
> 🗨 **Tips** : _you can add in the group all staff members or decide to add only the admins or only the mods. You can also create two different **primary** groups for admins and mods (note that you will have to use two different names as “admins” and “moderators” are names already used for automatic groups) and set the CSS to differentiate the admin posts from those of the mods._
> **Automatically change posts background for all staff users**
>
> ```css
>
> /*Change GROUP-NAME with the name of your group*/
> .topic-post.group-GROUP-NAME .topic-body .cooked {
> background-color: #ffffd0; /*change color here*/
> }
>
> ```
>
> 
>
> or
>
> ```css
> .topic-post.group-GROUP-NAME .topic-body {
> background-color: #ffffd0; /*change color here*/
> }
>
> ```
>
> 
>
> or even
>
> ```css
> /*Change GROUP-NAME with the name of your group*/
>
> .topic-post.group-GROUP-NAME .topic-body .cooked {
> background-color: #ffffd0; /*change color here*/
> }
>
> .topic-post.group-GROUP-NAME .names span {
> background-color: #ffffd0; /*change color here*/
> }
>
> ```
>
> 
> **Automatically change posts font color and font family for all staff users**
>
> ```css
> /*Change GROUPNAME with the name of your group*/
> .topic-post.group-GROUPNAME .topic-body .cooked {
> color: #fec601; /*change font color here*/
> font-family: ......; /* change font family here */
> }
>
> ```
> **Automatically change only staff replies background and not their first post**
>
> Each post in a topic has an a ID with this format: `post_number`. For the first post in a topic the ID is `post_1`, the replies have IDs like `post_2`, `post_3` and so on.
>
> If you want to add a background to all staff posts except the first one:
>
> ```css
> /*Change GROUP-NAME with the name of your group*/
> .topic-post.group-GROUPNAME .onscreen-post:not(#post_1) .topic-body .cooked {
> background-color: #ffffd0; /*change color here*/
> }
>
> ```
>
> 
#### Add extra content on staff posts
> **A simple signature**
>
> ```css
> .topic-post.group-GROUP-NAME .topic-body .cooked::after {
> content: "From your friendly staff";
> font-size: small;
> color: #d29400;
> float:right;
> font-style: italic;
> }
>
> ```
>
> 
> **A simple logo**
>
> ```css
> .topic-post.group-GROUP-NAME .topic-body .cooked::after {
> background-image: url("IMAGE-URL");
> background-repeat: no-repeat;
> background-size: 138px 36px; /*change these values according to the image size*/
> width: 138px; /*change this value according to the image size*/
> height: 36px; /*change this value according to the image size*/
> display: block;
> float: right;
> content: "";
> }
>
> ```
>
> 
## Customize mention colors
See: [Customize mention colors](https://meta.discourse.org/t/simple-mention-colors/219023)
> Last edited by @SaraDev 2025-01-14T00:08:27Z
>
> > **Check document**
> >
> > Perform check on document:
---
### Author:  [@one1](https://meta.discourse.org/u/one1)
#### Post date: [March 15, 2025, 6:21am UTC](https://meta.discourse.org/t/make-staff-users-more-recognizable-with-customized-avatars-posts-and-mentions/142794/63 "2025-03-15T06:21:42Z")
> [@Discourse](#):
>
> đź—¨ **Tips** : _your staff users do not have to be forcibly site admins or mods, they can simply be members without special permissions._
I’m confused by this. When it says, “your staff users,” is the staff it is talking about the staff of the _organization_ or _business_ (e.g. employees) that have nothing to do with the running of the forum? Because in the context of Discourse “staff” has a very specific meaning, i.e. moderators and administrators.
If that is the case, then I would recommend changing it to read:
> 🗨 **Tips** : _Your organization’s employee users do not have to be actual site admins or mods, they can simply be members without special permissions._