XF 2.2 Extra.less for Admin CP

[TheSkullKid]

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

 

[punisher1]

I also want to customize my admin panel. LFA.

 

[Jeremy P]

The public extra.less template is loaded on admin pages already.

 

[punisher1]

The public extra.less template is loaded on admin pages already.

lol. Even .p-header {background: #000 !important;} is not even working. How is it loaded on admin pages?

 

[TheSkullKid]

The public extra.less template is loaded on admin pages already.

Hmm but it looks like that the css code in that file will not be used by the ACP, inspected the page with developer tools of the browser and the class name will not be shown on the styles side

 

[Jeremy P]

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

 

[TheSkullKid]

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

Thanks for your help, but which extra.less you have modified. If you got multiple themes?
So far as I know none of the themes will touch the admin cp

 

[Jeremy P]

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.

 

[punisher1]

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.

 

[Jeremy P]

You shouldn't enable development mode on a production installation, and any changes to the master style will be reset every time you upgrade.

 

[punisher1]

You shouldn't enable development mode on a production installation, and any changes to the master style will be reset every time you upgrade.

After my work is done I've disabled it. And also my upgrade support is over a month ago.. So.. xD

 

[Jeremy P]

I would at the very least recommend saving the contents elsewhere should you ever decide to upgrade in the future.

 

[TheSkullKid]

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

 

[TheSkullKid]

Can I check if I'm in the ACP, to choose different behaviour?

 

[Jeremy P]

You can use a [data-app="admin"] selector.

[data-app="admin"] .p-title {
    // ...
}

Or use nesting for multiple rules:

[data-app="admin"] {
    .p-title {
        // ...
    }

    .p-breadcrumbs {
        // ...
    }
}

 

[TheSkullKid]

@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]

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:

<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.

 

[TheSkullKid]

Thanks for your answer this is how I already found/changed it myself and how I used it.
Thanks for the hint with the CSS cache refresh callback.

 

[CStrategies]

So, I successfully made an addon that modified extra.less (master style) to change CSS in the ACP. It works on my development site. But on the production site (where I have limited access to ACP), the master style is not listed in the styles tree, and my addon does not function (at least not for me). Is there a permission setting which can make the master style invisible to users in the ACP? Why else might my addon function on development but not on production, with nearly identical copies of XF on both?

 

[Jeremy P]

The master style only appears in development mode. You should be able to see whether the modification is being applied correctly on the template modifications pages.