XF 2.2 CSS for specific usergroup

sbj

Well-known member
What is the css for targeting specific usergroups?

I have a usergroup and the color for their username is dark red. And if they have a banner, the system automatically puts a text-shadow which then looks bad.

This is automatically applied:
CSS:
.memberHeader--withBanner .username {
  text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
}

So, how can I target this usergroup alone in my extra.less so I can change the text shadow?
 
Solution
Less:
[data-template="member_view"]
{
    .memberHeader-nameWrapper .username--style1
    {
        text-shadow: 0px 0px 0 #0000, 0px 0px 0 #000, 0px 0px 0 #000, 0px 0px 0 #000;
    }
}
You can apply CSS to user groups in the ACP.

1654635510222.webp

This guide covers banners.

 
  • Like
Reactions: sbj
Thanks but both things don't work out. I think you are mixing normal user banners with user profile banners :).

1654637081476.webp

You see how in your profile your nickname gets a black shadow? That is because you have a profile banner.

Users without banners don't have that.

1654637178934.webp



Applying css in the usergroup section you showed above would mean it will apply it to all places where your username is shown.

But I don't want that. I just want to target the profile area cause only there the shadow is applied.

Hence why this css which targets that area specifically:

.memberHeader--withBanner .username {

But I can't use that because if I use that it targets all users with user banners. But I want just to target a specific usergroup (my moderators) so that black shadow is not ugly.

Simply asked, how can I add a usergroup condition to my css?

Thank you.
 
Extra.less
Code:
[data-template="member_view"]
.memberHeader--withBanner .username {
    text-shadow: 0px 0px 0 #0000, 0px 0px 0 #000, 0px 0px 0 #000, 0px 0px 0 #000;
}
Web capture_10-6-2022_94815_xenforo.com.webp
 
  • Like
Reactions: sbj
The shadow is in place to separate the text from the background.
Without the shadow, it is hard to see the text, unless your background is a contrasting solid color.
 
  • Like
Reactions: sbj
The shadow is in place to separate the text from the background.
Without the shadow, it is hard to see the text, unless your background is a contrasting solid color.
Thanks but 2 things.

Yes, I am aware of the purpose. But in your example the username color is white, hence a black shadow works well.

In my case the username color is dark red, and the black shadow doesn't work well, actually it looks pretty bad.

Second point, I don't want to remove this shadow for all usergroups. Just for 1 specific usergroup (because only that usergroup has a dark red username color).

That css will remove the background for all and this is why I am asking for a specific usergroup css. How can I target that?
 
Thanks but 2 things.

Yes, I am aware of the purpose. But in your example the username color is white, hence a black shadow works well.

In my case the username color is dark red, and the black shadow doesn't work well, actually it looks pretty bad.

Second point, I don't want to remove this shadow for all usergroups. Just for 1 specific usergroup (because only that usergroup has a dark red username color).

That css will remove the background for all and this is why I am asking for a specific usergroup css. How can I target that?
Have you tried editing the box-shadow inside this username css

That should do the trick.


Web capture_10-6-2022_112425_xenforo.com.webp
 
  • Like
Reactions: sbj
Code:
color: red;
text-shadow: 0px 0px 0 #000, 0px 0px 0 #000, 0px 0px 0 #000, 0px 0px 0 #000;
 

Attachments

  • Web capture_10-6-2022_113737_user.oo5dynasty.com.webp
    Web capture_10-6-2022_113737_user.oo5dynasty.com.webp
    16 KB · Views: 13
  • Web capture_10-6-2022_11374_user.oo5dynasty.com.webp
    Web capture_10-6-2022_11374_user.oo5dynasty.com.webp
    36.8 KB · Views: 13
  • Web capture_10-6-2022_11366_user.oo5dynasty.com.webp
    Web capture_10-6-2022_11366_user.oo5dynasty.com.webp
    84.2 KB · Views: 13
  • Like
Reactions: sbj
Code:
color: red;
text-shadow: 0px 0px 0 #000, 0px 0px 0 #000, 0px 0px 0 #000, 0px 0px 0 #000;
That removes the text shadow now on the profile banners, but puts everywhere else a shadow.

yeah, you can't put class targets in the member box - just the actual styles as listed above.
Hence why I asked for usergroup specific css so I can target it in my extra.less

Because in the membe box, anything what is typed, it applies to all places where the username is found. I can't for example target specific templates or areas, it applies everywhere. But thanks for confirming it, much appreciated.
 
I'm thinking you need a template edit to include the groupID or name as a class

Code:
<div class="memberProfileBanner memberHeader-main memberProfileBanner-u55758-l">
to
Code:
<div class="memberProfileBanner memberHeader-main memberProfileBanner-u55758-l USERGROUP">

so, obviously you have to derive USERGROUP to print something like 'moderator' instead in the template itself and then you can target the selector in extra css using the both class selector (no spaces) like

Code:
.memberProfileBanner.moderator { //styles }
 
  • Like
Reactions: sbj
That removes the text shadow now on the profile banners, but puts everywhere else a shadow.


Hence why I asked for usergroup specific css so I can target it in my extra.less

Because in the membe box, anything what is typed, it applies to all places where the username is found. I can't for example target specific templates or areas, it applies everywhere. But thanks for confirming it, much appreciated.
Maybe somebody with more skills can help.😢
You need to get the user group classes or Id and specifically tell xenforo to only focus that on members_view pages.
I do not know how to do that.
Sorry...
 
  • Like
Reactions: sbj
Less:
[data-template="member_view"]
{
    .memberHeader-nameWrapper .username--style1
    {
        text-shadow: 0px 0px 0 #0000, 0px 0px 0 #000, 0px 0px 0 #000, 0px 0px 0 #000;
    }
}
It didn't work but maybe I am doing something wrong?


Thanks for the help though, I think we are very close to the answer.
 
Last edited:
Ok, my bad. It is working. I was looking at the member card (which also has the banner) but we specifically targeted the profile page banner.

Thank you Brogan!!! The missing key was the --style13 part. This answers my initial question and solves all problems.

Thank you @oO5 Dynasty and @briansol for helping out.

To sum it up, this for the profile page

Less:
.memberHeader--withBanner .username--style13 {
    text-shadow: 0px 0px 0 #000, 0px 0px 0 #000, 0px 0px 0 #000, 0px 0px 0 #000;
}
and this for the member card
Less:
.memberTooltip--withBanner .username--style13 {
  text-shadow: 0px 0px 0 #000, 0px 0px 0 #000, 0px 0px 0 #000, 0px 0px 0 #000;
}
resolves the issue.
 
Top Bottom