Magento2: How to add different custom css file on specific CMS pages

Question 1

I tried so may things but unable to add the CSS & JS files for each Static CMS pages. I know if CSS can be added in cms_page_view.xml but this will reflect in all pages.

is there anyway to add different CSS files for different static pages.

Question 2

You can add Layout Update XML update

GOTO ADMIN -> Content -> Pages -> Edit page -> Design -> Layout Update XML

With the content :

<head>
 <css src="Namespace_YourModule::css/styles.css"/>
</head>

Then there is a bug in Magento 2, you need to override the default Magento 2 vendor/magento/framework/View/Layout/etc/page_layout.xsd validation file.

A workaround, not a clean solution, but waiting Magento 2 to allow override xsd files

app/code/Vendor/Module/etc/di.xml

<preference for="Magento\Framework\View\Model\Layout\Update\Validator" type="Vendor\Module\Model\Layout\Update\Validator" />

app/code/Vendor/Module/etc/page_layout.xsd

<?xml version="1.0" encoding="UTF-8"?>
<!--
/**
 * Copyright © 2013-2017 Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">
 <xs:include schemaLocation="urn:magento:framework:View/Layout/etc/elements.xsd"/>
 <xs:include schemaLocation="urn:magento:framework:View/Layout/etc/head.xsd"/>
 <xs:include schemaLocation="urn:magento:framework:View/Layout/etc/body.xsd"/>
 <xs:complexType name="pageLayoutType">
 <xs:sequence minOccurs="0" maxOccurs="unbounded">
 <xs:element ref="referenceContainer" minOccurs="0" maxOccurs="unbounded"/>
 <xs:element ref="container" minOccurs="0" maxOccurs="unbounded"/>
 <xs:element ref="update" minOccurs="0" maxOccurs="unbounded"/>
 <xs:element ref="move" minOccurs="0" maxOccurs="unbounded"/>
 <xs:element name="head" type="headType" minOccurs="0" maxOccurs="unbounded"/>
 <xs:element name="body" type="bodyType" minOccurs="0" maxOccurs="unbounded"/>
 </xs:sequence>
 </xs:complexType>
 <xs:element name="layout" type="pageLayoutType">
 <xs:unique name="containerKey">
 <xs:selector xpath=".//container"/>
 <xs:field xpath="@name"/>
 </xs:unique>
 </xs:element>
</xs:schema>

app/code/Vendor/Module/Model/Layout/Update/Validator.php

<?php
namespace Hublot\Setup\Model\Layout\Update;
use Magento\Framework\Config\Dom\UrnResolver;
class Validator extends \Magento\Framework\View\Model\Layout\Update\Validator
{
 const LAYOUT_SCHEMA_PAGE_HANDLE = 'page_layout';
 const LAYOUT_SCHEMA_MERGED = 'layout_merged';
 /**
 * @param \Magento\Framework\Config\DomFactory $domConfigFactory
 * @param \Magento\Framework\Config\Dom\UrnResolver $urnResolver
 */
 public function __construct(
 \Magento\Framework\Config\DomFactory $domConfigFactory,
 UrnResolver $urnResolver
 ) {
 $this->_domConfigFactory = $domConfigFactory;
 $this->_initMessageTemplates();
 $this->_xsdSchemas = [
 self::LAYOUT_SCHEMA_PAGE_HANDLE => $urnResolver->getRealPath(
 'urn:hublot:module:Hublot_Setup:etc/page_layout.xsd'
 ),
 self::LAYOUT_SCHEMA_MERGED => $urnResolver->getRealPath(
 'urn:magento:framework:View/Layout/etc/layout_merged.xsd'
 ),
 ];
 }
}

Question 3

For reference to see when this is eventually fixed, this is the Magento bug in question: github.com/magento/magento2/issues/4454

Question 4

It is indeed a bug I have same issue 2.2.2 there is the fix :github.com/magento/magento2/commit/…

Question 5

What is the full path to "Namespace_YourModule::css/" ?

Question 6

Please follow below steps to add css and js to specific cms page using custom module.

1) Create custom module using below step

app/code/Vendor/Module/registration.php

<?php
 \Magento\Framework\Component\ComponentRegistrar::register(
 \Magento\Framework\Component\ComponentRegistrar::MODULE,
 'Vendor_Module',
 __DIR__
);

app/code/Vendor/Module/etc/module.xml

