Add-on Prefix Generator

Ernest L. Defoe

Well-known member
I know most people here are literate when it comes to CSS and things of that nature but sadly I'm not and I'm sure there are some on here that aren't either. I hired a coder buddy of mine to create an addon that will generate the code needed to make custom prefixes very easy.

Features include:

Font Awesome icons
Image support
Text color
Background color

Well why describe it when I can just show you a screenshot. This will make the process of making prefixes easy. With the FA integration you select the icon from the drop down.


I don't know how many of ya will find a use for this addon but as soon as it is completed I plan to release it here for free. Once you set everything the way you want it all you have to do is copy what's in the output box at the bottom and paste it in extra.css and then create the prefix in the xF prefix manager and put the info from the Prefix Name box in the Custom CSS block just the text you input in the box in the prefix generator. Cause it outputs the info from the Prefix Name in the generator as .Name (example) so you would just put Name (example) in this block like in the pic below.

Screen Shot 2014-11-06 at 8.57.43 PM.png
Then just set the rest of the info like the name of the prefix and forums it can be used in. I should have this released in a day or 2. This will be feature locked a support will be very limited. I know it works as I am using it on my site so it should be bug free. The only thing is this doesn't play well with Safari as far as the live preview of the prefix and the output area. Works fine in Chrome and probably FF as well.

Ernest L. Defoe

Well-known member
Actually this addon now is going to be located in the Thread Prefixes area and will have a tab at the top when you create a new prefix called Customize and there will be no need to add the output code to the extra.css template. It has it's own template it stores the prefixes. All you have to do when creating a new prefix is select the Other Custom CSS radio button and type in a css name like Test or prefixTest and then select the forums it's used in and who can use it then click on the Customize tab and customize it the way you want.

It's gone from generator to generate the code needed to actually integrating more into the current system and less work involved. I am excited to be able to use it and excited to release it here for free. I know not everyone will use it cause they prefer their way of doing it but this is for the non technicals like me out there as this will be so much easier.

Ernest L. Defoe

Well-known member
Here are some updated screenshots to give everyone an idea of how this addon will work.

First you click Thread Prefixes like you are going to make a new prefix.
Screen Shot 2014-11-07 at 3.52.28 PM.png

Then you will have the window like this:
Screen Shot 2014-11-07 at 3.54.15 PM.png
Click the + Create New Thread Prefix button at the top and you will get this window:
Screen Shot 2014-11-07 at 3.55.30 PM.png

I'm sure I haven't lost anyone yet as this is exactly the same as creating a new prefix except for one change. See the Customize tab at the top? Well create your prefix like normal as far as Title goes. Then click the Other, using custom CSS class name: radio button. Then type in prefixName or just Name. Then set the forums and permissions. Then when you are ready to customize just click the customize tab. It will bring up this window.

All you have to do now is enter the values in the spots you want to customize and then hit the Save Thread Prefix button and your new prefix is ready to use with the customizations you made. No more having to copy the output to extra.css. It's there to so you can look at the code and see how it's done. Like I said this also includes support for FontAwesome and has all the icons in a drop down. All you have to do is find the one you want to use. Again I am testing this out on my site and hope to have it ready for release soon.