• You need 5 posts to download resources. You can only download 2 resources per day. To remove these limits consider upgrading.

XF [cXF] Thread prefix icons

Nick

Developer
Banned User
LV
0
 
Joined
Feb 7, 2023
Messages
491
Reaction score
128
Awards
14
Would you like to customize your prefixes?

Here's a simple DIY tutorial as an example. Of course, you can extend it for your own needs as you wish.


So, read this tutorial to achieve something like this:
2019-02-04_10-24-15.gif


1. Create your custom prefix

In admin CP go to Forums > Thread prefixes and click on button Add prefix on the right top side.

Fill the form like this:
2639a03606e97d7a2746488d644eacb5.png

you can choose any prefix name you want, just change pack-a with your desired name.

* dont' forget to select applicable forums at the bottom


2. Add code to your extra.less template

Open you extra.less template and add the code:
Code:
/*** Prefix Pack A ***/
.label.label--pack-a {
    background: #CD7F32;
    color: #fafafa;
    &:hover {
        background: #4A4E51;
        color: #fafafa;
    }
    &:before {
        .m-faBase();
        .m-faContent(@fa-var-cogs);
        padding-right: 5px;
    }
}
/**********/

For different prefix name just change pack-a in the code.

To edit prefix when hover check class &:hover.

To edit prefix icon check class &:before. To change the Font Awesome icon eidt the word cogs (in above example) with any other icon name.


Want a Pro icon of a specific style?

Edit .m-faBase(); and change it to .m-faBase('Pro', @faWeight-solid);, .m-faBase('Pro', @faWeight-regular); or .m-faBase('Pro', @faWeight-light);.


Want a Brand icon?

Edit .m-faBase(); and change it to .m-faBase('Brands');.

Want to show only icon without text in thread prefix?

Code:
/*** Prefix Pack A ***/
.label.label--pack-a {
    background: #CD7F32;
    color: #fafafa;

    .label:not(.menuPrefix)& {
        font-size: 0; 
    }

    &:hover {
        background: #4A4E51;
        color: #fafafa;
    }
    &:before {
        .m-faBase();
        .m-faContent(@fa-var-cogs);
        padding-right: 5px;
        font-size: @xf-fontSizeNormal;
        padding-left: 5px;

        .label:not(.menuPrefix)& {
            font-size: @xf-fontSizeNormal;
        }
    }
}
/**********/

That's basically it. To add more custom prefixes just go through the above procedure for each prefix.
 
Top