<?xml version="1.0" encoding="UTF-8"?>
 <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
 <module name="Vendor_Module" setup_version="1.0.0"/>
 </config>

app/code/Vendor/Module/view/frontend/web/css/custom.css Then add your css code into custom.css file

2) GOTO ADMIN -> Content -> Pages -> Edit page -> Design -> Layout Update XML and add below code for particulate page.

<head>
 <css src="Vendor_Module::css/custom.css"/>
</head>

For the other cms page create specific css file and add app/code/Vendor/Module/view/frontend/web/css/ and add that css file into other cms page same as step2 via just changing css file name.

enter image description here

Question 7

You can add custom css like below:
make an entry in layout file

 <page> 
 <head>
 <css src="css/ie-9.css" ie_condition="IE 9" />
 <css src="Magento_Catalog::css/custom.css" />
 <css src="Custom_SampleModule::css/custom.css"/>
 </head>
 </page>

Question 8

What is the full path to 'Magento_Catalog::css/custom.css' or 'Custom_SampleModule::css/custom.css'

Question 9

I found that Franck Garnier's does not quite work on 2.1.16.

I had to change the last file, Validator.php, a bit to get it to work as follows.

namespace Vendor\CmsLayoutFix\Model\Layout\Update;
use Magento\Framework\App\ObjectManager;
use Magento\Framework\Config\Dom\UrnResolver;
use Magento\Framework\Config\DomFactory;
use Magento\Framework\Config\ValidationStateInterface;
class Validator extends \Magento\Framework\View\Model\Layout\Update\Validator
{
 const LAYOUT_SCHEMA_PAGE_HANDLE = 'page_layout';
 const LAYOUT_SCHEMA_MERGED = 'layout_merged';
 private $validationState;
 public function __construct(
 DomFactory $domConfigFactory,
 UrnResolver $urnResolver,
 ValidationStateInterface $validationState = null
 ) {
 parent::__construct($domConfigFactory, $urnResolver);
 $this->_xsdSchemas = [
 self::LAYOUT_SCHEMA_PAGE_HANDLE => $urnResolver->getRealPath(
 'urn:vendor:module:Vendor_CmsLayoutFix:etc/page_layout.xsd'
 ),
 self::LAYOUT_SCHEMA_MERGED => $urnResolver->getRealPath(
 'urn:magento:framework:View/Layout/etc/layout_merged.xsd'
 ),
 ];
 }
}

WHERE:

vendor = Vendor

module = CmsLayoutFix

Question 10

In magento all CMS pages have an option of Layout Update XML update .Just Call your Custom code there also add CSS or JS .

Admin CMS Pages

GOTO ADMIN -> Content -> Pages -> Edit page -> Design -> Layout Update XML

add below call

<head>
 <css src="Namespace_YourModule::css/styles.css"/>
</head>

Question 11

this works in page layout configuration not in Layout Update XML , hope you checked...

Question 12

It is working fine I have tested this code . just remove "Namespace_YourModule::" and set in to "Layout Update XML" and refresh you Cache so you can show in that page only.

Question 13

Please correct the XML data and try again. Element 'head': This element is not expected. Expected is one of ( referenceContainer, container, update, move ). Line: 1

this we will get if we put anything else apart from above four Element. I am using magento 2.0.7

Question 14

Yeah, this worked for me. Just remember to flush the cache after you change the layout for the cms page to pickup the change.

Question 15

What is "Namespace_YourModule" is it my custom theme? I already extended Luma theme but I do not have any specific module.

Franck Garnier 2,9461 gold badge18 silver badges35 bronze badges · Answer 1 · 2017-03-27 10:23:18Z

You can add Layout Update XML update

GOTO ADMIN -> Content -> Pages -> Edit page -> Design -> Layout Update XML

With the content :

<head>
 <css src="Namespace_YourModule::css/styles.css"/>
</head>

Then there is a bug in Magento 2, you need to override the default Magento 2 vendor/magento/framework/View/Layout/etc/page_layout.xsd validation file.

A workaround, not a clean solution, but waiting Magento 2 to allow override xsd files

app/code/Vendor/Module/etc/di.xml

<preference for="Magento\Framework\View\Model\Layout\Update\Validator" type="Vendor\Module\Model\Layout\Update\Validator" />

app/code/Vendor/Module/etc/page_layout.xsd

