Add Custom CSS and JS File in Admin Panel – Magento 2 Guide

admincssjavascriptmagento2

How can add CSS and JS File in admin panel of specific page.too many pages in admin panel e.g product,sales->order ,order view ,invoice,ship etc . . .

I want to load 1 CSS or JS file in New Invoice page.

Or other solution will be work for me if add CSS or JS code in .phtml file?

how can add this ?

Best Answer

1 Create a module for example Vendor/Module

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>

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

Run below commands and check.

php bin/magento cache:clean

php bin/magento setup:static-content:deploy

Related Solutions

Magento 1 – Load jQuery in Admin Panel Programmatically

You can access the layout programmatically via the getLayout method. Your block class would look something like this

class [Namespace]_[Module]_Block_[Blockname]
{
   public function _prepareLayout() 
   {
      $head = $this->getLayout()->getBlock('head');
      $head->addJs('js/jquery.latest.js');

      return parent::_prepareLayout();
   }

   [...]
}

Magento – Remove Css and js from new custom page_layout from header and body Magento 2

Adding new CSS

<theme-dir>/blank/layout/default_head_blocks.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>
        <css src="css/newtheme.css" />
    </head>
</page>

Remove static resources (JavaScript, CSS, fonts) To remove the static resources, linked in a page , make a change similar to the following in a theme extending file app/design/frontend///Magento_Theme/layout/default_head_blocks.xml

<head>
    <!-- Remove local resources -->
    <remove src="css/styles-m.css" />
    <remove src="my-js.js"/>
    <remove src="Magento_Catalog::js/compare.js" />

<!-- Remove external resources -->
    <remove src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"/>
    <remove src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"/>
    <remove src="http://fonts.googleapis.com/css?family=Montserrat" />

http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/layouts/xml-manage.html#layout_markup_css_remove

Best Answer

Related Solutions

Magento 1 – Load jQuery in Admin Panel Programmatically

Magento – Remove Css and js from new custom page_layout from header and body Magento 2

Related Topic