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
Top Most Useful CMS Tools For Creating Websites
September 12, 2024
How To Achieve Over 100% Speed Improvement In Magento 2
August 6, 2024
Magento 2 Backend Not Working How To Solved?
July 13, 2024
Nice weblog here! Additionally your site rather a lot up very fast!
What host are you the usage of? Can I am getting
your associate hyperlink for your host? I desire my web site loaded up as quickly as
yours lol
Amazing! This blog looks exactly like my old one!
It’s on a entirely different subject but it has pretty much the same layout and design. Excellent choice of colors!
My homepage; CBD for anxiety
Normally I don’t learn article on blogs, however I would
like to say that this write-up very forced me to check out and do it!
Your writing style has been amazed me. Thanks,
very great post.
Aw, this was an incredibly good post. Finding the time and
actual effort to generate a superb article… but what can I say… I put things off a whole lot and don’t
manage to get nearly anything done.
Magnificent goods from you, man. I’ve understand
your stuff previous to and you’re just too wonderful. I actually like what you have acquired here, really like
what you’re stating and the way in which you say it.
You make it enjoyable and you still care for to keep it
wise. I cant wait to read much more from you. This is actually a wonderful website.
Wow, this paragraph is fastidious, my yopunger sister is analyzing these inds of things,
therefore I am going to inform her.
php patterns
Hello, I enjoy reading all of your article. I like to write a little comment to support you.
php patterns
You can definitely see your expertise in the article you write.
The world hopes for more passionate writers like you who are not afraid to mention how they believe.
All the time follow your heart.