7

I have followed the instructions here: How to create admin theme for Magento2

and here: How to change backend admin theme in Magento 2.0.7 +

and I still dont understand what I'm supposed to do to get my theme to show up in the backend. I have created my theme in app/design/adminhtml/Vendor/themename and its got a theme.xml and a registration.php (same as my frontend theme, which is working nicely). However, the above instructions talk about about a etc/di.xml which I have no idea where to place (or is that even the solution?)

Googling has got me absolutely nowhere, Magento 2 official docs suck (as always) so no help there.

So, summa summarum: how to enable my custom admin theme?

10

Thank you @Alex! Your solution worked for me! I can see from the source that admin area is using my theme now.

Steps:

  1. create a new theme in app/design/adminhtml/Vendor/Themename. In that directory, create a theme.xml:

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd"> <title>My Theme Tile</title> <parent>Magento/backend</parent> </theme>

And a registration.php:

<?php \Magento\Framework\Component\ComponentRegistrar::register( \Magento\Framework\Component\ComponentRegistrar::THEME, 'adminhtml/Vendor/Themename', __DIR__ );

  1. Either create new module for deploying your theme, or use some existing module; either way, in your modules module.xml add the sequence xml element to make sure your theme gets loaded last.

<config> <module name="My_Custommodule" setup_version="2.0.0"> <sequence> <module name="Magento_Theme"/> </sequence> </module> </config>

and in your custom modules etc/di.xml add the fragment that specifies the admin theme to use: <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd"> <type name="Magento\Theme\Model\View\Design"> <arguments> <argument name="themes" xsi:type="array"> <item name="adminhtml" xsi:type="string">Vendor/Themename</item> </argument> </arguments> </type> </config>

  1. run setup:upgrade and voila! Check what theme is being used by viewing source: all css and js files should now be loaded from /pub/static/adminhtml/Vendor/Themename/[language]/....

However, all admin pages seems to be missing styles. I am in developer mode, and did a setup:static-content:deploy [languages] (with no errors) but that did not resolve the issue. I have had this same issue on the frontend as well, but cant remember how I fixed it.. do I need to copy js and css files from magento-backend module to make this work?

ISSUE RESOLVED: it appears I have run into this issue: Correct way to Update a Theme's Parent in Magento 2 where if I install my theme and then change the parent to something else in theme.xml, it will no be updated in the database and it wont take effect. I had initially put Magento/blank in the parent-element, and that obviously did not work at all, and changing it to Magento/backend later did not help either (as per the link above). So I went in the database and set the parent_id for my theme by hand. And just like that, everything works :)

  • I can see (comparing to another installation with the default admin theme) that /pub/static/adminhtml/Magento/backend/[language]/css/styles.css is not referenced in the source. Looking at vendor/magento/magento-backend/view and the layout files, it's not referenced there either. Apparently, it's specified in vendor/magento/theme-adminhtml-backend/Magento_Backend/layout/default.xml but how do I get it to show up in my theme as well? – Kampaviineri Jul 8 '16 at 11:16
  • Does you theme inherit from from Magento Backend or no? – Alex Jul 8 '16 at 12:49
  • @Alex yes it does, as you can see in my theme.xml above, and now I have it ALMOST working: I created a app/design/adminhtml/Vendor/Themename/Magento_Theme/layout/default.xml and in that file I specified <css src="css/styles.css" /> Then I copied the css-file over to my theme from vendor/magento/theme-adminhtml-backend/web/css/styles.css and now I can see it in the source and things are looking better. However, something crucial still appears to be missing, backend now has styles but layout is all screwed. – Kampaviineri Jul 8 '16 at 13:11
  • Can we have sample Admin theme Link on GitHub? – Ankit Shah Dec 2 '16 at 1:49
2

To apply the Admin theme, you need to create a new module and specify it there:

  1. Make sure you are in developer mode.
  2. Create a separate MyVendor_MyBackendTheme module. (similar to https://github.com/magento/magento2-samples/tree/master/sample-module-minimal for example, but do not forget to edit the module.xml and registration.php if you decide to use it). In module.xml specify that the Magento_Theme module loads before you module by adding:
    <module name="MyVendor_MyBackendTheme" setup_version="2.0.1">
        <sequence>
            <module name="Magento_Theme"/>
        </sequence>
    </module>
  1. Add the <module>/etc/di.xml, where add the following node:
<type name="Magento\Theme\Model\View\Design">
    <arguments>
         <argument name="themes" xsi:type="array">
             <item name="adminhtml" xsi:type="string">your_vendor_dir/your_theme_dir</item>
         </argument>
     </arguments> 
</type>
  1. Run the magento setup:upgrade command.

  2. Open the Admin and view the new theme applied (hopefully:)).

  • p.s.: we plan to add the official doc soon – Alex Jul 7 '16 at 16:09
  • So you mean I have to create a complete module (in addition to my theme) just to deploy my admin theme? What is this madness!? – Kampaviineri Jul 7 '16 at 19:17
  • i have another module I have created for this webstore, I assume I can use that to specify the admin theme. Will let you know how that pans out :) – Kampaviineri Jul 7 '16 at 19:25
  • Yes, of course you can use the existing custom module. – Alex Jul 8 '16 at 8:22
  • 1
    HI @Alex Thanks for explanation. Can we have sample Admin Theme on github? – Ankit Shah Dec 2 '16 at 1:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.