I need to add CSS file for Admin side in my custom module. How can I add this for Admin (back-end) only ?
asked Sep 21, 2016 at 11:27
-
regarding Krishna ijjada's answer: I also needed to add registration.php And im not sure if module.xml is required also.– Marvin HolzerSep 3, 2020 at 14:59
Add a comment
|
4 Answers
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>
- 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
answered Sep 21, 2016 at 11:29
-
1Hello, I am trying to add
<css src="Magento_Catalog::catalog/category-selector.css"/>in my custom module, but it is showing 404 error in console. Jul 12, 2017 at 12:34 -
in this example, Vendor_Module is the applied theme name only or we can take out new module also ? @Krishna ijjada Nov 5, 2018 at 6:17
-
I just need to add one css file and somehow the css is not being added when I see in browser. I need no css except the required one so I am removing the
css/styles.css, and doing<referenceContainer name="header" remove="true" /> <referenceContainer name="menu" remove="true" /> <referenceContainer name="logo" remove="true" /> <referenceContainer name="header.container" remove="true" /> <referenceContainer name="footer" remove="true" />. Any idea what am I missing...?– MSQJan 21, 2021 at 12:53
Magento 2 uses less file so you can also use less type as follows below step.
Create new file at Vendor/Module/view/adminhtml/web/css/source/_module.less
after that run below command from root directory and check
rm -rf var/view_preprocessed/
rm -rf pub/static/adminhtml
php bin/magento setup:static-content:deploy
answered Sep 21, 2016 at 13:23
-
I need to add .less file to use less variables like @icon-help__content; I want this less file to be loaded after the other files are loaded what is the proper way to do this. Oct 24, 2017 at 11:30
-
3
-
am I the only for who neither this and the marked answer post doesn't work ? :) Sep 29, 2022 at 7:36
The accepted answer can still be improved. With default.xml you will add the file to * every * admin page. This may not be the desired behavior.
Use appropriate controller handle:
view/adminhtml/layout/your_controller_path.xml
System configuration handle:
view/adminhtml/layout/adminhtml_system_config_edit.xml
TO ADD CUSTOM CSS OR JS IN ADMIN
Step 1: Create a module for example Vendor/Module
Step 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"/>
<script src="Vendor_Module::js/test.js"/>
</head>
</page>
Step 3: Add .css file and add js file in web folder as below path
view/adminhtml/web/css/test.css
view/adminhtml/web/js/test.js
