XF 2.2 CSS for specific usergroup

[sbj]

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:

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

 

[Paul B]

You can apply CSS to user groups in the ACP.



This guide covers banners.

Creating custom User banner styling

By default, XF comes with the following user banner styles: Creating custom styling using the Other, using custom CSS class name option is fairly straightforward. This guide will explain how to. The easiest way by far to add new prefix...

xenforo.com

 

[sbj]

Thanks but both things don't work out. I think you are mixing normal user banners with user profile banners .



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.





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.

 

[sbj]

Anyone?

 

[oO5 Dynasty]

Extra.less

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

 

[oO5 Dynasty]

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.

 

[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?

 

[oO5 Dynasty]

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.

 

[sbj]

Have you tried editing the box-shadow inside this username css

That should do the trick.

I did but it had no effect.

Maybe I am doing the wrong css?

 

[oO5 Dynasty]

color: red;
text-shadow: 0px 0px 0 #000, 0px 0px 0 #000, 0px 0px 0 #000, 0px 0px 0 #000;

I did but it had no effect.

Maybe I am doing the wrong css?

View attachment 269369

 

[oO5 Dynasty]

color: red;
text-shadow: 0px 0px 0 #000, 0px 0px 0 #000, 0px 0px 0 #000, 0px 0px 0 #000;

 

[briansol]

yeah, you can't put class targets in the member box - just the actual styles as listed above.

 

[sbj]

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]

I'm thinking you need a template edit to include the groupID or name as a class

<div class="memberProfileBanner memberHeader-main memberProfileBanner-u55758-l">

to

<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

.memberProfileBanner.moderator { //styles }

 

[Paul B]

Specific user groups can be targeted using class .username--style2 - changing the ID as required.

 

[oO5 Dynasty]

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

 

[Paul B]

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

 

[sbj]

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

 

[Paul B]

It works fine - I tested it.

 

[sbj]

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

.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

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