How to make a staff user more recognizable

There are various methods can be used to make a staff user immediately recognizable to other users.

1. Moderator shield

Any staff user who is moderator, or admin and moderator, will have the moderator shield next to the username.

image

:left_speech_bubble: 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;
}

image

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

image

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

2. Title

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

image

:left_speech_bubble: 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.
image

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

image

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

image

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

image

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

image

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

image

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

image

3. Flair

You can add a flair at bottom right of a staff user’s avatar:

image

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.

4. Customize staff usernames and/or names

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

image


Change color of the username differentiating admins and mods
span.username {
  &.moderator {
    a {
      color: green;
    }
  }

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

image

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

image

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

image

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

image

Change color of the name differentiating admins and mods
.names span {
  &.moderator {
    a, i {
      color: green;
    }
  }

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

image

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

image

:left_speech_bubble: 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;
}

image

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

image

Both name and username
.topic-meta-data .names span a[data-user-card=USERNAME] {
    color: blue;
}

image

5. Customize staff posts

Staff users can manually add a staff color using the Add Staff Color button on posts.

image

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.

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

image

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

Add extra stuff on post

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: "";
}

34 Likes

Hi! I can’t understand, why this styling is not working for my group “tools”.


I have 3 members in it.

When I use this code, nothing changes.

.tools {
  .topic-body, .clearfix > .topic-meta-data > .names span.user-title a, .topic-body .cooked {
    background: #ffffd0; /*change color here*/
  }
}

And when I change to staff, the color applies to all messages from all users, even they are not staff members.

.staff{
  .topic-body, .clearfix > .topic-meta-data > .names span.user-title a, .topic-body .cooked {
    background: #ffffd0; /*change color here*/
  }
}

So I found what caused the problem. I used a custom (manual) group and that’s why I should also set a primary group for users in this group. This CSS is applied to the chosen primary group.

1 Like

I thought it was pretty clear that CSS for custom groups can only be applied to primary groups

I’ll bold the text in order to highlight it.

Having said that, I did not understand if you have solved all the problems or not (in case send me a link to your site)

5 Likes

Hi, thank you! I understood how to do it. This logic was strange for me. If a user belongs to some groups, why do we need to set 1 primary? In case I need a different styling for these groups it will be impossible to apply all the styling - I have to set a primary one and apply only one styling. Why can’t we use group names as css classes or IDs? I think it limits the usage of group styling.

1 Like

Speaking of custom groups, currently our system is able to automatically add a class (that you can target with CSS/Html/JS) only for primary groups (in your case .tools). See What does selecting "Primary Group" for a user do? for details.

Changing the logic to apply styling to primary and non-primary groups is not as simple as it seems and requires careful planning and many tests to resolve the obvious conflicts that will arise. Furthermore, the primary group is not only used for styling but also to assign titles and trust levels automatically and for other functions. Once you understand the logic of primary groups, it becomes easier to configure groups for your needs

That said, yes, we have vaguely discussed internally how to get CSS to apply to non-primary groups as well, but that’s not something that will be done anytime soon.

cc @tshenry

7 Likes

As @Dax mentioned, adding this functionality would require some careful thought. You have to factor in efficiency, accessibility, conflicts, etc. I could potentially see it being a Group checkbox setting - something like “Add a CSS class to all posts from this group.”

In the mean time, we do have a way to add a new class to a post already. You have a limited set of attributes to work with out of the box, but you can check for staff status for example:

Add this to the </head> section of your theme:

<script type="text/discourse-plugin" version="0.8.40">
  api.addPostClassesCallback((atts) => {
    if (atts.staff === true) {
      return ["staff"];
    }
  });
</script>

Then target the post using CSS like:

.topic-post.staff .topic-body {
  background: #ffffd0;
}
6 Likes

There is a problem with this styling in a block with replies. All posts inside the “Replies” block are dependable of the .cooked style above, in the original block.


In this image you can see that Lara K. doesn’t belong to the staff group, despite it the style was applied to her posts.

4 Likes

Oh that’s an interesting bug, thanks for reporting, cc @awesomerobot

3 Likes

Yeah I just recently ran into this for a customer we host and we can probably add a class or two somewhere to make it more straightforward.

In the meantime you can work around it with more specific selectors:

.group-GROUP-NAME {
  .regular > .cooked { // only applies to the post, not embedded replies
    background:  #ffffd0;
  }
}

7 Likes

Thanks, Kris @awesomerobot
That works only for part of situations.
But it’s not working, when a non-member is getting a reply from a member of the specific group. In this case such replies should be colored, but they didn’t.
Also replies a not colored at all, but they should.
So there is smth difficult to solve by today’s tools.

2 Likes

Right, at the moment the user’s group isn’t added as a class name to the embedded replies at all so I think it’s impossible to style to those without further customization. That should definitely be fixed.

Quotes are also another consideration…

.quote {
  &.group-GROUP-NAME {  // also highlight quotes from this group
    &:not(.quote-modified) { // don't allow users to abuse the highlight with modified quotes
      background: #ffffd0 !important;
    }
  }
  // if a quoter has a highlighted background...
  // but you don't want the quote they make from a non-highlighted user highlighted as well... 
  &:not(.group-GROUP-NAME) {
    background: transparent !important;
  }
}
6 Likes

Love this guide and was able to get 90% of everything set up, thank you!

Side question: Is it possible to change the font color of the admin/mod/staff post? My example from another thread was Blizzard’s ‘BLUE POSTS’ and how when their team replies, it’s their signature blue text.

Cheers~

2 Likes

A font change would just be one more font-family: alongside the existing styling you have applied.

3 Likes

Thank you. would you happen to have an example? I’ve tried myself, but none of the examples above are targeting the admin/mod topic text so I don’t know what the appropriate .VALUE would be when trying to manipulate it.

I’d really like to hide it behind the “Add Staff Color” button. Have that button change the text color and not the background or area.

Thank you!

2 Likes

Update: I was able to edit the automatic add staff color by primary group above ^

Below is how I did it for anyone else who may stumble onto this thread trying to duplicate Blizzard’s Blue Text. I commented out the background color because I’m not using it, but I left it in case someone else wanted to use it. (remove /* & */ before and after background-color)

Code (add to custom CSS of your theme):

/*Change GROUPNAME with the name of your group*/
.topic-post.group-GROUPNAME .topic-body .cooked { 
    /*background-color: #ffffd0;*/ /*change background color here*/
    color: #fec601; /*change font color here*/
    // font-family: ......; /* change font family here */
}

Result:

Very happy and thank you very much for the help!

2 Likes

Hi there, I noticed this only applies in the conversation and not the user card, how would it be possible to make it appear in the user card, conversation and all shield places?

1 Like

Try

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;
}
4 Likes