XF 1.2 Custom CSS class name for banners

[Ranger375]

I don't really know CSS. Can anyone give me template of sorts that I can paste into my extra.css and swap the colors out accordingly for the usergroup banners?

 

[Lisa]

I've made a change for beta 2 so that you don't have to explicitly specify the wrapped "wings" color. It will simply inherit the background color. However, this isn't exactly how the default ones all appear though it's close.

Just to paste an example here:

.userBanner.bannerGray       { color: black; background-color: gray; border-color: #AAA; }
.userBanner.bannerGray.wrapped span { background-color: #AAA; }

Note that the background colors are different, so if you want exactly this behavior, you will need to specify both the banner and the wrapped span.

However, as of beta 2...

.userBanner.bannerGreen      { color: white; background-color: green; border-color: green; }
.userBanner.bannerGreen.wrapped span { background-color: green; }

The second line there is superfluous because the wings have the same background color as the banner itself.

Just to clarify, we could still use .bannerGreen without the .userBanner class if we don't want to inherit anything from the defaults?

 

[Paul B]

Yes.

I have created a simple guide for reference: http://xenforo.com/community/resources/creating-custom-user-group-banner-css.2000/

 

[Lisa]

Yes.

I have created a simple guide for reference: http://xenforo.com/community/resources/creating-custom-user-group-banner-css.2000/

Fab.

Thanks @Brogan, @Mike