Magento 2 Adminhtml – How to Add Custom CSS

adminhtmlcssmagento2

I need to add CSS file for Admin side in my custom module. How can I add this for Admin (back-end) only ?

Best Answer

1 Create a module for example Vendor/Module, this _means a fully working module, including registration.php file etc.

2 Create a new file view/adminhtml/layout/default.xml in the module:

    <?xml version="1.0"?>
    <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="admin-1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
       <head>
         <css src="Vendor_Module::css/test.css"/>
       </head>
    </page>
  1. Add .css file in web folder as below path:

view/adminhtml/web/css/test.css

Run below commands and check.

php bin/magento cache:clean
php bin/magento setup:static-content:deploy

Optional - check css load order:

Note: css file load order might mean that your styles do not take effect, as styles.css gets loaded after these files.

This only works ~Magento 2.3 (tested on Magento 2.3.5).

For example: adding order to 999, ensuring that it _should be one of the last media=all items:

<css src="Vendor_Module::css/test.css order="999" />

For additional information (for instance for older versions) on ordering: See this question

Related Topic