A little help with a CSS selector?

[Turtle]

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!

[Arkshine]

You can use:

.chat-message-info__username.is-staff {
  .chat-message-info__username__name {
     color:  #c3e7eb;
  }
}

[Turtle]

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

[Turtle]

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.

[Arkshine]

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

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

[Turtle]

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

[Arkshine]

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

[Turtle]

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

[Arkshine]

.chat-message-info__username.user--arkshine  {
    .chat-message-info__username__name {
        color: red;
    }
}

[Turtle]

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

[Arkshine]

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

[Turtle]

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

[Arkshine]

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.

[Turtle]

Either way, it still won’t work. Thanks for your help though.

[Arkshine]

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

[Turtle]

This is all I’ve got.

I don’t know what could be the problem.

[Arkshine]

Use this CSS:

.chat-message-info__username[data-user-card="Kat_Mac"] {
    .chat-message-info__username__name {
        color: red;
    }
}

[Turtle]

@Arkshine

.chat-message-info__username[data-user-card="Kat_Mac"] {
    .chat-message-info__username__name {
        color: red;
    }
}

That worked, thanks!