0

I have a custom page layout for Home Page.

I created this custom layout this way:

app/design/frontend/Vendor/yourtheme/Magento_Theme/layouts.xml

<?xml version="1.0" encoding="UTF-8"?>
<page_layouts xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/PageLayout/etc/layouts.xsd">
    <layout id="custom">
        <label translate="true">custom layout</label>
    </layout>
</page_layouts>

app/design/frontend/Vendor/yourtheme/Magento_Theme/page_layout/custom.xml

<?xml version="1.0"?>
<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_layout.xsd">
    <update handle="empty"/>
    <referenceContainer name="page.wrapper">
        <container name="header.container" as="header_container" label="Page Header Container" htmlTag="header" htmlClass="page-header" before="main.content"/>
        <container name="page.top" as="page_top" label="After Page Header" after="header.container"/>
        <container name="footer-container" as="footer" before="before.body.end" label="Page Footer Container" htmlTag="footer" htmlClass="page-footer"/>
    </referenceContainer>
</layout>

How can I add CSS only to this layout? (not through default_head_blocks.xml). This has to show up only on that page and only on that layout?

The only way that worked for me was through Admin interface via:

But, I would like to do this via XML. Is this possible?

You used to be able to do this in Magento 1 with add css with actions

<action method="addCss">
    <stylesheet>css/javcustom.css</stylesheet>
</action>

Is there something like that in Magento 2?

0
1

First we create a custom layout, after that we add custom CSS and JS to this custom layout.

Step-1 :Create layouts.xml file at app/code/VendoreName/CustomLayout/view/frontend and add below code.

<?xml version="1.0" encoding="UTF-8"?>
<page_layouts xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/PageLayout/etc/layouts.xsd">
    <layout id="customlayout">
        <label translate="true">Custom CMS Page</label>
    </layout>
</page_layouts>

File name must be layout id name. Now we create customlayout.xml

Step-2 : Create customlayout.xml file at app/code/VendoreName/CustomLayout/view/frontend/page_layout and add below code.

<?xml version="1.0"?>
<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_layout.xsd">
    <update handle="3columns"/>
    <referenceContainer name="page.wrapper">
        <container name="footer-bottom" as="footer-bottom" after="footer" label="Footer Bottom" htmlTag="footer" htmlClass="page-footer-bottom">
            <container name="footer-bottom-content" as="footer-bottom-content" htmlTag="div" htmlClass="footer content">
                <block class="Magento\Framework\View\Element\Template" name="report.bugs.bottom" template="Magento_Theme::html/bugreport.phtml"/>
            </container>
        </container>
    </referenceContainer>
</layout>

You can also add your custom block and phtml file also. which are shown in Layouts when custom layout is used.

Now we add CSS and Js to custom layout file

Step-3 : Create routes.xml file at app/code/VendoreName/CustomLayout/etc/frontend and add below code.

<?xml version="1.0" ?>

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd">
    <router id="standard">
        <route frontName="customlayout" id="customlayout">
            <module name="VendoreName_CustomLayout"/>
        </route>
    </router>
</config>

Step-4 : Create Index.php file at app/code/VendoreName/CustomLayout/Controller/Index and add below code.

<?php

namespace VendoreName\CustomLayout\Controller\Index;

use Magento\Framework\App\Action\Action;

class Index extends \Magento\Framework\App\Action\Action
{
    protected $resultPageFactory;
    protected $customerSession;

    public function __construct(
        \Magento\Framework\App\Action\Context $context,
        \Magento\Framework\View\Result\PageFactory $resultPageFactory
    ) {
        $this->resultPageFactory = $resultPageFactory;
        parent::__construct($context);
    }

    public function execute()
    {
        $resultPage = $this->resultPageFactory->create();
        return $resultPage;
    }
}

Step-5 : Create customlayout_index_index.xml file at app/code/VendoreName/CustomLayout/view/frontend/layout and add below code.

<?xml version="1.0"?>

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd">
    <head>
        <css src="VendoreName_CustomLayout::css/my_custom_layout_css.css" />
        <script src="VendoreName_CustomLayout::js/my_custom_layout_js.js" />
    </head>
</page>

Here the file name must be like routename_controllername_actionname.xml and all characters must be in lowercase.

Add your css to app/code/VendoreName/CustomLayout/view/frontend/web/css/my_custom_layout_css.css

Add your Js to app/code/VendoreName/CustomLayout/view/frontend/web/js/my_custom_layout_js.js

Step-6 : Create events.xml file at app/code/VendoreName/CustomLayout/etc and add below code.

<?xml version="1.0"?>

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Event/etc/events.xsd">
    <event name="layout_load_before">
        <observer name="custom_layout_css_js_add" instance="VendoreName\CustomLayout\Observer\CustomLayoutHandler" />
    </event>
</config>

we need to add to css and js before page layout that's why we use layout_load_before event.

Step-7 : Create CustomLayoutHandler.php file at app/code/VendoreName/CustomLayout/Observer and add below code.

<?php

namespace VendoreName\CustomLayout\Observer;

class CustomLayoutHandler implements \Magento\Framework\Event\ObserverInterface
{
    public function __construct(
        \Magento\Framework\View\Result\Page $pageResult,
        \Magento\Cms\Model\Page $page
    ) {
        $this->_pageResult = $pageResult;
        $this->_page = $page;
    }

    public function execute(\Magento\Framework\Event\Observer $observer)
    {
        $layout = $observer->getData('layout');
        $currentPageLayout = $this->_pageResult->getConfig()->getPageLayout();
        //$currentPageLayout = $this->_page->getPageLayout();
        if ($currentPageLayout == "customlayout") {
            $layout->getUpdate()->addHandle('customlayout_index_index');
        }

    }
}

enter image description here

I Hope This Helps You.

15
  • Doesnt work. I created the folder structure and all the files exactly how you mentioned under /vendor folder(instead of app). Nothing shows up in dropdown. vendor/testvendor/CustomLayout/Controller/Index/Index.php vendor/testvendor/CustomLayout/etc/events.xml vendor/testvendor/CustomLayout/etc/frontend/routes.xml vendor/testvendor/CustomLayout/Observer/CustomLayoutHandler.php vendor/testvendor/CustomLayout/view/frontend/layouts.xml vendor/testvendor/CustomLayout/view/frontend/page_layout/customlayout.xml vendor/testvendor/CustomLayout/view/frontend/layout/customlayout_index_index.xml Dec 18 '20 at 19:16
  • How can I debug something like this? Are the errors that say why module doesnt work? Dec 18 '20 at 20:12
  • 1
    you have to create module into app/code folder.
    – Msquare
    Dec 19 '20 at 4:01
  • 1
    Please download this drive.google.com/drive/folders/… . then update me.
    – Msquare
    Dec 19 '20 at 4:07
  • 1
    Before using my module please remove your created files from it. and don't forgot to run magento setup upgrade command before check it.
    – Msquare
    Dec 19 '20 at 4:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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