Turtle needs help with a CSS selector to color usernames of staff users and trust level four users in a chat. Arkshine provides a solution using the .is-staff class and suggests creating a group for trust level four users. Arkshine also provides JavaScript code to add missing class names and explains how to target the group using .group--trust_level_4.
Turtle asks how to select a specific username instead of trust level four, and Arkshine updates the code to include the username. However, Turtle has trouble getting it to work for a user called “Kat_Mac”. Arkshine suggests using user--Kat_Mac but Turtle still can’t get it to work.
Eventually, Arkshine provides an alternative solution using [data-user-card="Kat_Mac"], which Turtle confirms works. Arkshine refines this solution, and Turtle thanks them for their help.
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;
}
}
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-staffis-adminis-moderatoris-new-usergroup--primary_group_nameYou 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;
}
}
})
});
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;
}
}
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?
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?
No, don’t change the JS. If you refer to includeUsersField, it means whether you want to show by “username” (e.g. Kat_Mac) or by “id” (e.g. like 4). If you wish to show the username, leave it as it is.
Either way, it still won’t work. Thanks for your help though.
It does work for me:
Make sure you’re using the latest JS code, and you did update properly the CSS!
@Turtle Ignore my code, actually I did not see there an attribute with the username you can use.
.chat-message-info__username[data-user-card="Kat_Mac"] {
.chat-message-info__username__name {
color: red;
}
}
Use this CSS:
.chat-message-info__username[data-user-card="Kat_Mac"] {
.chat-message-info__username__name {
color: red;
}
}
That worked, thanks!