Creating custom prefix styling

Creating custom prefix styling

Brogan

XenForo moderator
Staff member
As long as the icon appears in the font file XF uses, then it's fine.

If it's not there, an error will be thrown such as:
Code:
XF\CssRenderException: Error rendering template public:extra.less: variable @fa-var-cars is undefined in file public:extra.less in public:extra.less (on or near line 3305) src/XF/CssRenderException.php:87
 

rdn

Well-known member
As long as the icon appears in the font file XF uses, then it's fine.
How can I view the list?
Like this icon that belongs to Free FA:
It doesn't render when use based on your guide.

Thanks!
 

Brogan

XenForo moderator
Staff member
That's a brand icon, so you need to use the brands font, not the regular(pro) font.

CSS:
.label.label--ctaAnnouncement
{
    &:before {
        .m-faBase('Brands');
        .m-faContent(@fa-var-android);
        padding-right: 4px;
    }
}
 

vandross

New member
For whatever reason this guide didn't work for me. Has anything changed @Brogan? We're using a custom Theme House design. Perhaps that's why it didn't work for me.
 

LenKaiser

Active member
Same I'm using the default theme and it does not work for me either. :(

Edit the colors work just fine for me, its the portion where you add the FontAwesome icons that does not seem to work.

Here is my CSS code for the FA icon:

Code:
/*PREFIXES*/

.label.label--belother {
    &:before {
        .m-faBase();
        .m-faContent(@fa-angle-double-right);
        padding-right:4px;
    }
}

Here is my CSS for the colors:

Code:
&.label--belother { .m-labelVariation(#ffffff, #560777); }
    &.label--belsuggestion { .m-labelVariation(#ffffff, #141414); }
    &.label--belfeedback { .m-labelVariation(#ffffff, #df7604); }
    &.label--belsiteerror { .m-labelVariation(#ffffff, #ae0303); }
    &.label--belquestion { .m-labelVariation(#ffffff, #ae3b03); }
    &.label--belsolved { .m-labelVariation(#ffffff, #058814); }
    &.label--belacctissues { .m-labelVariation(#ffffff, #cc054b); }
}
 
Last edited:

LenKaiser

Active member
I'm getting errors in the Admin Panel related to this:

  • XF\CssRenderException: Error rendering template public:extra.less: variable @fa-angle-double-right is undefined in file public:extra.less in public:extra.less (on or near line 3231)
  • src/XF/CssRenderException.php:87
  • Generated by: Unknown account
  • Oct 6, 2019 at 10:00 AM
Stack trace
3228 | .label.label--belother {
3229 | &:before {
3230 | .m-faBase();
3231| .m-faContent(@fa-angle-double-right);
3232 | padding-right:4px;
3233 | }
3234 | }
------------

#0 src/XF/CssRenderer.php(408): XF\CssRenderException::createFromLessException(Object(Less_Exception_Compiler), 'public:extra.le...', '// Note that th...')
#1 src/XF/CssRenderer.php(342): XF\CssRenderer->renderToCss('public:extra.le...', '// Note that th...')
#2 src/XF/CssRenderer.php(250): XF\CssRenderer->renderTemplate('public:extra.le...', NULL)
#3 src/XF/CssRenderer.php(116): XF\CssRenderer->renderTemplates(Array, Array, Array)
#4 src/XF/CssWriter.php(53): XF\CssRenderer->render(Array)
#5 css.php(30): XF\CssWriter->run(Array, 1, 1, 'b2efe7e1ab72591...')
#6 {main}

-------------

Previous Less_Exception_Compiler: variable @fa-angle-double-right is undefined in file anonymous-file-0.less in anonymous-file-0.less - src/vendor/oyejorge/less.php/lib/Less/Tree/Variable.php:49
#0 src/vendor/oyejorge/less.php/lib/Less/Tree/Expression.php(52): Less_Tree_Variable->compile(Object(Less_Environment))
#1 src/vendor/oyejorge/less.php/lib/Less/Tree/Mixin/Call.php(43): Less_Tree_Expression->compile(Object(Less_Environment))
#2 src/vendor/oyejorge/less.php/lib/Less/Tree/Ruleset.php(147): Less_Tree_Mixin_Call->compile(Object(Less_Environment))
#3 src/vendor/oyejorge/less.php/lib/Less/Tree/Ruleset.php(88): Less_Tree_Ruleset->EvalMixinCalls(Object(Less_Tree_Ruleset), Object(Less_Environment), 11)
#4 src/vendor/oyejorge/less.php/lib/Less/Tree/Ruleset.php(94): Less_Tree_Ruleset->compile(Object(Less_Environment))
#5 src/vendor/oyejorge/less.php/lib/Less/Tree/Ruleset.php(94): Less_Tree_Ruleset->compile(Object(Less_Environment))
#6 src/vendor/oyejorge/less.php/lib/Less/Parser.php(199): Less_Tree_Ruleset->compile(Object(Less_Environment))
#7 src/XF/CssRenderer.php(404): Less_Parser->getCss()
#8 src/XF/CssRenderer.php(342): XF\CssRenderer->renderToCss('public:extra.le...', '// Note that th...')
#9 src/XF/CssRenderer.php(250): XF\CssRenderer->renderTemplate('public:extra.le...', NULL)
#10 src/XF/CssRenderer.php(116): XF\CssRenderer->renderTemplates(Array, Array, Array)
#11 src/XF/CssWriter.php(53): XF\CssRenderer->render(Array)
#12 css.php(30): XF\CssWriter->run(Array, 1, 1, 'b2efe7e1ab72591...')
#13 {main}

Request state
array(4) {
["url"] => string(237) "/community/css.php?css=public%3ACMTV_Badges.less%2Cpublic%3ACMTV_QT_questions_only_forums.less%2Cpublic%3Anode_list.less%2Cpublic%3Ashare_controls.less%2Cpublic%3Aextra.less&s=1&l=1&d=1570351920&k=b2efe7e1ab7259185fe4ef278fac876a7d5eb2cd"
["referrer"] => string(38) "http://myforum.com"
["_GET"] => array(5) {
["css"] => string(132) "public:CMTV_Badges.less,public:CMTV_QT_questions_only_forums.less,public:node_list.less,public:share_controls.less,public:extra.less"
["s"] => string(1) "1"
["l"] => string(1) "1"
["d"] => string(10) "1570351920"
["k"] => string(40) "b2efe7e1ab7259185fe4ef278fac876a7d5eb2cd"
}
["_POST"] => array(0) {
}
}
 

vandross

New member
Just to make sure I'm doing it right, which template are you adding the color coding to?
Here is my CSS for the colors:

I definitely put it in the core_labels.less template and nothing works.

@Brogan what are the two of us doing wrong?

ETA: I made the label white bg/text just to see if it would work. Even on the default theme it doesn't.

Screenshot 2019-10-08 at 7.55.45 AM.png
Screenshot 2019-10-08 at 7.55.55 AM.png
 

Attachments

  • Screenshot 2019-10-08 at 7.55.55 AM.png
    Screenshot 2019-10-08 at 7.55.55 AM.png
    126 KB · Views: 13
  • Screenshot 2019-10-08 at 7.55.45 AM.png
    Screenshot 2019-10-08 at 7.55.45 AM.png
    33 KB · Views: 12
Last edited:

LenKaiser

Active member
I added it to the core_labels.less template. The colors worked fine for me, the icons returned errors and I had to remove it from the template. Maybe try using lower case letters and the hex format on the colors. Not sure either of those are your issue.
 
Top