Creating custom prefix styling

[Paul B]

The colours in the ACP are hard coded.

 

[beerForo]

So the 3rd value is supposed to change the border color but mine never changes. any idea?

 

[beerForo]

Great tutorial, thanks!

How you would do this code if you wanted the icon to the right of the text with the 4px in between text and icon and normal padding at the ends? Thanks for any help.

Your code:

/* #### Thread Prefixes #### */
.label
{
    &:before
    {
        padding-right: 4px;
        .m-faBase();
    }

    &.label--
    {
        &ctaAttention:before
        {
            .m-faContent(@fa-var-exclamation-triangle);
        }

        &ctaAnnouncement:before
        {
            .m-faContent(@fa-var-bullhorn);
        }

        &ctaNotice:before
        {
            .m-faContent(@fa-var-flag);
        }

        &ctaPoll:before
        {
            .m-faContent(@fa-var-poll-h);
        }
    }
}

 

[Jeremy P]

You can probably just change :before to :after and change padding-right to padding-left. You also don't need .m-faBase() in 2.3+.

 

[beerForo]

You can probably just change :before to :after and change padding-right to padding-left. You also don't need .m-faBase() in 2.3+.

That's exactly what I tried but for some reason it adds padding to both sides of the icon. To test it I add a large number like 50px and it shows on both sides of the FA.

 

[Jeremy P]

Oh, maybe try margin instead of padding.

 

[beerForo]

You're a genius, thank you!

 

[PhineasD]

How can create prefixes like this? Thx

 

[cjwinternet]

Can't get this working in 2.3

 

[Paul B]

Can't get this working in 2.3

It works fine - I still use it without any changes being made.

 

[cjwinternet]

It works fine - I still use it without any changes being made.

Sorry but that's rubbish.... seeing as you literally do have to make template changes. After all, how would it know what custom changes to apply? Magic ?

 

[Paul B]

Sorry but that's rubbish.... seeing as you literally do have to make template changes. After all, how would it know what custom changes to apply? Magic ?

I'm done with taking crap on this forum.

 

[Lee]

Sorry but that's rubbish.... seeing as you literally do have to make template changes. After all, how would it know what custom changes to apply? Magic ?

Come on, engage your brain, @Paul B clearly meant the changes still work in 2.3 and further changes aren’t required.

 

[cjwinternet]

Come on, engage your brain, @Paul B clearly meant the changes still work in 2.3 and further changes aren’t required.

Where did he say that ???

I got it working anyway so argue away.

 

[Levina]

I'm done with taking crap on this forum.

I don't know if you will see this, Paul, but thank you, because it worked beautifully.

 

[Grond]

I'm done with taking crap on this forum.

Hey @Paul B, just wanted to let you know that I appreciate your having *provided this helpful resource. Thanks man.

*Edit: minor spelling correction.

 

[Hoffi]

Several parts can be done with my AddOn:

[DD] Prefix & Label Tools - add Icons and more

Dec 30, 2025

Style your prefixes with icons and userbanners and add easy cusotm ones with icon

• Hoffi
• Add-ons [2.x]

 

[Dermot]

You can do most in one line in extra.less without touching any templates.

.label.label--FORMULA1 { border-color: #6ABCDC; background: linear-gradient(45deg, #CB2D3E 0%, #EF473A 100%); box-shadow: inset 0px 0px 0px 0px; font-family:'Roboto',sans-serif; color:#fff; padding: 2px 5px 0px 1px; &:before{ .m-faContent(@fa-var-flag-checkered); font-size: 1.1em; padding-right: 5px;  }}
.label.label--ANDROID { border-color: #78C257; background: linear-gradient(to bottom, #78C257, #78C257 100%); box-shadow: inset 0px 0px 0px 0px; font-family:'Roboto',sans-serif; color:#fff; padding: 2px 5px 0px 1px; &:before{ .m-faContent(@fa-var-android); font-size: 1.1em; padding-right: 5px;  }}

You can further adjust the styling as needed in the two examples above.

Then you would add the label to your prefix like below.