3

I would like to implement a CSS file that contains only the styles that I'd like to override for the default admin theme. For example, let's say I want to change the textarea font to Consolas and my overriding CSS file is called custom.css, then in this file I would have the following code:

textarea { font-family: Consolas, monospace; }

What is the best way to go about doing something like this in Magento 2?

I have looked into creating a new theme, but that seems to require you to copy over all the CSS files from the theme you're overriding, which I'd like to avoid since I just want to add a CSS file containing only the styles I'd like to override.

Improve this question

2 Answers 2

Reset to default
10

I eventually figured out how to do this through trial and error and inferring from various answers on here. Let's assume you're using Magento 2.0.x, your current theme is Luma, and your vendor name is "ABC"; here are the steps to override the admin theme:

1. To override the admin theme, you have to override the Theme module to specify that you're using a custom 'backend' theme. Create the files below (creating new directories as needed).

File: /app/code/ABC/Theme/registration.php

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'ABC_Theme',
    __DIR__
);

File: /app/code/ABC/Theme/etc/di.xml

<?xml version="1.0"?>
<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="frontend" xsi:type="string">Magento/luma</item><!-- or whatever theme you're currently using -->
        <item name="adminhtml" xsi:type="string">ABC/backend</item>
      </argument>
    </arguments>
  </type>
</config>

File: /app/code/ABC/Theme/etc/module.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
  <module name="ABC_Theme" setup_version="2.0.0">
    <sequence>
      <module name="Magento_Store"/>
    </sequence>
  </module>
</config>

If you installed sample data, then change the code to this:

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
  <module name="JP_Theme" setup_version="2.0.0">
    <sequence>
      <module name="Magento_Theme"/>
      <module name="Magento_Store"/>
      <module name="Magento_SampleData"/>
    </sequence>
  </module>
</config>

2. Add our custom admin (backend) theme. Create the files below to use a monospace font for textarea fields in Magento Admin.

File: /app/design/adminhtml/ABC/backend/registration.php

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

File: /app/design/adminhtml/ABC/backend/theme.xml

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
  <title>Admin</title><!-- your theme's name -->
  <parent>Magento/backend</parent><!-- the parent theme, in case your theme inherits from an existing theme -->
</theme>

File: /app/design/adminhtml/ABC/backend/Magento_Theme/layout/default.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <!-- Add adminhtml theme overrides -->
        <css src="css/custom.css"/>
    </head>
</page>

File: /app/design/adminhtml/ABC/backend/web/css/custom.css

textarea {
  font-family: Consolas, monospace;
}

3. Do a magento setup:static-content:deploy and your changes should be reflected once you reload an admin page.

Improve this answer
0

the inclusion of this file:

File: /app/design/adminhtml/ABC/backend/Magento_Theme/layout/default.xml

did not work for me and therefore seems wrong. (magento 2.4.3)

it seems the placement should be here:

File: app/code/ABC/backend/view/adminhtml/layout/default.xml

in addition, if you want your custom.css to load last and therefore override the base css, the css line needs to be:

<css src="css/prose.css" media="all" />
Improve this answer

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.