XF 1.4 How to change staff user banner colour?

[Robust]

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

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

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

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

 

[Paul B]

Use .userBanner.bannerStaff.

 

[Robust]

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

 

[Paul B]

I use it on my site and it works for me.

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

 

[Robust]

@Brogan Not sure. It won't seem to work.

 

[Paul B]

Then it's an issue with your style or the EXTRA.css template.

 

[Russ]

Your style is overwriting the background color:

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

 

[Robust]

@Russ Thanks man! Do you know how to change the colour of the little arrow that points off it?

 

[Russ]

Looks like he's using a sprite to fill those images, you'd have to edit these images:

https://static.gamingforums.net/styles/*******/stylium/aluminium/extra/*******-images.png

Ideally these questions should be directed in the style thread and hopefully he can answer them , if he's going to overwrite the default user banners at least.