Skip to main content
Magento

Return to Question

added 1 character in body
Source Link
Rajeev K Tomy
Rajeev K Tomy
  • 17.3k
  • 6
  • 63
  • 103

I am using below code to include my custom CSS file in home page only:

File: app/design/frontend/[Package]/[Theme]/Magento_Theme/layout/cms_index_index.xml

<?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="Magento_Theme::css/home/slider.css" />
    </head>
</page>

This includes the css/home/slider.css file in the HTML but which loads before style-l.css and after style-m files included by Magento. I need my CSS file to be included after the style-m.css and style-l.css` and style-l.css loaded by Magento.

Magento loads its style CSS files via default_head_blockdefault_head_blocks.xml which I believe if I use in my case, it will load my custom CSS style in every page which I don't want at all.

So how can achieve the desired behavior via layout updates?

EDIT

As Kishan's answer points out, adding media="all" did the trick. But I would like to know how that magic happens.

I am using below code to include my custom CSS file in home page only:

File: app/design/frontend/[Package]/[Theme]/Magento_Theme/layout/cms_index_index.xml

<?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="Magento_Theme::css/home/slider.css" />
    </head>
</page>

This includes the css/home/slider.css file in the HTML but which loads before style-l.css and after style-m files included by Magento. I need my CSS file to be included after the style-m.css and style-l.css` loaded by Magento.

Magento loads its style CSS files via default_head_block.xml which I believe if I use in my case, it will load my custom CSS style in every page which I don't want at all.

So how can achieve the desired behavior via layout updates?

EDIT

As Kishan's answer points out, adding media="all" did the trick. But I would like to know how that magic happens.

I am using below code to include my custom CSS file in home page only:

File: app/design/frontend/[Package]/[Theme]/Magento_Theme/layout/cms_index_index.xml

<?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="Magento_Theme::css/home/slider.css" />
    </head>
</page>

This includes the css/home/slider.css file in the HTML but which loads before style-l.css and after style-m files included by Magento. I need my CSS file to be included after the style-m.css and style-l.css loaded by Magento.

Magento loads its style CSS files via default_head_blocks.xml which I believe if I use in my case, it will load my custom CSS style in every page which I don't want at all.

So how can achieve the desired behavior via layout updates?

EDIT

As Kishan's answer points out, adding media="all" did the trick. But I would like to know how that magic happens.

added 133 characters in body
Source Link
Rajeev K Tomy
Rajeev K Tomy
  • 17.3k
  • 6
  • 63
  • 103

I am using below code to include my custom CSS file in home page only:

File: app/design/frontend/[Package]/[Theme]/Magento_Theme/layout/cms_index_index.xml

<?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="Magento_Theme::css/home/slider.css" />
    </head>
</page>

This includes the css/home/slider.css file in the HTML but which loads before style-l.css and after style-m files included by Magento. I need my CSS file to be included after the style-m.css and style-l.css` loaded by Magento.

Magento loads its style CSS files via default_head_block.xml which I believe if I use in my case, it will load my custom CSS style in every page which I don't want at all.

So how can achieve the desired behavior via layout updates?

EDIT

As Kishan's answer points out, adding media="all" did the trick. But I would like to know how that magic happens.

I am using below code to include my custom CSS file in home page only:

File: app/design/frontend/[Package]/[Theme]/Magento_Theme/layout/cms_index_index.xml

<?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="Magento_Theme::css/home/slider.css" />
    </head>
</page>

This includes the css/home/slider.css file in the HTML but which loads before style-l.css and after style-m files included by Magento. I need my CSS file to be included after the style-m.css and style-l.css` loaded by Magento.

Magento loads its style CSS files via default_head_block.xml which I believe if I use in my case, it will load my custom CSS style in every page which I don't want at all.

So how can achieve the desired behavior via layout updates?

I am using below code to include my custom CSS file in home page only:

File: app/design/frontend/[Package]/[Theme]/Magento_Theme/layout/cms_index_index.xml

<?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="Magento_Theme::css/home/slider.css" />
    </head>
</page>

This includes the css/home/slider.css file in the HTML but which loads before style-l.css and after style-m files included by Magento. I need my CSS file to be included after the style-m.css and style-l.css` loaded by Magento.

Magento loads its style CSS files via default_head_block.xml which I believe if I use in my case, it will load my custom CSS style in every page which I don't want at all.

So how can achieve the desired behavior via layout updates?

EDIT

As Kishan's answer points out, adding media="all" did the trick. But I would like to know how that magic happens.

Source Link
Rajeev K Tomy
Rajeev K Tomy
  • 17.3k
  • 6
  • 63
  • 103

Load Custom CSS After style-l.css For Home Page

I am using below code to include my custom CSS file in home page only:

File: app/design/frontend/[Package]/[Theme]/Magento_Theme/layout/cms_index_index.xml

<?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="Magento_Theme::css/home/slider.css" />
    </head>
</page>

This includes the css/home/slider.css file in the HTML but which loads before style-l.css and after style-m files included by Magento. I need my CSS file to be included after the style-m.css and style-l.css` loaded by Magento.

Magento loads its style CSS files via default_head_block.xml which I believe if I use in my case, it will load my custom CSS style in every page which I don't want at all.

So how can achieve the desired behavior via layout updates?