XF 2.1 Changing the appearance of the staff member banner

RobynLJ

Active member
I want to change the background colour of the staff member banner to white and have black text.

Can you tell me please what code I need to add and where do I add it? I'm technically challenged, so please be specific. :unsure:

Thank you for your help. :)
 
Banner styling can be found in ACP -> Groups & Permissions -> User groups. Just click on the group of interest. There is a white background with black writing option there, but you can also use the Other choice to enter custom styling.
 
Thank you for your reply Matthew.

Yes, I know what you are saying and I have set up (as per instructions I found here in another thread) a white/black option in the "other, using custom CSS class name" but staff member is not a user group, and as such I don't think that the options in this section can be applied to staff members. I think this has to be done in CSS, but I'm unsure of the exact code and in which section of the template I should place it.
 
Last edited:
Hello,

You can modifiy the code in your app_user_banners.less template :
Code:
    &.userBanner--staff,
    &.userBanner--primary
    {
        .m-userBannerVariation(@xf-linkColor, @xf-contentHighlightBg, @xf-borderColorHighlight);
    }

You can add this code in your EXTRA.less template :
Code:
    &.userBanner--staff,
    &.userBanner--primary
    {
        .m-userBannerVariation(black, #030303);
    }

This should work ! ;)

Regards, SyTry
 
Thank you SyTry. So I need to add the bottom piece of code then?

EDIT.....I added that and got server error logs..........so I think I will leave well enough alone for now., but thanks anyway.
 
Last edited:
Thank you SyTry. So I need to add the bottom piece of code then?

EDIT.....I added that and got server error logs..........so I think I will leave well enough alone for now., but thanks anyway.
And if you modify this code in app_user_banners.less :
Code:
    &.userBanner--staff,
    &.userBanner--primary
    {
        .m-userBannerVariation(@xf-linkColor, @xf-contentHighlightBg, @xf-borderColorHighlight);
    }

To this :
Code:
    &.userBanner--staff,
    &.userBanner--primary
    {
        .m-userBannerVariation(black, #030303);
    }
 
I'm new to this program, but I just tried this and any member can be displayed as staff with the staff banner. It's just a matter of checking the 'Display user as staff' box.
Odd that xF didn't include an easy way to change the css properties of this "staff" banner then. Seems like an oversight.

Also, I have a feeling this would be better edited in extra.less.... Especially if you're using the default style.
 
I found this thread and I am actually doing basically the same thing and I am using this code in the [app_user_banner.less]
However, I am also getting a server error. Do you know how you resolved it?

&.userBanner--staff,
&.userBanner--primary
{
.m-userBannerVariation(yellow, #333333);
}
 
What is your error ?
Without code:
a8kvUtK.png


With Code:
quBggPz.png
 
Top Bottom