XF 2.0 Styling custom user titles

[Letrix]

Hello. I would like to style custom user titles to be the same colour as their primary group user title on my forum. Is there a way to do it?

I've tried things such as

.userTitle.message-userTitle {
    color: .userBanner
}

but to no avail.

Here's an example of a custom user banner that I'm using.

.userBanner.userBanner.ForumAdmin {
    color: #FFFFFF;
    font-weight: bold;
    background: #3366bb;
    border-color: #9999ff;
}

And here's the custom usertitle that I have in that group's "User title override"
<font color="#3366bb">Forum Admin</font>

Please could you help me find a method of making something like what I desire? Thanks.
Here's a link to my site: https://pokemonrevolution.net/forum/index.php

 

[MojoW]

You can call classes in the usergroup user title override block.

For example this is a rainbow effect i have on my admin usergroup and i made a class for it in my extra.less to add it to my user title.

.legendary {
padding-left: 20px;
background: url('https://mysite.com/images/redeye.gif') no-repeat, url('https://mysite.com/images/sparkle.gif') no-repeat;
text-shadow: 1px 1px 4px #CC0000, -1px -1px 4px #E50000, 1px 1px 5px #FF0000, -1px -1px 5px #B20000, 0px 0px 6px #B20000;
animation: style2 15s ease-in-out infinite;
}
@keyframes style2 {
0% {
color : #d83b3b;
}
10% {
color : #e3ed20;
}
20% {
color : #20ed2d;
}
30% {
color : #2082ed;
}
40% {
color : #cd20ed;
}
50% {
color : #20edbe;
}
60% {
color : #cd20ed;
}
70% {
color : #2082ed;
}
80% {
color : #20ed2d;
}
90% {
color : #e3ed20;
}
100% {
color : #d83b3b;
}
}

<span class="legendary">Forum Admin</span>

So if you have you username stylings done in the usergroup copy that css code to a custom class in the extra.less.
From there you call it in the user title override in the usergroup settings.

 

[Mian Shahid]

Try this :

https://xenforo.com/community/resources/all-rich-usernames.5749/

 

[Letrix]

Not quite what I'm looking for. Trying to make the custom tag into the same colour as the default override.

Custom tag here is Massive legend and the css tag for this seems to be "userTitle message-userTitle"

Without the custom user tag, the colour is what I want it to be

 

[Letrix]

Bump. Any help is appreciated

 

[MojoW]

Bump. Any help is appreciated

What i said what correct.
So let me explain again.

You need to copy the username css for that usergroup to your extra.less under a new class name like .admincolors

Then you can call a custom title with that class like so.

<span class="admincolors">Massive Legend</span>

This will give your custom titles with the same usergroup styling as the actual group.
You will need to do this for every user group that you want it on.

 

[Letrix]

-

Not working as you describe.

 

[MojoW]

You forgot to end the {color: #3366bb;} with a semicolon.

 

[MojoW]

and delete the custom title in your profile settings you wont need that.

 

[Letrix]

and delete the custom title in your profile settings you wont need that.

The entire point of this is for me to retain the custom styling whilst using a custom title. So other users in the same usergroup can also have custom titles whilst retaining their user group's colours.

 

[MojoW]

The entire point of this is for me to retain the custom styling whilst using a custom title. So other users in the same usergroup can also have custom titles whilst retaining their user group's colours.

I know but the problem is custom user titles all have the same class even different user groups.
There is no way to individually style them unless you use the method i use.