Make staff users more recognizable with customized avatars, posts, and mentions

[Discourse]

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

/*Change color for all Staff users*/
span.username.staff .d-icon.d-icon-shield-alt {
    color: #00A9DB;
}

To change the shield’s color in every place where it appears, not only in a topic:

span.username.staff .d-icon.d-icon-shield-alt,
.user-card .first-row .names .d-icon.fa.d-icon.d-icon-shield-alt,
.user-profile-names .fa.d-icon.d-icon-shield-alt {
    color: #00A9DB;
}

Change color differentiating ADMIN users from MOD users

/*Change color differentiating ADMIN users from MOD users*/
span.username {
  &.moderator .d-icon.d-icon-shield-alt {
    color: green;
  }

  &.admin .d-icon.d-icon-shield-alt {
    color: red;
  }
} 

CSS to hide the shield

Hide the shield only on posts

.names .svg-icon-title {
    display: none;
}

Hide the shield on posts and user card

.names .svg-icon-title, 
#user-card .names .d-icon.d-icon-shield-alt {
  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

.names .staff ~ .user-title a {
    background: #00A9DB;
    color: white;
    padding: 3px 5px;
}

Customize the title differentiating admins and mods

.names {
  .moderator ~ .user-title a {
    background: green;
    color: white;
    padding: 3px 5px;
  }

  .admin ~ .user-title a {
    background: red;
    color: white;
    padding: 3px 5px;
  }
}

Tips: your staff users do not have to be forcibly 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 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 .community ~ .user-title a etc.

.YOUR-CUSTOM-GROUP ~ .user-title a {
    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

/*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;
}

/*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

/*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;
}

/*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:

.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 Automatically add group flair to members' avatars 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 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

span.username.staff a {
      color: #00A9DB;
}

Change color of the username differentiating admins and mods

span.username {
  &.moderator {
    a {
      color: green;
    }
  }

  &.admin {
    a {
      color: red;
    }
  }
}

This variant uses (almost) the same CSS used for the custom title.

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

.names span.staff a {
   color: #00A9DB;
} 

This variant uses (almost) the same CSS used for the custom title.

.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

.names span {
  &.moderator {
    a, i {
      color: green;
    }
  }

  &.admin {
    a, i {
      color: red;
    }
  }
}

This variant uses (almost) the same CSS used for the custom title.

.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

/*Change USERNAME with the username of the user*/
.topic-meta-data .names span.username a[data-user-card=USERNAME] {
  color: blue;
}

Name

/*Change USERNAME with the name of the user*/
.topic-meta-data .full-name a[data-user-card=USERNAME] {
  color: blue;
}

Both name and username

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

.moderator {
  .topic-body, .clearfix > .topic-meta-data > .names span.user-title a, .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

/*Change GROP-NAME with the name of your group*/
.topic-post.group-GROUP-NAME .topic-body .cooked { 
    background-color: #ffffd0; /*change color here*/
}

or

.topic-post.group-GROUP-NAME .topic-body { 
    background-color: #ffffd0; /*change color here*/
}

or even

/*Change GROP-NAME with the name of your group*/

.topic-post.GROUP-NAME .topic-body .cooked { 
    background-color: #ffffd0; /*change color here*/
}

.topic-post.GROUP-NAME .names span { 
    background-color: #ffffd0; /*change color here*/
}

Automatically change posts font color and font family for all staff users

/*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:

/*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

.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

.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

Last edited by @JammyDodger 2024-05-25T20:43:26Z

Check document

Perform check on document: