Changing the color of the rank title via CSS?

It should be possible. I’m not enough of a CSS wiz to provide the answer, but Support has helped me with that type of thing in the past. 

Also want to point out that (in Control>Gamification>Ranks) you can customize the username display style for different ranks if you want to differentiate them that way. 

I asked support but they didn't really help. I guess that's fair because it's CSS. But I'm kinda convinced this isn't that complicated, but I also am no wiz. :)

They also mentioned this as an alternative. But that's not what I'm looking for. Thanks though!

DannyPancratz wrote:

Also want to point out that (in Control>Gamification>Ranks) you can customize the username display style for different ranks if you want to differentiate them that way. 

 

I asked support but they didn't really help. I guess that's fair because it's CSS. But I'm kinda convinced this isn't that complicated, but I also am no wiz. :)

I’m quite surprised by this! Support has often been helpful to me with very simple CSS and third-party script requests. As a result, I’ve championed their willingness to help on simple things like this to community consultant reviews, in G2 reviews, and many customer reference calls. 

If that’s no longer the case, I’m 1.) disappointed, and 2.) going to choose my words more carefully. 

This is a pretty simple CSS request to help on. Confirming the element to target and assisting with simple CSS to change it. 

This might be something generative AI could help with (i’ve read it can prescribe simple code like this.) Or a search on the CSS to change a color, but you want to target that .usertitle.qa-usertitle element.

Looking at my custom CSS, we have a color change that I’m not quite sure about (pre-dates me, isn’t documented), but it provides us a template to try. 

.slider-trigger {
    color: #092750;
}

but that suggests that all you need to do for your CSS is 

.usertitle.qa-usertitle {

    color: #_hexcode goes here_;
}

Yeah, that's how far I got. But that changes the color for all rank titles and not specifically the ‘moderator’ one.

Thanks for the effort!

Ahh… I suspect that might be the issue. 

I’ve never seen a CSS element specified to the user role. I imagine it’s a universal styling class for all ranks, so there wouldn’t be a way to target only specific ranks. 

You should be able to find the user role/rank in the data that loads with the page (the Inspect console of your browser), but I’ve never see that data used with CSS. I think they are two separate components of the page:

1. Styling code
2. User data that loads within the code structure

And thát is where it gets too complicated for me 😅

Maybe @olimarrio? You’re a wizzard, right? 

<script>
$(".usertitle.qa-usertitle:contains('Moderator')").css('color', 'green');

</script>

Rookie in your rank title doesn't do you justice, @leo-inspired! You’re a legend. This works. Thank you!

1 follow up question. If I want to add a rank title in this code, hoe would that work? (Community manager in this case)

@Paul_ glad to see that @leo-inspired could help you out 🧙‍♂️

To add rank titles you can do the following:

$(".usertitle.qa-usertitle:contains('Moderator'), .usertitle.qa-usertitle:contains('Community Manager')").css('color', 'green');