XF 2.1 Is Username CSS styling broken?

[InsertUserNameHere]

None of my CSS edits are working on "User name CSS" under user groups. I've tried this on the default and 2 custom themes.

Example 1 (Extra.css):

.username .style7 {
padding: 5;
font-family: Nintendoid1;
color: #eee;
font-size: 0.62em;
line-height: 1;
text-shadow: 0.06rem 0 0.06rem #ea36af, -0.125rem 0 0.06rem #75fa69;
letter-spacing: 0.125em;
animation-duration: 0.01s;
animation-name: textflicker;
animation-iteration-count: infinite;
animation-direction: alternate;
transform: translate(-20%, -20%)
}

background-transparent on "user name CSS" for it to show.

Example 2 (Extra.css):

@keyframes animate {
0% {
background-position: -500%;
}
100% {
background-position: 500%;
}
}

text-transform: uppercase;
overflow: hidden;
background: linear-gradient(90deg, #000000, #ffffff, #000000);
background-repeat: no-repeat;
background-size: 80%;
animation: animate 3s linear infinite;
-webkit-background-clip: text;
-webkit-text-fill-color: rgba(255, 255, 255, 0);

Why isn't anything working!?

 

[Russ]

Place your CSS inside Groups & Permissions -> User groups -> select your group "User name CSS"

No brackets, just the CSS:

text-transform: uppercase;
overflow: hidden;
background: linear-gradient(90deg, #000000, #ffffff, #000000);
background-repeat: no-repeat;
background-size: 80%;
animation: animate 3s linear infinite;
-webkit-background-clip: text;
-webkit-text-fill-color: rgba(255, 255, 255, 0);

Place your animation inside extra.less:

@keyframes animate {
0% {
background-position: -500%;
}
100% {
background-position: 500%;
}
}

Should work then.

Also, the username style is not global, so there are many areas where you won't see this custom CSS. You'd need a plugin like this: https://xenforo.com/community/threads/liam-w-rip-global-name-styling.135911/

Lastly, the CSS on the class names is like this:

 .username--style3

but this class will only show up I believe if you have the CSS placed in the group (step 1)

 

[InsertUserNameHere]

Place your CSS inside Groups & Permissions -> User groups -> select your group "User name CSS"

No brackets, just the CSS:

text-transform: uppercase;
overflow: hidden;
background: linear-gradient(90deg, #000000, #ffffff, #000000);
background-repeat: no-repeat;
background-size: 80%;
animation: animate 3s linear infinite;
-webkit-background-clip: text;
-webkit-text-fill-color: rgba(255, 255, 255, 0);

Place your animation inside extra.less:

@keyframes animate {
0% {
background-position: -500%;
}
100% {
background-position: 500%;
}
}

Should work then.

Also, the username style is not global, so there are many areas where you won't see this custom CSS. You'd need a plugin like this: https://xenforo.com/community/threads/liam-w-rip-global-name-styling.135911/

Lastly, the CSS on the class names is like this:

 .username--style3

but this class will only show up I believe if you have the CSS placed in the group (step 1)

Doesn't work anywhere, not in post bit, member card (in profile), member view list, nothing.

I had a simple background-transparent text in the user group field "user name css".

 

[Russ]

Doesn't work anywhere, not in post bit, member card (in profile), member view list, nothing.

I had a simple background-transparent text in the user group field "user name css".

Well, with my instructions it worked fine. Got the animation to work and everything before I posted it.

Can you paste a screenshot of your group page with the CSS?

 

[InsertUserNameHere]

 

[Russ]

For kicks, increase the display styling priority to like 1000 just to see if it's not inheriting from another usergroup style.

 

[InsertUserNameHere]

I would have never guessed to try that, thanks it worked!

Got a question, since my other style doesn't seem to work, I put the below code into "user name css". I mean it works outside of Xenforo?

padding: 5;
font-family: Nintendoid1;
color: #eee;
font-size: 0.62em;
line-height: 1;
text-shadow: 0.06rem 0 0.06rem #ea36af, -0.125rem 0 0.06rem #75fa69;
letter-spacing: 0.125em;
animation-duration: 0.01s;
animation-name: textflicker;
animation-iteration-count: infinite;
animation-direction: alternate;
transform: translate(-20%, -20%)