How to Add Custom CSS | Js In Magento 2
by phxmaster
Here, in Magento2 file structure is like following ,
Following steps are used to add custom css in your theme.
Step 1 : Create theme:http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/themes/theme-create.html
Step 2 : Add css file in web folder
- Location of web folder in magento2 .
app / design / frontend / [vendor] / [theme] / web / css / custom.css
app / design / frontend / [vendor] / [theme] / web / css / custom-l.css
Step 3 : Call your css file in default_head_blocks.xml
- Location of default_head_blocks.xml is below.
app / design / frontend / [vendor] / [theme] / Magento_Theme / layout / default_head_blocks.xml
in your default_head_blocks.xml files add your css like below.
<?xml version="1.0"?>
<!--
/**
* Copyright © 2015 Magento. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<css src="css/custom.css" media="all" />
<css src="css/custom-l.css" media="all" />
</head>
</page>
Step 4 : Deploy static resources & cache flush (SSH to magento root)
php bin/magento setup:static-content:deploy php bin/magento indexer:reindex php bin/magento cache:flush
Following steps are used to add custom js in your theme.
Step 1 : Create theme:http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/themes/theme-create.html
Step 2 : Add js file file in web folder
- Location of web folder in magento2 .
app / design / frontend / [vendor] / [theme] / web / js/ custom.js
Step 3 : Call your js file in default_head_blocks.xml
- Location of default_head_blocks.xml is below.
app / design / frontend / [vendor] / [theme] / Magento_Theme / layout / default_head_blocks.xml
in your default_head_blocks.xml files add your js like below.
<?xml version="1.0"?>
<!--
/**
* Copyright © 2015 Magento. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<script src="js/custom.js" />
</head>
</page>
Step 4 : Deploy static resources & cache flush (SSH to magento root)
php bin/magento setup:static-content:deploy php bin/magento indexer:reindex php bin/magento cache:flush
Note : Make sure that you set your Magento application to the developer mode.
Recommended Posts
How to setup multiple store in magento2 ?
September 11, 2020
How To Create Simple Module in Magento 2 ?
September 11, 2020
How To Use Magento 2 Command?
September 11, 2020