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;
    }
}

Brogan

XenForo moderator
Staff member
If you aren't targeting specific templates, you can combine those like this:

Less:
.memberHeader, .memberTooltip
{
    &--withBanner .username--style13
    {
        text-shadow: 0px 0px 0 #000, 0px 0px 0 #000, 0px 0px 0 #000, 0px 0px 0 #000;
    }
}
 

Brogan

XenForo moderator
Staff member
You can apply CSS to user groups in the ACP.

1654635510222.png

This guide covers banners.

 
  • Like
Reactions: sbj

sbj

Well-known member
Thanks but both things don't work out. I think you are mixing normal user banners with user profile banners :).

1654637081476.png

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.png



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.
 

oO5 Dynasty

Well-known member
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.jpeg
 
  • Like
Reactions: sbj

oO5 Dynasty

Well-known member
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

sbj

Well-known member
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?
 

oO5 Dynasty

Well-known member
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.jpeg
 
  • Like
Reactions: sbj

oO5 Dynasty

Well-known member
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.jpeg
    Web capture_10-6-2022_113737_user.oo5dynasty.com.jpeg
    52.3 KB · Views: 7
  • Web capture_10-6-2022_11374_user.oo5dynasty.com.jpeg
    Web capture_10-6-2022_11374_user.oo5dynasty.com.jpeg
    89.3 KB · Views: 7
  • Web capture_10-6-2022_11366_user.oo5dynasty.com.jpeg
    Web capture_10-6-2022_11366_user.oo5dynasty.com.jpeg
    137.9 KB · Views: 7
  • Like
Reactions: sbj

sbj

Well-known member
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.
 

briansol

Well-known member
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

oO5 Dynasty

Well-known member
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

sbj

Well-known member
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:
Top