I am using Hiddentechies Appreal free Theme for my Magento2 project. I want to add a custom CSS file and Js file (for jQuery) so that it will override the classes(CSS file) and add functionality (Js file) which I will include in those files. But I am not sure where to add those files. I have read that we should not touch the vendor folder. So where I should include my custom files. Any help would be appreciated. Thanks in Advance.
9
-
For javascript /app/design/frontend/{{themevendor}}/{{themename}}/web/js/ js.js and For css /app/design/frontend/{themevendor}}/{{themename}}//web/css/css.css– S.PMay 10, 2022 at 11:09
-
and after you should add it to body from layut. /app/design/frontend/{{vendor}}/{{themename}}/Magento_Theme/layout/default.xml file– S.PMay 10, 2022 at 11:10
-
Thanks @S.P, is it required to make changes in requirejs-config.js file? Thanks– user170106May 10, 2022 at 11:52
-
No for css you not need to add– S.PMay 10, 2022 at 11:55
-
But for Js, I need right?? Thanks @S.P– user170106May 10, 2022 at 12:37
|
Show 4 more comments
1 Answer
for add custom css to custom theme. you need to update default_head_blocks
You can get Reference from default magento blank theme.
vendor/magento/theme-frontend-blank/Magento_Theme/layout/default_head_blocks.xml
Add same way in your custom theme
vendor/{{magento}}/{{themename}}/Magento_Theme/layout/default_head_blocks.xml
and add style.css file in web folder
app/design/frontend/{{themevendor}}/{{themename}}/web/css/custom.css
For add custom js file.
There are many ways to add js in your theme.
By utilizing default_head_blocks.xml in app/design/frontend/{{theme-Vendor}}/{{theme-name}}/Magento_Theme/layout/:
Example Content:
<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/custom.css"/>
<script src="Magento_Catalog::js/sample1.js"/>
<link src="js/sample.js"/>
<css src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" src_type="url" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js" src_type="url" />
<link src="http://fonts.googleapis.com/css?family=Montserrat" src_type="url" />
</head>
</page>
With requirejs-config.js in themes root folder.
example:
var config = {
map: {
'*': {
'owlcarousel': 'js/owl.carousel.min'
}
}
};
The use js in your phtml file.
define([
"jquery",
"owlcarousel"
],
function($ , owl) {
"use strict";
$(document).ready(function($){
});
return;
});
for more details refernce
