Hey, Since there’s no shield icon or any indication of being a staff user for messages in chat, I wanted to slightly color their usernames. I found the selector but I ran into trouble figuring out a way to select staff users. Here’s what I have right now: .chat-message-info__username__name { color: #c3e7eb; } Is there any way to make this work, and if so, how? Thanks!

You can use: .chat-message-info__username.is-staff { .chat-message-info__username__name { color: #c3e7eb; } } [image]

Thank you! Well, can’t believe I missed that.

Oh, one more question. What would the thing be for trust level four users? To clarify, I also would like to do something similar for users with trust level four. I couldn’t find a selector for it.

From what I see in the code, you can expect to see the following classnames: is-staff is-admin is-moderator is-new-user group--primary_group_name You could create a group and set it as the primary group. You can also use some code to add the missing class names. import { apiInitializer } from "discourse/lib/api"; export default apiInitializer((api) => { // Add the groups you wants to add const allowedGroups = ["trust_level_4"]; api.modifyClass("components:chat/message/info", () => { return class extends SuperClass { @service currentUser; get usernameClasses() { if (!this.currentUser) { return super.usernameClasses; } const allowedGroupClasses = this.currentUser.groups .filter((g) => allowedGroups.includes(g.name)) .map((g) => `group--${g.name}`) .join(" "); return super.usernameClasses + " " + allowedGroupClasses; } } }) }); [A screenshot of a webpage editor showing code editing options for CSS, JavaScript, and sections like , before header, after header, and footer. (Captioned by AI)] Then you can CSS target with .group--trust_level_4. Example: .chat-message-info__username.group--trust_level_4 { .chat-message-info__username__name { color: blue; } } For username, you don’t need the code above: .chat-message-info__username.[data-user-card="username_here"] { .chat-message-info__username__name { color: red; } }

[image] Arkshine: group--trust_level_4 Can I select a specific username instead of trust level four? Thanks so much by the way, this is a very well written response. Sorry for the questions, I’m not great with code.

I’ve updated the code above. It will include the username with .user--username. Note that you can use the ID if you prefer.

Can you give an example of it with my username for example changing color?

[The image shows HTML code for a chat window selection interface in Slack with classes for user display and button styling. (Captioned by AI)] .chat-message-info__username.user--arkshine { .chat-message-info__username__name { color: red; } }

[image] Arkshine: .chat-message-info__username.user--arkshine { .chat-message-info__username__name { color: red; } } Hm, it won’t work for a user called Kat_Mac? .chat-message-info__username.user--kat_mac { .chat-message-info__username__name { color: red; } } I have the updated JS.

If the username is “Kat_Mac”, then the CSS should be user--Kat_Mac.

Hm, I still cannot get it to work. All I have to include in the JS part is the username Kat_Mac, correct?

A little help with a CSS selector?

Product Support

Turtle March 8, 2025, 9:08pm 19

That worked, thanks!

Topic		Replies	Views
CSS username colors only working for admin/moderators? Development css	17	511	July 6, 2024
JS No Longer Works for Theme Component Development	4	210	November 14, 2025
How would I change username color for trust level 0 and 1? Product Support	1	121	January 9, 2026
Make staff users more recognizable with customized avatars, posts, and mentions Site Management css , how-to , users	1	8856	March 15, 2025
Finding CSS selectors for page layout, user groups Development css	6	226	March 12, 2026

A little help with a CSS selector?

Related topics