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.
Best Answer
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
File: /app/code/ABC/Theme/etc/di.xml
File: /app/code/ABC/Theme/etc/module.xml
If you installed sample data, then change the code to this:
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
File: /app/design/adminhtml/ABC/backend/theme.xml
File: /app/design/adminhtml/ABC/backend/Magento_Theme/layout/default.xml
File: /app/design/adminhtml/ABC/backend/web/css/custom.css
3. Do a
magento setup:static-content:deploy
and your changes should be reflected once you reload an admin page.