Ask question

Ask Questions and Get Answers from Our Community

Answer

Answer Questions and Become an Expert on Your Topic

Contact Staff

Our Experts are Ready to Answer your Questions

  • Upgrade your account to xenForo 2.x.x All Accesss Pass. Monthly subscription to the Premium group. Purchase a paid elevation of rights worth 30$ And Lifetime Upgrade 170$.

Creating custom user banner styling

xFMafia

Administrator
Administrative
Joined
Feb 18, 2019
Messages
1,449
Reputation
2,422
Points
113
Creating custom user banner styling By default, XF comes with the following user banner styles:
creating-custom-user-banner-styling.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.lesstemplate.
Look for the section in the template highlighted in the screenshot below:
creating-custom-user-banner-styling-1.png
Then just add your custom entries after the orange entry and before the closing }, as follows:
creating-custom-user-banner-styling-2.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:
creating-custom-user-banner-styling-3.png
The result of all that is this:
creating-custom-user-banner-styling-4.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.
creating-custom-user-banner-styling-5.png
Like so:
creating-custom-user-banner-styling-6.png
If you found this tutorial useful, donations of positive emojis are gladly received
 
Top