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

  • If we find you sharing Premium resources or Free Resources or any content on this site anywhere else you will be permanently banned and no refund will be issued! So don't do it! We are striving to be the number one Forum Network and Leeching just hurts it for everyone! This content is only intended for personal use and not to be repackaged or resold. If you are caught sharing our content to other sites you are forfeiting your membership and will be banned. Also creating muliple accounts is a bannable offense if you are caught using more than one username you will be banned on all usernames.
  • Downloading from our site will require you to have a paid membership. Upgrade to a Premium Membership today!

    Dont forget read our Rules! Also anyone caught Sharing this content will be banned. By using this site you are agreeing to our rules so read them. Saying I did not know is simply not an excuse! You have been warned.

Creating custom user banner styling

xFMafia

Administrator
Administrative
Joined
Feb 18, 2019
Messages
726
Reputation
1,133
Points
93
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