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_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.
magento2.2 css custom-theme
asked Mar 13 '18 at 10:41
Rajeev K TomyRajeev K Tomy
14.4k54585
add a comment |
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.
magento2.2 css custom-theme
asked Mar 13 '18 at 10:41
Rajeev K TomyRajeev K Tomy
14.4k54585
add a comment |
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.
magento2.2 css custom-theme
asked Mar 13 '18 at 10:41
Rajeev K TomyRajeev K Tomy
14.4k54585
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.
magento2.2 css custom-theme
magento2.2 css custom-theme
asked Mar 13 '18 at 10:41
Rajeev K TomyRajeev K Tomy
14.4k54585
asked Mar 13 '18 at 10:41
Rajeev K TomyRajeev K Tomy
14.4k54585
edited Mar 14 '18 at 5:40
Rajeev K Tomy
asked Mar 13 '18 at 10:41
Rajeev K TomyRajeev K Tomy
14.4k54585
asked Mar 13 '18 at 10:41
Rajeev K TomyRajeev K Tomy
14.4k54585
asked Mar 13 '18 at 10:41
Rajeev K TomyRajeev K Tomy
14.4k54585
14.4k54585
add a comment |
add a comment |
3 Answers
3
active
oldest
votes
Here is the short answer:
Magento load all css assets into asset groups. Asset groups are created based on the css properties and which is what stands crucial for the rendering order of css assets.
In Details
First of all, There are lot of things happens behind the scene. So in order to make this answer abbreviated as possible, I would love to consider an example here.
Suppose I have 2 layout files as shown below:
File: vendor/magento/theme-frontend-blank/Magento_Theme/layout/default_head_blocks.xml
<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/styles-m.css"/>
<css src="css/styles-l.css" media="screen and (min-width: 768px)"/>
<css src="css/print.css" media="print"/>
</head>
</page>
and
File: app/design/frontend/[Package]/[Theme]/Magento_Theme/layout/cms_index_index.xml
<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>
With that said, this is how page layout builder build() method looks like:
Class: MagentoFrameworkViewLayoutBuilder
public function build()
{
if (!$this->isBuilt) {
$this->isBuilt = true;
$this->loadLayoutUpdates();
$this->generateLayoutXml();
$this->generateLayoutBlocks();
}
return $this->layout;
}
Builder::loadLayoutUpdates() reads defaul_head_blocks.xml first and then reads cms_index_index.xml. As a result, the css assets which will be considered in the following order.
<css src="css/styles-m.css"/>
<css src="css/styles-l.css" media="screen and (min-width: 768px)"/>
<css src="css/print.css" media="print"/>
<css src="Magento_Theme::css/home/slider.css" />
This data will be provided to the HEAD config generator class (MagentoFrameworkViewPageConfigGeneratorHead) and in the process() method all the HEAD assets (This include js, css and meta etc.) will go through different processes such as adding assets, removing assets, processing meta data etc.
Addition of assets into the structure happens in MagentoFrameworkViewPageConfigGeneratorHead::processAssets()
protected function processAssets(Structure $pageStructure)
{
foreach ($pageStructure->getAssets() as $name => $data) {
if (isset($data['src_type']) && in_array($data['src_type'], $this->remoteAssetTypes)) {
if ($data['src_type'] === self::SRC_TYPE_CONTROLLER) {
$data['src'] = $this->url->getUrl($data['src']);
}
$this->pageConfig->addRemotePageAsset(
$data['src'],
isset($data['content_type']) ? $data['content_type'] : self::VIRTUAL_CONTENT_TYPE_LINK,
$this->getAssetProperties($data),
$name
);
} else {
$this->pageConfig->addPageAsset($name, $this->getAssetProperties($data));
}
}
return $this;
}
Here both $this->pageConfig->addPageAsset() and this->pageConfig->addRemotePageAsset() will create asset groups based on the asset property and then append the assets to any one of the asset group based on its property..
An asset property is an an array of attribute values other than src attribute.
For example, in the case of the asset <css src="css/print.css" media="print"/>, the asset property will be ["media" => "print"].
Each asset group is an instance of MagentoFrameworkViewAssetGroupedCollection and the method MagentoFrameworkViewAssetGroupedCollection::add() is what creates the asset group creation (if needed) and assignation of assets into the groups.
So for the above scenario, 3 groups will be created.
1. Asset Group () Holds:
css/styles-m.css
Magento_Theme::css/home/slider.css
2. Asset Group (["media" => "screen and (min-width: 768px)"]) Holds:
css/styles-l.css
3. Asset Group (["media" => "print"]) Holds:
css/print.css
As you can see above since the asset property of the asset Magento_Theme::css/home/slider.css and css/styles-m.css are the same (ie an empty array), both of them will be grouped together. Since this the first group asset which is created, all the assets in that group asset will be rendered first.
So in the above case, the asset rendering order will be:
css/styles-m.css
Magento_Theme::css/home/slider.css
css/styles-l.css
css/print.css
Another Example
Now if our css are configured in the below order:
<css src="css/styles-m.css"/>
<css src="css/styles-l.css" media="screen and (min-width: 768px)"/>
<css src="css/print.css" media="print"/>
<css src="Magento_Theme::css/home/slider.css" media="all" />
Then the asset grouping will be like this:
1. Asset Group () Holds:
css/styles-m.css
2. Asset Group (["media" => "screen and (min-width: 768px)"]) Holds:
css/styles-l.css
3. Asset Group (["media" => "print"]) Holds:
css/print.css
4. Asset Group (["media" => "all"]) Holds:
Magento_Theme::css/home/slider.css
and hence the css rendering order will be:
css/styles-m.css
css/styles-l.css
css/print.css
Magento_Theme::css/home/slider.css
answered Mar 13 '18 at 15:02
Rajeev K TomyRajeev K Tomy
14.4k54585
add a comment |
Use as below...
<css src="Magento_Theme::css/home/slider.css" media="all" />
instead of
<css src="Magento_Theme::css/home/slider.css" />
answered Mar 13 '18 at 10:42
Kishan PatadiaKishan Patadia
3,5781923
Can you explain how this works please?
– Ben Crook
Mar 13 '18 at 10:45
This worked. But could you please expalin why it works as mentioned by Ben?
– Rajeev K Tomy
Mar 13 '18 at 10:45
Regarding Ben's question, I think Magento includes highest resolution or all device styles after style-l and style-m CSS files. That is the reason.
– Kishan Patadia
Mar 13 '18 at 10:48
3
I think Magento loads any assets with attributes after assets without. So because of themediaattribute it is loaded later. Not 100% sure on that though it's something I've read on here before.
– Ben Crook
Mar 13 '18 at 10:54
1
@BenCrook Please have a look on my answer. I hope that clarifies your doubt
– Rajeev K Tomy
Mar 13 '18 at 15:17
|
show 3 more comments
I added Bootstrap.css using cms_index_index.xml but it is working only for home page 
answered 10 mins ago
PunithPunith
11
New contributor
Punith is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |
Your Answer
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "479"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fmagento.stackexchange.com%2fquestions%2f217131%2fload-custom-css-after-style-l-css-for-home-page%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
Here is the short answer:
Magento load all css assets into asset groups. Asset groups are created based on the css properties and which is what stands crucial for the rendering order of css assets.
In Details
First of all, There are lot of things happens behind the scene. So in order to make this answer abbreviated as possible, I would love to consider an example here.
Suppose I have 2 layout files as shown below:
File: vendor/magento/theme-frontend-blank/Magento_Theme/layout/default_head_blocks.xml
<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/styles-m.css"/>
<css src="css/styles-l.css" media="screen and (min-width: 768px)"/>
<css src="css/print.css" media="print"/>
</head>
</page>
and
File: app/design/frontend/[Package]/[Theme]/Magento_Theme/layout/cms_index_index.xml
<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>
With that said, this is how page layout builder build() method looks like:
Class: MagentoFrameworkViewLayoutBuilder
public function build()
{
if (!$this->isBuilt) {
$this->isBuilt = true;
$this->loadLayoutUpdates();
$this->generateLayoutXml();
$this->generateLayoutBlocks();
}
return $this->layout;
}
Builder::loadLayoutUpdates() reads defaul_head_blocks.xml first and then reads cms_index_index.xml. As a result, the css assets which will be considered in the following order.
<css src="css/styles-m.css"/>
<css src="css/styles-l.css" media="screen and (min-width: 768px)"/>
<css src="css/print.css" media="print"/>
<css src="Magento_Theme::css/home/slider.css" />
This data will be provided to the HEAD config generator class (MagentoFrameworkViewPageConfigGeneratorHead) and in the process() method all the HEAD assets (This include js, css and meta etc.) will go through different processes such as adding assets, removing assets, processing meta data etc.
Addition of assets into the structure happens in MagentoFrameworkViewPageConfigGeneratorHead::processAssets()
protected function processAssets(Structure $pageStructure)
{
foreach ($pageStructure->getAssets() as $name => $data) {
if (isset($data['src_type']) && in_array($data['src_type'], $this->remoteAssetTypes)) {
if ($data['src_type'] === self::SRC_TYPE_CONTROLLER) {
$data['src'] = $this->url->getUrl($data['src']);
}
$this->pageConfig->addRemotePageAsset(
$data['src'],
isset($data['content_type']) ? $data['content_type'] : self::VIRTUAL_CONTENT_TYPE_LINK,
$this->getAssetProperties($data),
$name
);
} else {
$this->pageConfig->addPageAsset($name, $this->getAssetProperties($data));
}
}
return $this;
}
Here both $this->pageConfig->addPageAsset() and this->pageConfig->addRemotePageAsset() will create asset groups based on the asset property and then append the assets to any one of the asset group based on its property..
An asset property is an an array of attribute values other than src attribute.
For example, in the case of the asset <css src="css/print.css" media="print"/>, the asset property will be ["media" => "print"].
Each asset group is an instance of MagentoFrameworkViewAssetGroupedCollection and the method MagentoFrameworkViewAssetGroupedCollection::add() is what creates the asset group creation (if needed) and assignation of assets into the groups.
So for the above scenario, 3 groups will be created.
1. Asset Group () Holds:
css/styles-m.css
Magento_Theme::css/home/slider.css
2. Asset Group (["media" => "screen and (min-width: 768px)"]) Holds:
css/styles-l.css
3. Asset Group (["media" => "print"]) Holds:
css/print.css
As you can see above since the asset property of the asset Magento_Theme::css/home/slider.css and css/styles-m.css are the same (ie an empty array), both of them will be grouped together. Since this the first group asset which is created, all the assets in that group asset will be rendered first.
So in the above case, the asset rendering order will be:
css/styles-m.css
Magento_Theme::css/home/slider.css
css/styles-l.css
css/print.css
Another Example
Now if our css are configured in the below order:
<css src="css/styles-m.css"/>
<css src="css/styles-l.css" media="screen and (min-width: 768px)"/>
<css src="css/print.css" media="print"/>
<css src="Magento_Theme::css/home/slider.css" media="all" />
Then the asset grouping will be like this:
1. Asset Group () Holds:
css/styles-m.css
2. Asset Group (["media" => "screen and (min-width: 768px)"]) Holds:
css/styles-l.css
3. Asset Group (["media" => "print"]) Holds:
css/print.css
4. Asset Group (["media" => "all"]) Holds:
Magento_Theme::css/home/slider.css
and hence the css rendering order will be:
css/styles-m.css
css/styles-l.css
css/print.css
Magento_Theme::css/home/slider.css
answered Mar 13 '18 at 15:02
Rajeev K TomyRajeev K Tomy
14.4k54585
add a comment |
Here is the short answer:
Magento load all css assets into asset groups. Asset groups are created based on the css properties and which is what stands crucial for the rendering order of css assets.
In Details
First of all, There are lot of things happens behind the scene. So in order to make this answer abbreviated as possible, I would love to consider an example here.
Suppose I have 2 layout files as shown below:
File: vendor/magento/theme-frontend-blank/Magento_Theme/layout/default_head_blocks.xml
<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/styles-m.css"/>
<css src="css/styles-l.css" media="screen and (min-width: 768px)"/>
<css src="css/print.css" media="print"/>
</head>
</page>
and
File: app/design/frontend/[Package]/[Theme]/Magento_Theme/layout/cms_index_index.xml
<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>
With that said, this is how page layout builder build() method looks like:
Class: MagentoFrameworkViewLayoutBuilder
public function build()
{
if (!$this->isBuilt) {
$this->isBuilt = true;
$this->loadLayoutUpdates();
$this->generateLayoutXml();
$this->generateLayoutBlocks();
}
return $this->layout;
}
Builder::loadLayoutUpdates() reads defaul_head_blocks.xml first and then reads cms_index_index.xml. As a result, the css assets which will be considered in the following order.
<css src="css/styles-m.css"/>
<css src="css/styles-l.css" media="screen and (min-width: 768px)"/>
<css src="css/print.css" media="print"/>
<css src="Magento_Theme::css/home/slider.css" />
This data will be provided to the HEAD config generator class (MagentoFrameworkViewPageConfigGeneratorHead) and in the process() method all the HEAD assets (This include js, css and meta etc.) will go through different processes such as adding assets, removing assets, processing meta data etc.
Addition of assets into the structure happens in MagentoFrameworkViewPageConfigGeneratorHead::processAssets()
protected function processAssets(Structure $pageStructure)
{
foreach ($pageStructure->getAssets() as $name => $data) {
if (isset($data['src_type']) && in_array($data['src_type'], $this->remoteAssetTypes)) {
if ($data['src_type'] === self::SRC_TYPE_CONTROLLER) {
$data['src'] = $this->url->getUrl($data['src']);
}
$this->pageConfig->addRemotePageAsset(
$data['src'],
isset($data['content_type']) ? $data['content_type'] : self::VIRTUAL_CONTENT_TYPE_LINK,
$this->getAssetProperties($data),
$name
);
} else {
$this->pageConfig->addPageAsset($name, $this->getAssetProperties($data));
}
}
return $this;
}
Here both $this->pageConfig->addPageAsset() and this->pageConfig->addRemotePageAsset() will create asset groups based on the asset property and then append the assets to any one of the asset group based on its property..
An asset property is an an array of attribute values other than src attribute.
For example, in the case of the asset <css src="css/print.css" media="print"/>, the asset property will be ["media" => "print"].
Each asset group is an instance of MagentoFrameworkViewAssetGroupedCollection and the method MagentoFrameworkViewAssetGroupedCollection::add() is what creates the asset group creation (if needed) and assignation of assets into the groups.
So for the above scenario, 3 groups will be created.
1. Asset Group () Holds:
css/styles-m.css
Magento_Theme::css/home/slider.css
2. Asset Group (["media" => "screen and (min-width: 768px)"]) Holds:
css/styles-l.css
3. Asset Group (["media" => "print"]) Holds:
css/print.css
As you can see above since the asset property of the asset Magento_Theme::css/home/slider.css and css/styles-m.css are the same (ie an empty array), both of them will be grouped together. Since this the first group asset which is created, all the assets in that group asset will be rendered first.
So in the above case, the asset rendering order will be:
css/styles-m.css
Magento_Theme::css/home/slider.css
css/styles-l.css
css/print.css
Another Example
Now if our css are configured in the below order:
<css src="css/styles-m.css"/>
<css src="css/styles-l.css" media="screen and (min-width: 768px)"/>
<css src="css/print.css" media="print"/>
<css src="Magento_Theme::css/home/slider.css" media="all" />
Then the asset grouping will be like this:
1. Asset Group () Holds:
css/styles-m.css
2. Asset Group (["media" => "screen and (min-width: 768px)"]) Holds:
css/styles-l.css
3. Asset Group (["media" => "print"]) Holds:
css/print.css
4. Asset Group (["media" => "all"]) Holds:
Magento_Theme::css/home/slider.css
and hence the css rendering order will be:
css/styles-m.css
css/styles-l.css
css/print.css
Magento_Theme::css/home/slider.css
answered Mar 13 '18 at 15:02
Rajeev K TomyRajeev K Tomy
14.4k54585
add a comment |
Here is the short answer:
Magento load all css assets into asset groups. Asset groups are created based on the css properties and which is what stands crucial for the rendering order of css assets.
In Details
First of all, There are lot of things happens behind the scene. So in order to make this answer abbreviated as possible, I would love to consider an example here.
Suppose I have 2 layout files as shown below:
File: vendor/magento/theme-frontend-blank/Magento_Theme/layout/default_head_blocks.xml
<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/styles-m.css"/>
<css src="css/styles-l.css" media="screen and (min-width: 768px)"/>
<css src="css/print.css" media="print"/>
</head>
</page>
and
File: app/design/frontend/[Package]/[Theme]/Magento_Theme/layout/cms_index_index.xml
<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>
With that said, this is how page layout builder build() method looks like:
Class: MagentoFrameworkViewLayoutBuilder
public function build()
{
if (!$this->isBuilt) {
$this->isBuilt = true;
$this->loadLayoutUpdates();
$this->generateLayoutXml();
$this->generateLayoutBlocks();
}
return $this->layout;
}
Builder::loadLayoutUpdates() reads defaul_head_blocks.xml first and then reads cms_index_index.xml. As a result, the css assets which will be considered in the following order.
<css src="css/styles-m.css"/>
<css src="css/styles-l.css" media="screen and (min-width: 768px)"/>
<css src="css/print.css" media="print"/>
<css src="Magento_Theme::css/home/slider.css" />
This data will be provided to the HEAD config generator class (MagentoFrameworkViewPageConfigGeneratorHead) and in the process() method all the HEAD assets (This include js, css and meta etc.) will go through different processes such as adding assets, removing assets, processing meta data etc.
Addition of assets into the structure happens in MagentoFrameworkViewPageConfigGeneratorHead::processAssets()
protected function processAssets(Structure $pageStructure)
{
foreach ($pageStructure->getAssets() as $name => $data) {
if (isset($data['src_type']) && in_array($data['src_type'], $this->remoteAssetTypes)) {
if ($data['src_type'] === self::SRC_TYPE_CONTROLLER) {
$data['src'] = $this->url->getUrl($data['src']);
}
$this->pageConfig->addRemotePageAsset(
$data['src'],
isset($data['content_type']) ? $data['content_type'] : self::VIRTUAL_CONTENT_TYPE_LINK,
$this->getAssetProperties($data),
$name
);
} else {
$this->pageConfig->addPageAsset($name, $this->getAssetProperties($data));
}
}
return $this;
}
Here both $this->pageConfig->addPageAsset() and this->pageConfig->addRemotePageAsset() will create asset groups based on the asset property and then append the assets to any one of the asset group based on its property..
An asset property is an an array of attribute values other than src attribute.
For example, in the case of the asset <css src="css/print.css" media="print"/>, the asset property will be ["media" => "print"].
Each asset group is an instance of MagentoFrameworkViewAssetGroupedCollection and the method MagentoFrameworkViewAssetGroupedCollection::add() is what creates the asset group creation (if needed) and assignation of assets into the groups.
So for the above scenario, 3 groups will be created.
1. Asset Group () Holds:
css/styles-m.css
Magento_Theme::css/home/slider.css
2. Asset Group (["media" => "screen and (min-width: 768px)"]) Holds:
css/styles-l.css
3. Asset Group (["media" => "print"]) Holds:
css/print.css
As you can see above since the asset property of the asset Magento_Theme::css/home/slider.css and css/styles-m.css are the same (ie an empty array), both of them will be grouped together. Since this the first group asset which is created, all the assets in that group asset will be rendered first.
So in the above case, the asset rendering order will be:
css/styles-m.css
Magento_Theme::css/home/slider.css
css/styles-l.css
css/print.css
Another Example
Now if our css are configured in the below order:
<css src="css/styles-m.css"/>
<css src="css/styles-l.css" media="screen and (min-width: 768px)"/>
<css src="css/print.css" media="print"/>
<css src="Magento_Theme::css/home/slider.css" media="all" />
Then the asset grouping will be like this:
1. Asset Group () Holds:
css/styles-m.css
2. Asset Group (["media" => "screen and (min-width: 768px)"]) Holds:
css/styles-l.css
3. Asset Group (["media" => "print"]) Holds:
css/print.css
4. Asset Group (["media" => "all"]) Holds:
Magento_Theme::css/home/slider.css
and hence the css rendering order will be:
css/styles-m.css
css/styles-l.css
css/print.css
Magento_Theme::css/home/slider.css
answered Mar 13 '18 at 15:02
Rajeev K TomyRajeev K Tomy
14.4k54585
Here is the short answer:
Magento load all css assets into asset groups. Asset groups are created based on the css properties and which is what stands crucial for the rendering order of css assets.
In Details
First of all, There are lot of things happens behind the scene. So in order to make this answer abbreviated as possible, I would love to consider an example here.
Suppose I have 2 layout files as shown below:
File: vendor/magento/theme-frontend-blank/Magento_Theme/layout/default_head_blocks.xml
<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/styles-m.css"/>
<css src="css/styles-l.css" media="screen and (min-width: 768px)"/>
<css src="css/print.css" media="print"/>
</head>
</page>
and
File: app/design/frontend/[Package]/[Theme]/Magento_Theme/layout/cms_index_index.xml
<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>
With that said, this is how page layout builder build() method looks like:
Class: MagentoFrameworkViewLayoutBuilder
public function build()
{
if (!$this->isBuilt) {
$this->isBuilt = true;
$this->loadLayoutUpdates();
$this->generateLayoutXml();
$this->generateLayoutBlocks();
}
return $this->layout;
}
Builder::loadLayoutUpdates() reads defaul_head_blocks.xml first and then reads cms_index_index.xml. As a result, the css assets which will be considered in the following order.
<css src="css/styles-m.css"/>
<css src="css/styles-l.css" media="screen and (min-width: 768px)"/>
<css src="css/print.css" media="print"/>
<css src="Magento_Theme::css/home/slider.css" />
This data will be provided to the HEAD config generator class (MagentoFrameworkViewPageConfigGeneratorHead) and in the process() method all the HEAD assets (This include js, css and meta etc.) will go through different processes such as adding assets, removing assets, processing meta data etc.
Addition of assets into the structure happens in MagentoFrameworkViewPageConfigGeneratorHead::processAssets()
protected function processAssets(Structure $pageStructure)
{
foreach ($pageStructure->getAssets() as $name => $data) {
if (isset($data['src_type']) && in_array($data['src_type'], $this->remoteAssetTypes)) {
if ($data['src_type'] === self::SRC_TYPE_CONTROLLER) {
$data['src'] = $this->url->getUrl($data['src']);
}
$this->pageConfig->addRemotePageAsset(
$data['src'],
isset($data['content_type']) ? $data['content_type'] : self::VIRTUAL_CONTENT_TYPE_LINK,
$this->getAssetProperties($data),
$name
);
} else {
$this->pageConfig->addPageAsset($name, $this->getAssetProperties($data));
}
}
return $this;
}
Here both $this->pageConfig->addPageAsset() and this->pageConfig->addRemotePageAsset() will create asset groups based on the asset property and then append the assets to any one of the asset group based on its property..
An asset property is an an array of attribute values other than src attribute.
For example, in the case of the asset <css src="css/print.css" media="print"/>, the asset property will be ["media" => "print"].
Each asset group is an instance of MagentoFrameworkViewAssetGroupedCollection and the method MagentoFrameworkViewAssetGroupedCollection::add() is what creates the asset group creation (if needed) and assignation of assets into the groups.
So for the above scenario, 3 groups will be created.
1. Asset Group () Holds:
css/styles-m.css
Magento_Theme::css/home/slider.css
2. Asset Group (["media" => "screen and (min-width: 768px)"]) Holds:
css/styles-l.css
3. Asset Group (["media" => "print"]) Holds:
css/print.css
As you can see above since the asset property of the asset Magento_Theme::css/home/slider.css and css/styles-m.css are the same (ie an empty array), both of them will be grouped together. Since this the first group asset which is created, all the assets in that group asset will be rendered first.
So in the above case, the asset rendering order will be:
css/styles-m.css
Magento_Theme::css/home/slider.css
css/styles-l.css
css/print.css
Another Example
Now if our css are configured in the below order:
<css src="css/styles-m.css"/>
<css src="css/styles-l.css" media="screen and (min-width: 768px)"/>
<css src="css/print.css" media="print"/>
<css src="Magento_Theme::css/home/slider.css" media="all" />
Then the asset grouping will be like this:
1. Asset Group () Holds:
css/styles-m.css
2. Asset Group (["media" => "screen and (min-width: 768px)"]) Holds:
css/styles-l.css
3. Asset Group (["media" => "print"]) Holds:
css/print.css
4. Asset Group (["media" => "all"]) Holds:
Magento_Theme::css/home/slider.css
and hence the css rendering order will be:
css/styles-m.css
css/styles-l.css
css/print.css
Magento_Theme::css/home/slider.css
answered Mar 13 '18 at 15:02
Rajeev K TomyRajeev K Tomy
14.4k54585
answered Mar 13 '18 at 15:02
Rajeev K TomyRajeev K Tomy
14.4k54585
answered Mar 13 '18 at 15:02
Rajeev K TomyRajeev K Tomy
14.4k54585
answered Mar 13 '18 at 15:02
Rajeev K TomyRajeev K Tomy
14.4k54585
14.4k54585
add a comment |
add a comment |
Use as below...
<css src="Magento_Theme::css/home/slider.css" media="all" />
instead of
<css src="Magento_Theme::css/home/slider.css" />
answered Mar 13 '18 at 10:42
Kishan PatadiaKishan Patadia
3,5781923
Can you explain how this works please?
– Ben Crook
Mar 13 '18 at 10:45
This worked. But could you please expalin why it works as mentioned by Ben?
– Rajeev K Tomy
Mar 13 '18 at 10:45
Regarding Ben's question, I think Magento includes highest resolution or all device styles after style-l and style-m CSS files. That is the reason.
– Kishan Patadia
Mar 13 '18 at 10:48
3
I think Magento loads any assets with attributes after assets without. So because of themediaattribute it is loaded later. Not 100% sure on that though it's something I've read on here before.
– Ben Crook
Mar 13 '18 at 10:54
1
@BenCrook Please have a look on my answer. I hope that clarifies your doubt
– Rajeev K Tomy
Mar 13 '18 at 15:17
|
show 3 more comments
Use as below...
<css src="Magento_Theme::css/home/slider.css" media="all" />
instead of
<css src="Magento_Theme::css/home/slider.css" />
answered Mar 13 '18 at 10:42
Kishan PatadiaKishan Patadia
3,5781923
Can you explain how this works please?
– Ben Crook
Mar 13 '18 at 10:45
This worked. But could you please expalin why it works as mentioned by Ben?
– Rajeev K Tomy
Mar 13 '18 at 10:45
Regarding Ben's question, I think Magento includes highest resolution or all device styles after style-l and style-m CSS files. That is the reason.
– Kishan Patadia
Mar 13 '18 at 10:48
3
I think Magento loads any assets with attributes after assets without. So because of themediaattribute it is loaded later. Not 100% sure on that though it's something I've read on here before.
– Ben Crook
Mar 13 '18 at 10:54
1
@BenCrook Please have a look on my answer. I hope that clarifies your doubt
– Rajeev K Tomy
Mar 13 '18 at 15:17
|
show 3 more comments
Use as below...
<css src="Magento_Theme::css/home/slider.css" media="all" />
instead of
<css src="Magento_Theme::css/home/slider.css" />
answered Mar 13 '18 at 10:42
Kishan PatadiaKishan Patadia
3,5781923
Use as below...
<css src="Magento_Theme::css/home/slider.css" media="all" />
instead of
<css src="Magento_Theme::css/home/slider.css" />
answered Mar 13 '18 at 10:42
Kishan PatadiaKishan Patadia
3,5781923
answered Mar 13 '18 at 10:42
Kishan PatadiaKishan Patadia
3,5781923
answered Mar 13 '18 at 10:42
Kishan PatadiaKishan Patadia
3,5781923
answered Mar 13 '18 at 10:42
Kishan PatadiaKishan Patadia
3,5781923
3,5781923
Can you explain how this works please?
– Ben Crook
Mar 13 '18 at 10:45
This worked. But could you please expalin why it works as mentioned by Ben?
– Rajeev K Tomy
Mar 13 '18 at 10:45
Regarding Ben's question, I think Magento includes highest resolution or all device styles after style-l and style-m CSS files. That is the reason.
– Kishan Patadia
Mar 13 '18 at 10:48
3
I think Magento loads any assets with attributes after assets without. So because of themediaattribute it is loaded later. Not 100% sure on that though it's something I've read on here before.
– Ben Crook
Mar 13 '18 at 10:54
1
@BenCrook Please have a look on my answer. I hope that clarifies your doubt
– Rajeev K Tomy
Mar 13 '18 at 15:17
|
show 3 more comments
Can you explain how this works please?
– Ben Crook
Mar 13 '18 at 10:45
This worked. But could you please expalin why it works as mentioned by Ben?
– Rajeev K Tomy
Mar 13 '18 at 10:45
Regarding Ben's question, I think Magento includes highest resolution or all device styles after style-l and style-m CSS files. That is the reason.
– Kishan Patadia
Mar 13 '18 at 10:48
3
I think Magento loads any assets with attributes after assets without. So because of themediaattribute it is loaded later. Not 100% sure on that though it's something I've read on here before.
– Ben Crook
Mar 13 '18 at 10:54
1
@BenCrook Please have a look on my answer. I hope that clarifies your doubt
– Rajeev K Tomy
Mar 13 '18 at 15:17
Can you explain how this works please?
– Ben Crook
Mar 13 '18 at 10:45
Can you explain how this works please?
– Ben Crook
Mar 13 '18 at 10:45
This worked. But could you please expalin why it works as mentioned by Ben?
– Rajeev K Tomy
Mar 13 '18 at 10:45
This worked. But could you please expalin why it works as mentioned by Ben?
– Rajeev K Tomy
Mar 13 '18 at 10:45
Regarding Ben's question, I think Magento includes highest resolution or all device styles after style-l and style-m CSS files. That is the reason.
– Kishan Patadia
Mar 13 '18 at 10:48
Regarding Ben's question, I think Magento includes highest resolution or all device styles after style-l and style-m CSS files. That is the reason.
– Kishan Patadia
Mar 13 '18 at 10:48
3
3
I think Magento loads any assets with attributes after assets without. So because of the
media attribute it is loaded later. Not 100% sure on that though it's something I've read on here before.– Ben Crook
Mar 13 '18 at 10:54
I think Magento loads any assets with attributes after assets without. So because of the
media attribute it is loaded later. Not 100% sure on that though it's something I've read on here before.– Ben Crook
Mar 13 '18 at 10:54
1
1
@BenCrook Please have a look on my answer. I hope that clarifies your doubt
– Rajeev K Tomy
Mar 13 '18 at 15:17
@BenCrook Please have a look on my answer. I hope that clarifies your doubt
– Rajeev K Tomy
Mar 13 '18 at 15:17
|
show 3 more comments
I added Bootstrap.css using cms_index_index.xml but it is working only for home page
answered 10 mins ago
PunithPunith
11
New contributor
Punith is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |
I added Bootstrap.css using cms_index_index.xml but it is working only for home page
answered 10 mins ago
PunithPunith
11
New contributor
Punith is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |
I added Bootstrap.css using cms_index_index.xml but it is working only for home page
answered 10 mins ago
PunithPunith
11
New contributor
Punith is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
I added Bootstrap.css using cms_index_index.xml but it is working only for home page
answered 10 mins ago
PunithPunith
11
New contributor
Punith is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
answered 10 mins ago
PunithPunith
11
New contributor
Punith is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
answered 10 mins ago
PunithPunith
11
answered 10 mins ago
PunithPunith
11
11
New contributor
Punith is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
New contributor
Punith is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
Punith is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |
add a comment |
Thanks for contributing an answer to Magento Stack Exchange!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fmagento.stackexchange.com%2fquestions%2f217131%2fload-custom-css-after-style-l-css-for-home-page%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
