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

oO5 Dynasty

Well-known member
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.
No thank you because without you asking the question, I wouldn't have learned something new today!
So I was able to style a user group, and then I was able to change the way the style looked per template, etc.

The style inside the tool's tip is for the admin user group but has a small amount of CSS difference from the Members Notable page.
Which is also showcasing Admin style.



yay.png

So this is my main style for admin user groups, and depending on how I want it to look per template, I make the changes and add it to Extra.less
Web capture_10-6-2022_171216_user.oo5dynasty.com.jpeg




Members_notable template
Extra.less
Code:
[data-template="member_notable"] .username--style3 {
    font-weight: bold;
    color: #fff;
    text-shadow: 0 0 0px #fff, 0 0 0px #fff, 0 0 2px #000000, 0 0 2px #000000, 0 0 6px #f77088, 0 0 9px #f77088, 0 0 0px #f77088;
}



This is something I did not know I could do Sooo thank you.
 
  • Love
Reactions: sbj

sbj

Well-known member
Well, let us both thank Brogan. He provided the crucial info.

Also maybe you replying to this thread was the ignition it needed. Thank you for being helpful, much appreciated.
 

oO5 Dynasty

Well-known member
Well, let us both thank Brogan. He provided the crucial info.

Also maybe you replying to this thread was the ignition it needed. Thank you for being helpful, much appreciated.
Yup, I bumped his solution and gave it a thumbs up cause he is the man. Also, I am trying my hardest to learn xenforo, so I'm def testing the waters lol.
 
  • Like
Reactions: sbj

oO5 Dynasty

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;
    }
}
Dance Thank You GIF
 
  • Like
Reactions: sbj
Top