Name color for groups or username

[Escuiquirin]

Hello. I wonder if can change the color of groups or users using custom css to display here:

Post:

Profile:

Thanks~

[a_5mith]

You can change the group colour in the ACP, where you create groups. Unless I've misunderstood your request.

Groups appear further down the Profile page.

[Escuiquirin]

@a_5mith I mean the user name

with group I meant to change the color of the name to the whole group and not one by one

[a_5mith]

@Escuiquirin Would require a template change on your end.

Add <!-- IF posts.user.groups.length -->{posts.user.groups.name}<!-- ENDIF posts.user.groups.length --> to the username class here

This would give you something along the lines of

<small title="a_5mith" class="username Community Representatives"><a href="/user/a_5mith">a_5mith</a></small>

Now, as there's a space, you can hook onto either, or both, so if I wanted to change just my username to a different colour. My CSS would look like this:

.username.Community.Representatives > a {
color: #000;
}

Which gives you:

You would need to manage this change if you wanted to update NodeBB at any point. As pulling the latest theme would remove the code you've added.

[Escuiquirin]

@a_5mith Thank you very much

[arasbm]

Actually since the element you want to change the color of is already in the DOM, I think you can achieve this with CSS only. Try adding this to your custom css:

a[href*="groups/administrators"] span.label {
	background-color: red !important;;
	padding: 2rem;
}

You can also play around with the CSS to get the wrapper a element or style it anyway you wish of course. Let me know if that worked.

[trevor]

@arasbm said:

Actually since the element you want to change the color of is already in the DOM, I think you can achieve this with CSS only. Try adding this to your custom css:

a[href*="groups/administrators"] span.label {
	background-color: red !important;;
	padding: 2rem;
}

You can also play around with the CSS to get the wrapper a element or style it anyway you wish of course. Let me know if that worked.

This would actually work wonders.

[Escuiquirin]

Thanks @arasbm you helped me a lot, you're the best

[arasbm]

you're the best

@Escuiquirin LOL I wish! Glad I could help though