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.

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">
0

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

  • How system know that your_custom_layout.xml should use? – Iftakharul Alam Dec 27 '18 at 13:02
  • In which page your parent categories not subcategories.. are displayed ? – PЯINCƏ Dec 27 '18 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? – Iftakharul Alam Dec 27 '18 at 13:09
  • ok, add it in your theme. the 2nd case In all theme : – PЯINCƏ Dec 27 '18 at 13:12
  • So there will be 2 files in page_layout & layout with same name right? – Iftakharul Alam Dec 27 '18 at 13:16
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"/>
  • Sorry tried not working. – Iftakharul Alam Dec 27 '18 at 12:52
  • share css file and xml path? did you flushed cache, static content deployed? – Sathish Dec 27 '18 at 13:33
  • Magento_Theme/page_layout/custom_layout.xml, Magento_Theme/layouts.xml, Magento_Theme/web/css/demo.css – Iftakharul Alam Dec 27 '18 at 15:19

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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