I have used Magento 2 with luma Theme. I have custom design for theme. I want to add one custom.css file in site.
Add a comment
|
3 Answers
Create <your-theme-directory>/Magento_Theme/layout/default_head_blocks.xml
Add the following:
<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/your-css-file.css" />
</head>
</page>
See the dev docs for more info - https://devdocs.magento.com/guides/v2.2/frontend-dev-guide/css-topics/css-themes.html
Go to your layout file in
magento/theme_forntend_luma/Magento_Theme/layout/default.xml
and add your css file in head section like
<?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/custom.css"/>
</head>
</page>
Then run
php bin/magento setup:static-content:deploy
command to deploy all the static content.
NOTE: Default.xml is used only when you want to apply your css changes in all the theme.
-
Hi, what is the path of css/custom.css? I tried putting it in vendor/magento/theme-frontend-luma/Magento_Theme/web/css but it didn't workRobert Sinclair– Robert Sinclair2019-10-14 19:11:38 +00:00Commented Oct 14, 2019 at 19:11
-
for that you have to create child theme on the same dir.sudo55– sudo552019-10-15 09:22:43 +00:00Commented Oct 15, 2019 at 9:22
First create your css file for ex. custom.css
put this css at below path
app/design/frontend/Magento/Luma/web/css
After that specify the path of your css in below file:
app/design/frontend/Magento/Luma/Magento_Theme/layout/default_head_blocks.xml
add following in this file:
<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"/>
</head>
</page>
