Fixed Custom Prefix Classes

[Static-Xbox]

Hi,

On my XF 1.5 live forum I've got a load of custom-coloured Thread Prefixes for NHL, MLB and a couple of random sports teams. When my test board converted to 2.0b1 these prefixes continued to exist, but obviously the custom CSS for them was not carried over. I fixed my staff banners by taking the code from user_banner.css and adding them to app_user_banner.less and formatting it appropriately, so I assumed the same approach would work with the thread prefixes. I added the following code to core_labels.less just after &.label--orange, assuming it would function the same as it had with the user banners. The problem is that it does not seem to be accepting these in the same way, the custom classes don't work at all, the prefixes are simply colourless boxes the prefix beside them (ANA next to Anaheim, for example, no styling).

Is there a different process for adding custom prefixes to XenForo 2.0b1? Is there an issue with the CSS/Less itself? Any help would be greatly appreciated!

&.label--washington { .m-labelVariation(white, #CF1323B, #002148); }
    &.label--devils { .m-labelVariation(white, #E03A3E, white); }
    &.label--hurricanes { .m-labelVariation(white, #E03A3E, black); }
    &.label--jackets { .m-labelVariation(white, #00285C, #E03A3E); }
    &.label--canucks { .m-labelVariation(white, #07346F, #047A4A); }
...and so on...

 

[Static-Xbox]

Sorry for double-posting, but I did want to mention as a follow-up that I did also try adding the code to extra.less wrapped in a .label {}, and as .label.label--washington to see if either would work, neither did, so I'm somewhat confused as to how to proceed. I checked the manual, as well, and while it's excellent help for the 1.x branch, it obviously does not have information for the 2.x branch at this time.

 

[Chris D]

OK, there's a few things here.

First, as you have noted above, the class names have changed, so custom class names in XF1 would have been written as prefix jackets etc. In XF2 you will have to update all of your prefixes so the custom CSS class names are, e.g. label label--jackets (we made prefixes into a generic system named labels and we use them for other things besides prefixes, we also take a BEM approach to CSS styling hence the additional label-- bit).

If you tried to add your custom styling somewhere, it would have to look like this:

.label
{
    &.label--jackets { .m-labelVariation(white, #00285C, #E03A3E); }
}

Unfortunately in beta 1, if you attempted to add that to extra.less you will get an error as it can't see the m-labelVariation mixin.

So right now, you would need to add the code directly to core_labels.less. However, as of beta 2, we've moved some code around and you will be able to just put your custom code in extra.less (which is probably preferable).

The next problem is how the styling in the Admin CP works. When you add your custom LESS to a template, you will be adding it to a template in a specific style. When the style for the Admin CP is rendered, that style is actually coming from at least one level above your chosen style; it comes directly from the un-editable Master style. So, any changes you make to any style won't be reflected in the Admin CP. This means if you're looking at the list of prefixes and wondering why the colours aren't changing, it's because the style you're viewing doesn't have those changes. As a result, as of beta 2, we're basically going to be removing that prefix preview from the prefix list. Ultimately, you'll just need to apply the prefix to a thread and view it in the thread list.

With all those things in mind (updating the prefix class names, writing the code in core_labels.less, previewing the prefixes in the actual thread list) the end result should look something like:

 

[Static-Xbox]

Thanks again for your help, Chris, sounds as though it'll be a lot simpler if I just hold off on the prefixes until Beta 2!

 

[RobParker]

Hmm hope you don't mind the hijack but reading this it sounds like we've been missing something.

Currently we've been specifying the class as something like

fa fa-television prefixes prefix_tv

and then having this in our extra.less

prefixes {
    font-size: 14px;
    white-space: normal;
    font-family: inherit;
    font-weight: bold !important;
    line-height: 1.26 !important;
    padding: 0.1em 0.5em !important;
    border-radius: 4px !important;
    color: white;
    background: #102334; 
    border: 1px solid #000000;
}

.fa:before {
    display: inline-block;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    margin-right: 5px;
}

 .prefix_tv {
            color: white !important;
            background: rgb(242, 147, 13) !important; 
             border: 1px solid #102334 !important;
        }

So we give all the prefixes the prefixes class as well as the appropriate fa class and specific prefix_blah class.

Is this wrong (or is there a better way)?

 

[Static-Xbox]

Sorry to bring this up once again, but with Beta 2 released, I upgraded my test site and tried inserting the following code into extra.less:

Spoiler: Sorry, bit of a long list so I'll wrap it in a spoiler

.label {
   
    &.label--washington { .m-labelVariation(white, #CF1323B, #002148); }
    &.label--devils { .m-labelVariation(white, #E03A3E, white); }
    &.label--hurricanes { .m-labelVariation(white, #E03A3E, black); }
    &.label--jackets { .m-labelVariation(white, #00285C, #E03A3E); }
    &.label--canucks { .m-labelVariation(white, #07346F, #047A4A); }
    &.label--flames { .m-labelVariation(#FFC758, #E03A3E, black); }
    &.label--oilers { .m-labelVariation(white, #003777, #E66A20); }
    &.label--kings { .m-labelVariation(#AFB7BA, black, #AFB7BA); }
    &.label--san { .m-labelVariation(#F38F20, #05535D, #F38F20); }
    &.label--ducks { .m-labelVariation(#EF5225, black, #91764B); }
    &.label--arizona { .m-labelVariation(#EFE1C6, #841F27, #EFE1C6); }
    &.label--chicago { .m-labelVariation(white, #E3263A, black); }
    &.label--blues { .m-labelVariation(#FFC325, #0546A0, #FFC325); }
    &.label--pred { .m-labelVariation(#002E62, #FDBB2F, #002E62); }
    &.label--stars { .m-labelVariation(white, #006A4E, #C0C0C0); }
    &.label--colo { .m-labelVariation(white, #8B2942, #01548A); }
    &.label--jets { .m-labelVariation(white, #002E62, #0168AB); }
    &.label--wild { .m-labelVariation(#EEE3C7, #025736, #BF2B37); }
    &.label--sens { .m-labelVariation(#D69F0F, #E4173E, black); }
    &.label--leafs { .m-labelVariation(white, #003777, white); }
    &.label--vegas { .m-labelVariation(#87704E, #27241F, #87704E); }
    &.label--bolton { .m-labelVariation(#C0C0C0, #1D3C71, #BF2B37); }
    &.label--aDBacks { .m-labelVariation(#E3D4AD, #A71930, #E3D4AD); }
    &.label--aBraves { .m-labelVariation(#13274F, #CE1141, #13274F); }
    &.label--bOrioles { .m-labelVariation(white, black, #DF4601); }
    &.label--bRedSox { .m-labelVariation(white, #0D2B56, #BD3039); }
    &.label--cCubs { .m-labelVariation(white, #0E3386, #CC3433); }
    &.label--cWhiteSox { .m-labelVariation(#C4CED4, black, #C4CED4); }
    &.label--cReds { .m-labelVariation(white, #C6011F, black); }
    &.label--cIndians { .m-labelVariation(#E31937, #002B53, #E31937); }
    &.label--cRockies { .m-labelVariation(#C4CED4, #333366, #231F20); }
    &.label--dTigers { .m-labelVariation(white, #0C2C56, white); }
    &.label--hAstros { .m-labelVariation(white, #002D62, #EB6E1F); }
    &.label--kCRoyals { .m-labelVariation(white, #004687, #C09A5B); }
    &.label--lAAngels { .m-labelVariation(white, #BA0021, #003263); }
    &.label--lADodgers { .m-labelVariation(white, #005A9C, #EF3E42); }
    &.label--mMarlins { .m-labelVariation(#0077C8, #FF6600, #FFD100); }
    &.label--mBrewers { .m-labelVariation(#B6922E, #0A2351, #B6922E); }
    &.label--mTwins { .m-labelVariation(white, #002B5C, #D31145); }
    &.label--nYMets { .m-labelVariation(#FF5910, #002D72, #FF5910); }
    &.label--nYYankees { .m-labelVariation(white, #003087, #E4002B); }
    &.label--oAthletics { .m-labelVariation(#EFB21E, #003831, #EFB21E); }
    &.label--pPhillies { .m-labelVariation(white, #284898, #E81828); }
    &.label--pPirates { .m-labelVariation(#FDB827, black, #FDB827); }
    &.label--sDPadres { .m-labelVariation(#FEC325, #002D62, #A0AAB2); }
    &.label--sFGiants { .m-labelVariation(#8B6F4E, black, #FD5A1E); }
    &.label--sMariners { .m-labelVariation(#C4CED4, #0C2C56, #005C5C); }
    &.label--sLCardinals { .m-labelVariation(#FEDB00, #C41E3A, #000066); }
    &.label--tBRays { color: .m-labelVariation(#8FBCE6, #092C5C, #F3D130); }
    &.label--tRangers { .m-labelVariation(white, #C0111F, #003278); }
    &.label--tJays { .m-labelVariation(#E8291C, #134A8E, #1D2D5C); }
    &.label--wNationals { .m-labelVariation(white, #AB0003, #11225B); }
}

Theoretically, this should be all I need for the labels/prefixes to function properly, correct? Yet, when adding this to extra.less I still see no changes to the prefixes, just unstylized boxes with text. Have I done something wrong or missed something here?

Thanks again for the help, it is greatly appreciated!

 

[Chris D]

What do you have set as the custom class for the prefixes?

 

[Static-Xbox]

What do you have set as the custom class for the prefixes?

Here's an example of the Toronto Maple Leafs (I just used the same format as the standard ones, such as label label--orange, assuming that would work):

 

[Chris D]

That looks correct so I'm not sure what would be causing them to display wrong on the front end. I'd suggest checking the obvious things first, e.g. making sure you've edited extra.less in the correct file etc.

 

[Static-Xbox]

Yep, I went through and verified I was editing the default style's extra.less template, so I'm a bit stumped as to why they're not displaying.

 

[Static-Xbox]

As a follow-up to this, I am now receiving the following error when logging into the AdminCP:

Server error log

[LIST]
[*]Less_Exception_Chunk: ParseError: Unexpected input in anonymous-file-0.less on line 1513, column 2 1511| &.label--sMariners { .m-labelVariation(#C4CED4, #0C2C56, #005C5C); } 1512| &.label--sLCardinals { .m-labelVariation(#FEDB00, #C41E3A, #000066); } 1513| &.label--tBRays { color: .m-labelVariation(#8FBCE6, #092C5C, #F3D130); } 1514| &.label--tRangers { .m-labelVariation(white, #C0111F, #003278); } 1515| &.label--tJays { .m-labelVariation(#E8291C, #134A8E, #1D2D5C); } 1516| &.label--wNationals { .m-labelVariation(white, #AB0003, #11225B); }
[*]src/vendor/oyejorge/less.php/lib/Less/Parser.php:677
[*]Generated by: Unknown account
[*]Sep 13, 2017 at 5:30 PM
[/LIST]
Stack trace
#0 /home/actavern/public_html/testxf/src/vendor/oyejorge/less.php/lib/Less/Parser.php(621): Less_Parser->GetRules(NULL) #1 /home/actavern/public_html/testxf/src/vendor/oyejorge/less.php/lib/Less/Parser.php(449): Less_Parser->_parse() #2 /home/actavern/public_html/testxf/src/XF/CssRenderer.php(273): Less_Parser->parse('// Note that th...') #3 /home/actavern/public_html/testxf/src/XF/CssRenderer.php(254): XF\CssRenderer->renderToCss('public:extra.le...', '.label {\n\t\n\t&.l...') #4 /home/actavern/public_html/testxf/src/XF/CssRenderer.php(202): XF\CssRenderer->renderTemplate('public:extra.le...', NULL) #5 /home/actavern/public_html/testxf/src/XF/CssRenderer.php(82): XF\CssRenderer->renderTemplates(Array, Array, Array) #6 /home/actavern/public_html/testxf/src/XF/CssWriter.php(37): XF\CssRenderer->render(Array) #7 /home/actavern/public_html/testxf/css.php(29): XF\CssWriter->run(Array, 1, 1) #8 {main} Request state
array(4) {  ["url"] => string(146) "/testxf/css.php?css=public%3Anode_list.less%2Cpublic%3Aprefix_menu.less%2Cpublic%3Astructured_list.less%2Cpublic%3Aextra.less&s=1&l=1&d=1505264038"  ["referrer"] => string(65) "http://platinumsportslounge.com/testxf/index.php?forums/hockey.9/"  ["_GET"] => array(4) {    ["css"] => string(91) "public:node_list.less,public:prefix_menu.less,public:structured_list.less,public:extra.less"    ["s"] => string(1) "1"    ["l"] => string(1) "1"    ["d"] => string(10) "1505264038"  }  ["_POST"] => array(0) {  } }

This error is now consistently popping up in the AdminCP with every action on the site. I've commented the code out of extra.less and the errors have stopped.

 

[Static-Xbox]

My apologies for bumping this, but I was wondering if there was any further insight as to what might be causing this?

 

[Chris D]

Really not sure.

All code provided should work so there must be some other issue.

 

[Static-Xbox]

Is it possibly a conflict with another 1.x add-on? I realized that when I upgraded the test board to 2.0b2 I forgot to disable this add-on: https://xenforo.com/community/resources/prefix-forum-listing.80/

While I don't believe this particular add-on would cause conflicts with the prefixes/labels themselves, I'm grasping at straws to try to find a legitimate solution...

 

[Chris D]

There would be no conflicts possible with a legacy add on.

The problem is going to be within your code somewhere. The code provided works and similar code has worked for other people.

You're just going to have to start again and slowly re-add the code until it stops working and go from there.

If you can provide a simpler reproduction case after that I'll test it again locally.

 

[Static-Xbox]

EDIT -- Sorry, I think I see what the issue is...for some reason, I couldn't spot it before, the hex code is incorrect!

Yep, that was it, a couple of incorrect hex codes.

Thank you once again for your patience and guidance on this, Chris, it's been greatly appreciated and I'm ecstatic to have it figured out

Spoiler: Disregard this

Hi Chris,

I went through and commented out all of the labels, then added them in one by one from the list below. All of them worked until I got to Washington, which is why the comment tag is still in place below that. So apparently there's an issue with the Washington label, but the code looks correct to me. Could it be an issue with having so many custom labels? I wouldn't have thought so, but you said yourself the first time that the code looked correct, and that I'm calling the custom label correctly, so as before, I'm essentially grasping at straws.

Here's the code that shows where I stopped:

Spoiler: Adding in a spoiler tag, as it's quite long

.label {
  
    &.label--montreal   { .m-labelVariation(white, #BF2F38, #213770); }
    &.label--detroit   { .m-labelVariation(white, #EC1F26, white); }
    &.label--boston   { .m-labelVariation(#FFC422, black, #FFC422); }
    &.label--tampa   { .m-labelVariation(#C0C0C0, #013E7D, black); }
    &.label--florida   { .m-labelVariation(#D59C05, #C8213F, #002E5F); }
    &.label--buffalo  { .m-labelVariation(#FDBB2F, #002E62, #FDBB2F); }
    &.label--rangers  { .m-labelVariation(white, #0161AB, #E6393F); }
    &.label--islanders  { .m-labelVariation(#F57D31, #00529B, #F57D31); }
    &.label--pittsburgh  { .m-labelVariation(#ffcc33, black, #ffcc33); }
    &.label--philly  { .m-labelVariation(white, #F47940, black); }
    &.label--washington { .m-labelVariation(white, #CF1323B, #002148); }
    /*&.label--devils { .m-labelVariation(white, #E03A3E, white); }
    &.label--hurricanes { .m-labelVariation(white, #E03A3E, black); }
    &.label--jackets { .m-labelVariation(white, #00285C, #E03A3E); }
    &.label--canucks { .m-labelVariation(white, #07346F, #047A4A); }
    &.label--flames { .m-labelVariation(#FFC758, #E03A3E, black); }
    &.label--oilers { .m-labelVariation(white, #003777, #E66A20); }
    &.label--kings { .m-labelVariation(#AFB7BA, black, #AFB7BA); }
    &.label--san { .m-labelVariation(#F38F20, #05535D, #F38F20); }
    &.label--ducks { .m-labelVariation(#EF5225, black, #91764B); }
    &.label--arizona { .m-labelVariation(#EFE1C6, #841F27, #EFE1C6); }
    &.label--chicago { .m-labelVariation(white, #E3263A, black); }
    &.label--blues { .m-labelVariation(#FFC325, #0546A0, #FFC325); }
    &.label--pred { .m-labelVariation(#002E62, #FDBB2F, #002E62); }
    &.label--stars { .m-labelVariation(white, #006A4E, #C0C0C0); }
    &.label--colo { .m-labelVariation(white, #8B2942, #01548A); }
    &.label--jets { .m-labelVariation(white, #002E62, #0168AB); }
    &.label--wild { .m-labelVariation(#EEE3C7, #025736, #BF2B37); }
    &.label--sens { .m-labelVariation(#D69F0F, #E4173E, black); }
    &.label--leafs { .m-labelVariation(white, #003777, white); }
    &.label--vegas { .m-labelVariation(#87704E, #27241F, #87704E); }
    &.label--bolton { .m-labelVariation(#C0C0C0, #1D3C71, #BF2B37); }
    &.label--aDBacks { .m-labelVariation(#E3D4AD, #A71930, #E3D4AD); }
    &.label--aBraves { .m-labelVariation(#13274F, #CE1141, #13274F); }
    &.label--bOrioles { .m-labelVariation(white, black, #DF4601); }
    &.label--bRedSox { .m-labelVariation(white, #0D2B56, #BD3039); }
    &.label--cCubs { .m-labelVariation(white, #0E3386, #CC3433); }
    &.label--cWhiteSox { .m-labelVariation(#C4CED4, black, #C4CED4); }
    &.label--cReds { .m-labelVariation(white, #C6011F, black); }
    &.label--cIndians { .m-labelVariation(#E31937, #002B53, #E31937); }
    &.label--cRockies { .m-labelVariation(#C4CED4, #333366, #231F20); }
    &.label--dTigers { .m-labelVariation(white, #0C2C56, white); }
    &.label--hAstros { .m-labelVariation(white, #002D62, #EB6E1F); }
    &.label--kCRoyals { .m-labelVariation(white, #004687, #C09A5B); }
    &.label--lAAngels { .m-labelVariation(white, #BA0021, #003263); }
    &.label--lADodgers { .m-labelVariation(white, #005A9C, #EF3E42); }
    &.label--mMarlins { .m-labelVariation(#0077C8, #FF6600, #FFD100); }
    &.label--mBrewers { .m-labelVariation(#B6922E, #0A2351, #B6922E); }
    &.label--mTwins { .m-labelVariation(white, #002B5C, #D31145); }
    &.label--nYMets { .m-labelVariation(#FF5910, #002D72, #FF5910); }
    &.label--nYYankees { .m-labelVariation(white, #003087, #E4002B); }
    &.label--oAthletics { .m-labelVariation(#EFB21E, #003831, #EFB21E); }
    &.label--pPhillies { .m-labelVariation(white, #284898, #E81828); }
    &.label--pPirates { .m-labelVariation(#FDB827, black, #FDB827); }
    &.label--sDPadres { .m-labelVariation(#FEC325, #002D62, #A0AAB2); }
    &.label--sFGiants { .m-labelVariation(#8B6F4E, black, #FD5A1E); }
    &.label--sMariners { .m-labelVariation(#C4CED4, #0C2C56, #005C5C); }
    &.label--sLCardinals { .m-labelVariation(#FEDB00, #C41E3A, #000066); }
    &.label--tBRays { color: .m-labelVariation(#8FBCE6, #092C5C, #F3D130); }
    &.label--tRangers { .m-labelVariation(white, #C0111F, #003278); }
    &.label--tJays { .m-labelVariation(#E8291C, #134A8E, #1D2D5C); }
    &.label--wNationals { .m-labelVariation(white, #AB0003, #11225B); }*/
}