XF2 GUIDE Creating custom User banner styling

By default, XF comes with the following user banner styles:




Creating custom styling using the Other, using custom CSS class name option is fairly straightforward.

This guide will explain how to.

The easiest way by far to add new prefix styling and to ensure it inherits all of the core styling is to edit the app_user_banners.less template.

Look for the section in the template highlighted in the screenshot below:




Then just add your custom entries after the orange entry and before the closing }, as follows:




I recommend using a name which won't cause any potential conflicts with the core code, or third party add-ons.
I prefix all of my custom entries with the acronym for my site -- cta -- and also like to give it a descriptive name, so in this case I have used ctaSupporter.

The two values/colours in the curly brackets denote the text colour, in this case white, and the background colour, in this case #008800.

XF will then generate the border colour based on those values, using the core CSS.

Finally, configure the user group:




The result of all that is this:




You can of course style it as you wish, adding icons, images, etc.

To do that you would use the extra.less template.
The following example adds a Font Awesome (https://fontawesome.com/icons?d=gallery ) star icon in front of the text.




Like so: