XF 2.1 Changing the appearance of the staff member banner

RobynLJ

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

Matthew S

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

RobynLJ

Member
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:

SyTry

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

RobynLJ

Member
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:

SyTry

Well-known member
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);
    }
 

RobynLJ

Member
Okay, I typed in white instead of black and that got the white background, but how do I now get the black text? Thanks.
 

RobynLJ

Member
Well.... They don't get staff banners unless they are in the administrator or moderator usergroup, if I'm not too much mistaken?
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.
 

Manster54

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

Donske

Member
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);
}
 
Top