<?xml version="1.0" encoding="UTF-8"?>
<!--
/**
 * Copyright © 2013-2017 Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">
 <xs:include schemaLocation="urn:magento:framework:View/Layout/etc/elements.xsd"/>
 <xs:include schemaLocation="urn:magento:framework:View/Layout/etc/head.xsd"/>
 <xs:include schemaLocation="urn:magento:framework:View/Layout/etc/body.xsd"/>
 <xs:complexType name="pageLayoutType">
 <xs:sequence minOccurs="0" maxOccurs="unbounded">
 <xs:element ref="referenceContainer" minOccurs="0" maxOccurs="unbounded"/>
 <xs:element ref="container" minOccurs="0" maxOccurs="unbounded"/>
 <xs:element ref="update" minOccurs="0" maxOccurs="unbounded"/>
 <xs:element ref="move" minOccurs="0" maxOccurs="unbounded"/>
 <xs:element name="head" type="headType" minOccurs="0" maxOccurs="unbounded"/>
 <xs:element name="body" type="bodyType" minOccurs="0" maxOccurs="unbounded"/>
 </xs:sequence>
 </xs:complexType>
 <xs:element name="layout" type="pageLayoutType">
 <xs:unique name="containerKey">
 <xs:selector xpath=".//container"/>
 <xs:field xpath="@name"/>
 </xs:unique>
 </xs:element>
</xs:schema>

app/code/Vendor/Module/Model/Layout/Update/Validator.php

<?php
namespace Hublot\Setup\Model\Layout\Update;
use Magento\Framework\Config\Dom\UrnResolver;
class Validator extends \Magento\Framework\View\Model\Layout\Update\Validator
{
 const LAYOUT_SCHEMA_PAGE_HANDLE = 'page_layout';
 const LAYOUT_SCHEMA_MERGED = 'layout_merged';
 /**
 * @param \Magento\Framework\Config\DomFactory $domConfigFactory
 * @param \Magento\Framework\Config\Dom\UrnResolver $urnResolver
 */
 public function __construct(
 \Magento\Framework\Config\DomFactory $domConfigFactory,
 UrnResolver $urnResolver
 ) {
 $this->_domConfigFactory = $domConfigFactory;
 $this->_initMessageTemplates();
 $this->_xsdSchemas = [
 self::LAYOUT_SCHEMA_PAGE_HANDLE => $urnResolver->getRealPath(
 'urn:hublot:module:Hublot_Setup:etc/page_layout.xsd'
 ),
 self::LAYOUT_SCHEMA_MERGED => $urnResolver->getRealPath(
 'urn:magento:framework:View/Layout/etc/layout_merged.xsd'
 ),
 ];
 }
}

For reference to see when this is eventually fixed, this is the Magento bug in question: github.com/magento/magento2/issues/4454
It is indeed a bug I have same issue 2.2.2 there is the fix :github.com/magento/magento2/commit/…

Bhavin Pethani 5632 silver badges19 bronze badges · Answer 2 · 2020-01-12 09:14:26Z

Please follow below steps to add css and js to specific cms page using custom module.

1) Create custom module using below step

app/code/Vendor/Module/registration.php

<?php
 \Magento\Framework\Component\ComponentRegistrar::register(
 \Magento\Framework\Component\ComponentRegistrar::MODULE,
 'Vendor_Module',
 __DIR__
);

app/code/Vendor/Module/etc/module.xml

<?xml version="1.0" encoding="UTF-8"?>
 <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
 <module name="Vendor_Module" setup_version="1.0.0"/>
 </config>

app/code/Vendor/Module/view/frontend/web/css/custom.css Then add your css code into custom.css file

2) GOTO ADMIN -> Content -> Pages -> Edit page -> Design -> Layout Update XML and add below code for particulate page.

<head>
 <css src="Vendor_Module::css/custom.css"/>
</head>

For the other cms page create specific css file and add app/code/Vendor/Module/view/frontend/web/css/ and add that css file into other cms page same as step2 via just changing css file name.

enter image description here

Pramod Kharade 2,8421 gold badge24 silver badges43 bronze badges · Answer 3 · 2017-11-11 16:20:10Z

0

You can add custom css like below:
make an entry in layout file

 <page> 
 <head>
 <css src="css/ie-9.css" ie_condition="IE 9" />
 <css src="Magento_Catalog::css/custom.css" />
 <css src="Custom_SampleModule::css/custom.css"/>
 </head>
 </page>

