XF 1.2 Staff banners - problem overriding the banner borders?

[CTXMedia]

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:



To this:



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:

.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

 

[Paul B]

I've removed the wrapping from mine.
This is my EXTRA.css related to banners:

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


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

 

[CTXMedia]

Thanks - I'll give that a go.

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.

 

[Jeremy]

Just add .bannerStaff to the necessary places.

 

[CTXMedia]

Just add .bannerStaff to the necessary places.

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?