0

I created a custom layout to display only parent categories not subcategories. But I need custom css for that layout. I create custom_layout in Magento_Theme/page_layout folder and defined in layouts.xml. Which works fine. But how I add css to that custom layout. My custom layout is

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<update handle="1column"/>
<referenceContainer name="page.wrapper">
    <referenceBlock name="breadcrumbs" remove="true" />
    <referenceBlock name="page.main.title" remove="true"/>
    <referenceBlock name="category.description" remove="true" />
</referenceContainer>

and layouts.xml as

<page_layouts xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/PageLayout/etc/layouts.xsd">
<layout id="category_level_one">
    <label translate="true">Category Level One</label>
</layout>

I need to add css like

<head>        
<css src="css/demo.css" media="all"/></head>

Which is not working. How to resolve this issue? Thanks in advance.

1
  • Have you found the solution for this ?
    – chris
    Oct 20, 2020 at 8:55

4 Answers 4

1

In custom layout :

If you want to add your custom css only in your custom layout, you just have to declare it in that custom layout.

app/design/frontend/Vendor_Modulename/layout/your_custom_layout.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" layout="1column">
    <head>
        <css src="Magento_Theme::css/demo.css" />
    </head>
</page>

In all theme :

app/design/frontend/Magento_Theme/layout/default_head_blocks.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" layout="1column">
    <head>
        <css src="Magento_Theme::css/demo.css" />
    </head>
</page>

Css path :

app/design/frontend/Magento_Theme/web/css/demo.css

Your css content goes here

Important : Clean the content of pub/static without the .htaccess then, deploy the static content like this : php bin/magento setup:static-content:deploy -f

5
  • How system know that your_custom_layout.xml should use? Dec 27, 2018 at 13:02
  • In which page your parent categories not subcategories.. are displayed ?
    – PЯINCƎ
    Dec 27, 2018 at 13:06
  • Please clear the confusion. I create custom layout in page_layout folder and register it in layouts.xml and finally backend category > design > layout select that layout. Where I need to change my work flow? Dec 27, 2018 at 13:09
  • ok, add it in your theme. the 2nd case In all theme :
    – PЯINCƎ
    Dec 27, 2018 at 13:12
  • So there will be 2 files in page_layout & layout with same name right? Dec 27, 2018 at 13:16
0

add this code to your custom layout

<head>
    <css src="css/demo.css" media="all and (min-width: 1px)"/>
</head>

to be specific, add it before

<referenceContainer name="page.wrapper">
1
0

You need to check the demo.css file path

If the file is inside the Magento_Theme folder you should use like below.

app/design/frontend/theme/Store/Magento_Theme/web/css/demo.css

<css src="Magento_Theme::css/demo.css" media="all"/>

If the file is in

app/design/frontend/theme/Store/web/css/demo.css

Then you can use without module name like below.

<css src="css/demo.css" media="all"/>
3
  • Sorry tried not working. Dec 27, 2018 at 12:52
  • share css file and xml path? did you flushed cache, static content deployed?
    – Sathish
    Dec 27, 2018 at 13:33
  • Magento_Theme/page_layout/custom_layout.xml, Magento_Theme/layouts.xml, Magento_Theme/web/css/demo.css Dec 27, 2018 at 15:19
0

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');
        }

    }
}

I Hope This Helps You.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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