Share

Improve this answer

answered Nov 11, 2017 at 16:20

Pramod Kharade's user avatar

Pramod Kharade

2,8421 gold badge24 silver badges43 bronze badges

1

What is the full path to 'Magento_Catalog::css/custom.css' or 'Custom_SampleModule::css/custom.css'

Mohammed Joraid
– Mohammed Joraid

2020年01月07日 23:28:35 +00:00
Commented Jan 7, 2020 at 23:28

Add a comment |

Jason 111 bronze badge · Answer 4 · 2019-02-05 07:38:15Z

I found that Franck Garnier's does not quite work on 2.1.16.

I had to change the last file, Validator.php, a bit to get it to work as follows.

namespace Vendor\CmsLayoutFix\Model\Layout\Update;
use Magento\Framework\App\ObjectManager;
use Magento\Framework\Config\Dom\UrnResolver;
use Magento\Framework\Config\DomFactory;
use Magento\Framework\Config\ValidationStateInterface;
class Validator extends \Magento\Framework\View\Model\Layout\Update\Validator
{
 const LAYOUT_SCHEMA_PAGE_HANDLE = 'page_layout';
 const LAYOUT_SCHEMA_MERGED = 'layout_merged';
 private $validationState;
 public function __construct(
 DomFactory $domConfigFactory,
 UrnResolver $urnResolver,
 ValidationStateInterface $validationState = null
 ) {
 parent::__construct($domConfigFactory, $urnResolver);
 $this->_xsdSchemas = [
 self::LAYOUT_SCHEMA_PAGE_HANDLE => $urnResolver->getRealPath(
 'urn:vendor:module:Vendor_CmsLayoutFix:etc/page_layout.xsd'
 ),
 self::LAYOUT_SCHEMA_MERGED => $urnResolver->getRealPath(
 'urn:magento:framework:View/Layout/etc/layout_merged.xsd'
 ),
 ];
 }
}

WHERE:

vendor = Vendor

module = CmsLayoutFix

Hitesh Vaghasiya 6092 gold badges8 silver badges20 bronze badges · Answer 5 · 2016-07-20 14:46:48Z

-1

In magento all CMS pages have an option of Layout Update XML update .Just Call your Custom code there also add CSS or JS .

Admin CMS Pages

GOTO ADMIN -> Content -> Pages -> Edit page -> Design -> Layout Update XML

add below call

<head>
 <css src="Namespace_YourModule::css/styles.css"/>
</head>

Share

Improve this answer

answered Jul 20, 2016 at 14:46

Hitesh Vaghasiya's user avatar

Hitesh Vaghasiya

6092 gold badges8 silver badges20 bronze badges

5

this works in page layout configuration not in Layout Update XML , hope you checked...

Mohammad Mujassam
– Mohammad Mujassam

2016年07月21日 04:44:36 +00:00
Commented Jul 21, 2016 at 4:44
It is working fine I have tested this code . just remove "Namespace_YourModule::" and set in to "Layout Update XML" and refresh you Cache so you can show in that page only.

Hitesh Vaghasiya
– Hitesh Vaghasiya

2016年07月21日 18:59:21 +00:00
Commented Jul 21, 2016 at 18:59
1

Please correct the XML data and try again. Element 'head': This element is not expected. Expected is one of ( referenceContainer, container, update, move ). Line: 1 this we will get if we put anything else apart from above four Element. I am using magento 2.0.7

Mohammad Mujassam
– Mohammad Mujassam

2016年07月22日 04:40:52 +00:00
Commented Jul 22, 2016 at 4:40
1

Yeah, this worked for me. Just remember to flush the cache after you change the layout for the cms page to pickup the change.

Dallas Clarke
– Dallas Clarke

2017年12月13日 03:23:07 +00:00
Commented Dec 13, 2017 at 3:23
What is "Namespace_YourModule" is it my custom theme? I already extended Luma theme but I do not have any specific module.

Mohammed Joraid
– Mohammed Joraid

2020年01月07日 23:08:33 +00:00
Commented Jan 7, 2020 at 23:08

Add a comment |

Stack Exchange Network

Magento2: How to add different custom css file on specific CMS pages

5 Answers 5

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Linked

Hot Network Questions

Magento2: How to add different custom css file on specific CMS pages

5 Answers 5

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Linked

Related

Hot Network Questions