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

XF 1.2 Staff banners - problem overriding the banner borders?

Discussion in 'Styling and Customization Questions' started by CyclingTribe, Sep 1, 2013.

  1. CyclingTribe

    CyclingTribe Well-Known Member

    I'd like to remove the borders and wrap (at the edges) from the staff banners so it results in the staff moniker going from this:

    upload_2013-9-1_23-35-50.png

    To this:

    upload_2013-9-1_23-36-40.png

    However I cannot find a way to override the userBanner class that sets the background and border. I've tried setting the values to nill and making them !important in the .userBanner.bannerStaff class, but that doesn't work:

    Code:
    .userBanner.bannerStaff {
    border-color: "" !important;
    background: "" !important;
    padding: 2px 5px; !important;
    border: "" !important;
    border-radius: "" !important;
    box-shadow: "" !important;
    }
    
    I've also tried disabling staff banners in User Options and instead applying a custom CSS via the 'Moderating' usergroup banner settings, but when I use display:block to centre the title in the postbit, it makes the moniker absolutely massive (width wise) on the user profile (and presumably the banner features elsewhere too?).

    Is there any way to get my staff banners to display without borders?

    Thanks,
    Shaun :D
     
  2. Brogan

    Brogan XenForo Moderator Staff Member

    I've removed the wrapping from mine.
    This is my EXTRA.css related to banners:
    Code:
    .userBanner {
    background: transparent url('@imagePath/xenforo/gradients/category-23px-light.png') repeat-x top;
    padding: 1px 4px;
    font-size: 10px;
    font-weight: bold;
    box-shadow: none;
    }
    
    .messageUserBlock .userBanner {
    margin-top: 4px;
    margin-bottom: 4px !important;
    margin-right: 0px !important;
    margin-left: 0px !important;
    padding: 1px;
    }
    
    .messageUserBlock .userBanner:last-child {
    margin-bottom: 0px !important;
    }
    
    .userBanner.wrapped span {
    height: 0px;
    }
    
    .xenOverlay.memberCard .cardUserBanner {
    margin: 4px 0;
    }
    
    .userBanner.bannerStaff {
    background-color: @secondaryMedium;
    border-color: @secondaryMedium;
    color: @contentBackground;
    text-shadow: 1px 1px 1px @secondaryMedium;
    }
    The result:
    upload_2013-9-2_0-4-35.png

    Basically the left and right margins and setting the span height to 0px will do it.

    Edit: You should use border:none rather than border:"".
     
    Last edited: Sep 2, 2013
    CyclingTribe likes this.
  3. CyclingTribe

    CyclingTribe Well-Known Member

    Thanks - I'll give that a go. :D

    Presumably this will change all banners though, won't it? I was looking to specifically change the staff banners but it seems the way the CSS is applied at the moment you can't select just the staff banner for border/background changes as the userBanner trumps it.
     
  4. Jeremy

    Jeremy XenForo Moderator Staff Member

    Just add .bannerStaff to the necessary places.
     
  5. CyclingTribe

    CyclingTribe Well-Known Member

    Unfortunately that doesn't work because the borders come from .userBanner and that class is applied to ALL banners - including staff - so you cannot remove the borders around the staff banner (classes = "userBanner bannerStaff wrapper").

    I've resolved it now by editing the master userbanner class - since I won't be using banners for anyone else anyway - but it does present a problem when you want to style staff banners separately to other banners.

    Perhaps staff banners should be a separate class - since their application in the ACP seems to be separate from the usergroup banners?
     
    Martok likes this.

Share This Page