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

XF 1.5 Remove gradient effect from all prefixes

Amin Sabet

Well-known member
I found this from @Brogan in another thread - it removes the wrapping effect and gradient look from user banners. I like it a lot.

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:
View attachment 55737

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:"".
Now I'd like to remove the gradient effect from all thread prefixes so they will look similarly "flat". How can I do this?