1. 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?

Discussion in 'Styling and Customization Questions' started by Robust, Dec 7, 2014.

  1. Robust

    Robust Well-Known Member

    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>
     
  2. Brogan

    Brogan XenForo Moderator Staff Member

    Use .userBanner.bannerStaff.
     
  3. Robust

    Robust Well-Known Member

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

    Brogan XenForo Moderator Staff Member

    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;
    }
     
  5. Robust

    Robust Well-Known Member

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

    Brogan XenForo Moderator Staff Member

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

    Russ Well-Known Member

    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: Dec 7, 2014
    Amaury likes this.
  8. Robust

    Robust Well-Known Member

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

    Russ Well-Known Member

Share This Page