1

Currently, I am using a custom theme and my parent theme is LUMA.

I need to add custom.css file which should be available in all pages.

How can I do it?

Improve this question
0

2 Answers 2

Reset to default
1

Firstly create Magento_Theme/layout folder in your custom theme if not created.

Then create default_head_blocks.xml file.

and put following content.

default_head_blocks.xml (By putting content in this file, It will be added to throughout the site)

<?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>

Add some style to your custom.css and flush cache then check.

You want to go for a page specific for e.g. for product detail page only then you've to edit Magento_Catalog/layout/catalog_product_view.xml

And add following content in it

<head>
   <css src="css/product-view.css"/>
</head>

It's recommended to use LESS file for styles.

You just need to create a LESS file and Magento will automatically compile it for you, If you are not in Production Mode and Cache is disabled.

Improve this answer
2
  • I have added <css src="css/my_style.css"/> code in default_head_blocks.xml of the main LUMA theme just for testing before making changes in main site. And then created my_style.css in vendor/magento/theme-frontend-Luma/Magento_theme/web/css/ Now i'm getting this error => Unable to resolve the source file for 'frontend/Magento/luma/en_US/css/my_style.css'
    – Mr.farhan
    Commented Jun 5, 2017 at 12:50
  • Changing directly in LUMA theme is not recommended. Please make changes in your custom theme only.
    – Kaushal Suthar
    Commented Jun 5, 2017 at 12:51
4

You can just create default.xml file inside app/design/frontend/{Packaname}/{themename}/Magento_Theme/layout/default.xml file.

<?xml version="1.0"?>
<page layout="3columns" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>    
        <css src="Magento_Theme::css/custom.css"/>      
    </head>
</page>

Set your custom.css file 

app/design/frontend/{Packaname}/{themename}/Magento_Theme/web/css/custom.css

Run php magento cache:clean command

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.