0

After creating my custom storefront theme, I am now trying to modify the default magento admin logo with custom theme(the logo in the login admin portal and the Magento icon at the top left of the admin menu). Below are the steps followed.

Custom Theme Logo uploaded at

app/design/adminhtml/[VendorName]/[Themename]/web/images/logo.png

app/design/adminhtml/[VendorName]/[Themename]/registration.php

\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::THEME,
    'adminhtml/[VendorName]/[Themename]',
    __DIR__
);

app/design/adminhtml/[VendorName]/[Themename]/theme.xml

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

app/design/adminhtml/[VendorName]/[Themename]/Magento_Backend/layout/admin_login.xml

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="admin-login" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <update handle="styles" />
    <body>
        <referenceBlock name="logo">
            <arguments>
                <argument name="logo_image_src" xsi:type="string">images/logo.png</argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

app/design/adminhtml/[VendorName]/[Themename]/Magento_Backend/layout/default.xml

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="header">
            <referenceBlock name="logo">
                <arguments>
                    <argument name="logo_image_src" xsi:type="string">images/logo.png</argument>
                    <argument name="logo_img_width" xsi:type="string">auto</argument>
                    <argument name="logo_img_height" xsi:type="string">auto</argument>
                    <argument name="show_part" xsi:type="string">logo</argument>
                    <argument name="edition" translate="true" xsi:type="string">Community Edition</argument>
                </arguments>
            </referenceBlock>
        </referenceContainer>
    </body>
</page>

Create new custom module to apply Admin Theme

app/code/[VendorName]/[ModuleName]/registration.php

\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    '[VendorName]_[ModuleName]',
    __DIR__
);

app/code/[VendorName]/[ModuleName]/etc/module.xml

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="[VendorName]_[ModuleName]" setup_version="1.0.0">
        <sequence>
            <module name="Magento_Theme"/>
        </sequence>
    </module>
</config>

app/code/[VendorName]/[ModuleName]/etc/di.xml

<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">[VendorName]/[Themename]</item>
            </argument>
        </arguments>
    </type>
</config>

CLI Commands executed

php bin/magento setup:upgrade
php bin/magento setup:di:compile
php bin/magento cache:flush

New DB entry for backend theme and custom module is also seen in theme and setup_module table respectively.

How do I reflect admin theme changes ? Magento ver - 2.2.2

Improve this question
1
  • To modify custom admin logos using module, check here
    – shreyas d
    Commented May 26, 2023 at 10:50

1 Answer 1

Reset to default
0

Create new module to apply an admin theme:

  1. app/code/[VendorName]/[ModuleName]/registration.php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    '[VendorName]_[ModuleName]',
    __DIR__
);
  1. app/code/[VendorName]/[ModuleName]/etc/module.xml
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="[VendorName]_[ModuleName]" setup_version="1.0.0">
        <sequence>
            <module name="Magento_Theme"/>
        </sequence>
    </module>
</config>
  1. app/code/[VendorName]/[ModuleName]/etc/di.xml
<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">[VendorName]/[themename]</item>
            </argument>
        </arguments>
    </type>
</config>
Improve this answer
8
  • Does this mean apart from creating admin theme, one has to create module as well in order to reflect admin theme changes ?
    – Slimshadddyyy
    Commented Jan 4, 2018 at 5:28
  • @Vikram - Yes, new or existing module is require to apply an admin theme.
    – Pratik Oza
    Commented Jan 4, 2018 at 5:48
  • And what if I do not use custom admin theme and directly create custom module to add logo changes like its mentioned here - magento.stackexchange.com/questions/96945/… ? What is the difference in creating a custom admin theme and applying it using another custom/existing module OR directly creating custom/existing module to apply logo changes ? What could be the best approach and practice according to Magento standards ?
    – Slimshadddyyy
    Commented Jan 4, 2018 at 6:00
  • @Vikram - As per my suggestion, "creating a custom admin theme and applying it using another custom module" is a best practice. Because if you've more changes related to the admin theme, then it will easy to handle code-base as well as it will also be easy to manage static resources(CSS, JS, images, etc..). If you've only single change or creating extension then you can go with module. Both are proper way, you can select any as per your requirement.
    – Pratik Oza
    Commented Jan 4, 2018 at 7:15
  • I have edited my question and extended for using custom module to apply admin theme. But I still do not see those logo changes being reflected.
    – Slimshadddyyy
    Commented Jan 4, 2018 at 7:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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