XF 2.2 Extra.less for Admin CP

TheSkullKid

Active member
Hello everybody,

is there something similar to the public extra.less template for the admin control panel?
Where can I add CSS code for the admin control panel?

Thx
 
Solution
Ah that's actually my mistake, the control panel will always use the master style, which is not editable. You could still accomplish this by creating an add-on with a template modification that applies your desired changes to extra.less, but of course that's more cumbersome.

Jeremy P

XenForo developer
Staff member
Just tested and I can't reproduce that. The extra.less file is loaded as expected and any styles within are applied appropriately.
 

Jeremy P

XenForo developer
Staff member
Ah that's actually my mistake, the control panel will always use the master style, which is not editable. You could still accomplish this by creating an add-on with a template modification that applies your desired changes to extra.less, but of course that's more cumbersome.
 
Solution

makerz

Member
No you don't need an addon. And master style is editable. You need to open Development Mode and then you can find Master Style and its templates. I've already customized my admin panel.

1625385198277.png
 

TheSkullKid

Active member
Ah that's actually my mistake, the control panel will always use the master style, which is not editable. You could still accomplish this by creating an add-on with a template modification that applies your desired changes to extra.less, but of course that's more cumbersome.
that was the answer I need, i will test it right now.

Edit: Great it works, thx
 
Last edited:

TheSkullKid

Active member
@Jeremy P thanks for your help.
Please could you explain me why CSS will not be updated, if I use an option variable in the LESS code, it seems that I need to rebuild something to take place. Or is it not good to use option variables in that way?
 

Jeremy P

XenForo developer
Staff member
CSS is cached for performance reasons, so you shouldn't typically use options in that way. You can usually get away with dynamically applying classes in the template instead:

HTML:
<div class="{{ $xf.option.foo ? 'elm--class1' : 'elm--class2' }}">

Depending on your use case, it is possible to clear the CSS cache when an option is updated using the \XF\Option\Style::triggerStyleUpdate callback, but I would typically reserve that for when the above is not feasible.
 
Top