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?

PЯINCƎ
  • 11,669
  • 3
  • 25
  • 80
Mr.farhan
  • 172
  • 1
  • 11

2 Answers2

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

Rakesh Jesadiya
  • 42,221
  • 18
  • 132
  • 183
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.

Kaushal Suthar
  • 3,227
  • 5
  • 31
  • 57
  • I have added 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 Jun 05 '17 at 12:50
  • Changing directly in LUMA theme is not recommended. Please make changes in your custom theme only. – Kaushal Suthar Jun 05 '17 at 12:51