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