• While creating requests or asking for support in the existing XenForo threads please maintain XenForo support policy strictly.

  • You MUST read the Babiato Rules before making your first post otherwise you may get permanent warning points or a permanent Ban.

    Our resources on Babiato Forum are CLEAN and SAFE. So you can use them for development and testing purposes. If your are on Windows and have an antivirus that alerts you about a possible infection: Know it's a false positive because all scripts are double checked by our experts. We advise you to add Babiato to trusted sites/sources or disable your antivirus momentarily while downloading a resource. "Enjoy your presence on Babiato"

Prefix Styling

Alsansan

New member
Nov 22, 2020
14
2
3
Hello! Could someone share the content of this guide?

Thanks
 
Hope this helps.



https://xenforo.com/community/attachments/pefix-styles-png.235096/



By default, XF comes with the following prefix 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 core_labels.less template.

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

creating-custom-prefix-styling-1.jpg



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

a.jpg



I recommend using a name which won't cause any potential conflicts with the core code, or third party add-ons.
I prefix (prefix, geddit?) 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 ctaAnnouncement, as the prefix is for staff posted announcement threads.

The two values/colours (yes, that is the only correct spelling in English) in the curly brackets denote the text colour, in this case white, and the background colour, in this case #ff8800.

XF will then automagically (real word) generate the border and hover colours based on those values using the core CSS.

Finally, create the prefix:

creating-custom-prefix-styling-3.png



That's it if you just want vanilla styled prefixes.

creating-custom-prefix-styling-4.png



However, if you want to go one step further and add icons, images, or other embellishments (who doesn't like sparkly text?), that's also quite simple.

For that you will add your custom code to the extra.less template.

In this example I'm going to add a Font Awesome icon in front of the text.
The code for that is highlighted in the screenshot below - ensure the class name, in this case ctaAnnouncement, matches what you entered in the core_labels.less template.

The Font Awesome code, in my example -- bullhorn -- can be found here: Find Icons with the Perfect Look & Feel | Font Awesome

aa.jpg
 
AdBlock Detected

We get it, advertisements are annoying!

However in order to keep our huge array of resources free of charge we need to generate income from ads so to use the site you will need to turn off your adblocker.

If you'd like to have an ad free experience you can become a Babiato Lover by donating as little as $5 per month. Click on the Donate menu tab for more info.

I've Disabled AdBlock