Creating custom User banner styling

XF2 GUIDE Creating custom User banner styling

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

1566747742470.png


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:

1566746468224.png


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

1566746538270.png


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:

1566746708977.png


The result of all that is this:

1566746760594.png


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.

1566746995913.png


Like so:

1566747030985.png
  • Like
Reactions: hits79
Author
shimmer
Views
1,464
First release
Last update
Rating
5.00 star(s) 2 ratings

More resources from shimmer

Latest reviews

nice thanks
Quite informative post
Top