Better extra.less

[Kirby]

When admins add custom CSS, they often do this via extra.less.

This is easy and convenient (everything is in one place and not scattered over dozens of templates and there are no outdated templates / merge conflicts on upgrades) - but it is not efficient if a lot of CSS is added as all rules are loaded on every page even if they are only needed on specific pages.

Wouldn't it be great if we could add CSS like https://xenforo.com/community/resources/cxf-change-default-fa-node-icon.7491/ for node icons in extra.less but only have this loaded when it is really required?

This could be achieved by adding a macro to extra.less

<xf:macro name="node_list">
// CSS for node icons here
</xf:macro>

As it is right now, such a macro would not do anything - but if this macro was called at the end of node_list.less this would work just fine and allow us to

• Have custom CSS in one place
• Avoid trouble with outdated templates / merge conflicts on upgrades
• Have custom CSS only loaded when it is required

So my suggestion is to add implicit, non-erroring macro calls into extra.less at the end of every less template (except extra.less ).

 

[Wildcat Media]

Or even if there was a separate LESS file, like extra_macros.less, that would help also, and might be a little less confusing as we'd keep the macros separate. I'd have no issues having one extra LESS template to maintain.

Great idea! I often add a lot of CSS to extra.less either through direct entry or template edits, and I do get concerned with the amount of unnecessary CSS I'm sending to visitors.

 

[Kirby]

Yeah, could also be extra_macros.less but the idea was to keep it simple - > everything custom goes into exactly one place (extra.less).

Having an extra template for macros IMHO just complicates things ("Did I add that CSS as a macro in extra_maros.less or directly to extra.less? I don't remember -> Check both").

 

[Joe Link]

Great idea @Kirby.

Obviously a core implementation would be best (so I'm not trying to besmirch this suggestion by asking); is there anything stopping us from doing this right now? We're already editing all our individual .less files (e.g. node_list.less), so adding the macro to the bottom is trivial, and it would be nice to have all our customizations in one place.

 

[Kirby]

Is there anything stopping us from doing this right now?

Doing this without core support is doable but a bit tricky.

There are basically two issues:

1. It is currently not possible (without a workaround) to call a non-existing macro without triggering a warning (that would be logged in XenForo error log)
2. It would be necessary to add such a macro call to the end of every .less template. This could be achieved easily via a code event listener - but code event listeners do not run when upgrading XenForo. There are a few workarounds here is well (using automatuically created template modifications for every .less-Template for example or forcing a code event listener to be run for Upgrade as well via config.php edit

I might implement this as an Add-on when I got enough spare time ... but spare time is somewhat rare.

 

[Joe Link]

Doing this without core support is doable but a bit tricky.

There are basically two issues:

1. It is currently not possible (without a workaround) to call a non-existing macro without triggering a warning (that would be logged in XenForo error log)
2. It would be necessary to add such a macro call to the end of every .less template. This could be achieved easily via a code event listener - but code event listeners do not run when upgrading XenForo. There are a few workarounds here is well (using automatuically created template modifications for every .less-Template for example or forcing a code event listener to be run for Upgrade as well via config.php edit

I might implement this as an Add-on when I got enough spare time ... but spare time is somewhat rare.

Good info, thanks!