• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

XF 1.4 How to change staff user banner colour?

Robust

Well-known member
#1
Forum: https://www.gamingforums.net/threads/gaming-forums.25/#post-809

I'm looking in template user_banners.css and I see this:

Code:
.userBanner
{
    font-size: 11px;
    background: transparent url('@imagePath/xenforo/gradients/form-button-white-25px.png') repeat-x top;
    padding: 1px 5px;
    border: 1px solid transparent;
    /*box-shadow: 1px 1px 3px rgba(0,0,0, 0.25);
    border-radius: 3px;*/
    text-align: center;
}

    .userBanner.wrapped
    {
        border-top-right-radius: 0;
        border-top-left-radius: 0;
        position: relative;
    }
      
        .userBanner.wrapped span
        {
            position: absolute;
            top: -4px;
            width: 5px;
            height: 4px;
            background-color: inherit;
        }
      
        .userBanner.wrapped span.before
        {
            left: 0px;
            background: url('@imagePath/extra/*******-images.png') 0 -13px no-repeat;
            /*border-top-left-radius: 3px;*/
        }
      
        .userBanner.wrapped span.after
        {
            right: 0px;
            background: url('@imagePath/extra/*******-images.png') 0 -7px no-repeat;
            /*border-top-right-radius: 3px;*/
        }
      
.userBanner.bannerHidden { background: none; box-shadow: none; border: none; }
.userBanner.bannerHidden.wrapped { margin-left: 0; margin-right: 0; }
.userBanner.bannerHidden.wrapped span { display: none; }

.userBanner.bannerStaff { color: @textCtrlBackground; background-color: #5BB75B; padding: 5px; border: none; }
.userBanner.bannerStaff.wrapped span {background-size: 9px auto; /* background-color: @primaryLighter;*/ }

.userBanner.bannerPrimary { color: @primaryMedium; background-color: @primaryLighterStill; border-color: @primaryLighter; }
.userBanner.bannerPrimary.wrapped span { background-color: @primaryLighter; }

.userBanner.bannerSecondary { color: @secondaryDark; background-color: @secondaryLighter; border-color: @secondaryLighter; }
.userBanner.bannerSecondary.wrapped span { background-color: @secondaryLighter; }

.userBanner.bannerRed        { color: white; background-color: red; border-color: #F88; }
.userBanner.bannerRed.wrapped span { background-color: #F88; }

.userBanner.bannerGreen      { color: white; background-color: green; border-color: green; }
.userBanner.bannerGreen.wrapped span { background-color: green; }

.userBanner.bannerOlive      { color: black; background-color: olive; border-color: olive; }
.userBanner.bannerOlive.wrapped span { background-color: olive; }

.userBanner.bannerLightGreen { color: black; background-color: lightgreen; border-color: lightgreen; }
.userBanner.bannerLightGreen.wrapped span { background-color: lightgreen; }

.userBanner.bannerBlue       { color: white; background-color: blue; border-color: #88F; }
.userBanner.bannerBlue.wrapped span { background-color: #88F; }

.userBanner.bannerRoyalBlue  { color: white; background-color: royalblue; border-color: #81A9E1;  }
.userBanner.bannerRoyalBlue.wrapped span { background-color: #81A9E1; }

.userBanner.bannerSkyBlue    { color: black; background-color: skyblue; border-color: skyblue; }
.userBanner.bannerSkyBlue.wrapped span { background-color: skyblue; }

.userBanner.bannerGray       { color: black; background-color: gray; border-color: #AAA; }
.userBanner.bannerGray.wrapped span { background-color: #AAA; }

.userBanner.bannerSilver     { color: black; background-color: silver; border-color: silver; }
.userBanner.bannerSilver.wrapped span { background-color: silver; }

.userBanner.bannerYellow     { color: black; background-color: yellow; border-color: #E0E000; }
.userBanner.bannerYellow.wrapped span { background-color: #E0E000; }

.userBanner.bannerOrange     { color: black; background-color: orange; border-color: #FFC520; }
.userBanner.bannerOrange.wrapped span { background-color: #FFC520; }
How do I change the colour of the staff banner? I think you can see why it needs to be changed on the post. Tried editing background-color on .userBanner.staffBanner already. Didn't work.

The banner uses this:

Code:
<em class="userBanner bannerStaff wrapped" itemprop="title">
<span class="before"></span>
<strong>Staff Member</strong>
<span class="after"></span>
</em>
 

Robust

Well-known member
#3
@Brogan Woops. I meant to say I've already tried .userBanner.bannerStaff, but wrote it the other way around in my main post. I edited 5BB75B but it didn't seem to work.
 

Brogan

XenForo moderator
Staff member
#4
I use it on my site and it works for me.

Code:
.userBanner.bannerStaff
{
    background-color: @secondaryMedium;
    border-color: @secondaryMedium;
    color: @textCtrlText;
    text-shadow: 1px 1px 1px @primaryLighterStill;
}
 

Russ

Well-known member
#7
Your style is overwriting the background color:

Code:
#styliumSetting .styliumTertiaryColor, .userBanner.bannerStaff {
background-color: rgb(48, 142, 214);
}
Try adding !important after the background color(on the example Brogan gave you)

background-color: @secondaryMedium !important;
 
Last edited: