XF1 [TUT] Creating custom user group banner CSS

Compatible XF Versions
1.2, 1.3, 1.4, 1.5
These instructions will explain how to create your own custom CSS for user banners.

Give the banner a title:


Choose a class name for your custom class, in this example we are using my-style.
Add it to the custom CSS field for the user group, like so:


If you want the banners to wrap around the message user info block then you must also use the userBanner class, as shown above.

Note that there are no . before the class names and they are separated by a space.

Then add the class and your code to EXTRA.css.
You can style it how you want, for example, this code:
Code:
.userBanner.my-style
{
color: white;
background-color: green;
}
Will result in:


Whereas this:
Code:
.userBanner.my-style
{
color: white;
background-color: green;
border-color: green;
}
Will give:


If you don't want the wrapping effect, simply don't include the userBanner class in the custom CSS field and EXTRA.css.

Applies to XenForo versions 1.2.0 Beta 2 and later.