Make replaceable admin theme (with docs how to overwrite any part of it)

[sbonardt]

Let's focus on the main admin theme in place first, working to a nice and well designed backend for Bolt 4. After this is in place we can work on themable stuff

[JarJak]

@sbonardt but then it can be hard to make it decoupled, isn't it?

[sbonardt]

@JarJak I don't understand. Do you mean if the admin theme is not replaceable its hard to make it decoupled? How? We did leave the theming option in for now, but for the base styling of the backend we now work to a base look and feel. That can be overridden by a (default/custom) theme (css) but that file we now have left blank intentionally.

First get something in place that is usable, validates and looks nice. I belive we can enhance that i a simpler way to a themable solution than whats in place now. I'm happy to discuss and get shown otherwise if I'm missing something.

[JarJak]

@sbonardt because when you don't design your code first, it's hard to redesign it later. But if it will be possible to override only only css, but also js and twig, I'm fine with it. Also this task can be moved to, like, Bolt 4.1.

Customizing admin panel in Bolt 3 was a really painful thing.

[sbonardt]

@JarJak Ah, ok, now I understand you correctly. Yes, I can imagine and that's exactly the intention for V4: make the backend easier to style and code frontend wise and clean stuff up. That's why I picked up the rework issue and implemented start for a mobile first, responsive structure. For now that is just the structure, not the look and feel. I'm striving to first work to a clean, logical structural setup first with a well a good pproach for the code as well for maintainability but also for adopting or hooking into existing classes and styles, or subsequently overriding them.

I agree customising the admin panel was a painful thing, but then again I need to check with @bobdenotter to what extent we would like people to be able to adjust the backend design and look and feel in V4, and work from there.

[bobdenotter]

Bumping this to a later version. If there's a valid usecase, we can bump it higher on the priority list again.

[celtic34fr]

Hello everyone,

Using Bolt CMS 5 to build clients website, is it possible to customize the back-office theme? For any customer, when he wants to access the back-office, he would like to see his visual identity and not that of the tool used to create his website.

Why not set up a system similar to the theming of the public part of the website? Under the TWIG @admin namespace, could we not access the theme used for the back-office?

[rixbeck]

Hi @celtic34fr,

because bolt/core isn't a SF bundle we are losing some advantages of it, the bundle template override for example. Nevertheless you can make some tweaks to reach some sort of extending/overriding mechanism. In config/packages/twig.yaml you can add more bolt namespaced paths like this:

twig:
    debug: '%kernel.debug%'
    strict_variables: '%kernel.debug%'
    form_themes:
        - '@bolt/form/layout.html.twig'
        - '@bolt/form/fields.html.twig'
    paths:
        # Since the name of the theme folder is dynamic, we shouldn't set it here, but dynamically
        # See TwigAwareController::setTwigLoader()
        '%kernel.project_dir%/public/theme/%bolt.theme%': 'theme'
        '%kernel.project_dir%/public/theme/%bolt.theme%/bolt/': 'bolt'
        '%kernel.project_dir%/vendor/bolt/core/templates/': 'bolt'

Then you can put your own backend related twigs under your theme in the same order like they are under core. In a specific case you can make your own bolt\_base\layout.html.twig with pulling your own css or js stuff.

I think more complex tweaking cannot be reaching by this way atm - I mean extending vue components or referring your own encore entries other than defined in bolt/core's webpack.config.js - because they are isolated from your project and built independently. So you can refer those asset entries only with Encore like the example below, but not much more.

    {% block stylesheets %}
        {% set theme = 'theme-' ~ app.user.backendTheme|default('default') %}
        {{ encore_entry_link_tags('bolt') }}
        {{ encore_entry_link_tags(theme) }}
    {% endblock %}

[celtic34fr]

Hello @rixbeck ,

I just read your answer, I find it very interesting. I'm going to test it and write some documentation on the back-office theme change.

I think it would be useful to add this information in the global documentation of Bolt CMS 5 in a tips and tricks part to go further with the CMS.

I will come back to you in this issue to submit the results of my tests and documentation writing. Thank you again for your answer as clear, precise and technical which I already hope will help more than one.