I want to add custom class in Magento 2 category page like in
column main and sidebar sidebar-main
How to add custom class with these class ?
Any help is appreciated.
I want to add custom class in Magento 2 category page like in
column main and sidebar sidebar-main
How to add custom class with these class ?
Any help is appreciated.
Check the relevant page layout, for example:
/vendor/magento/module-theme/view/frontend/page_layout/2columns-left.xml
This contains the column containers like:
<referenceContainer name="columns">
<container name="div.sidebar.main" htmlTag="div" htmlClass="sidebar sidebar-main" after="main">
<container name="sidebar.main" as="sidebar_main" label="Sidebar Main"/>
</container>
<container name="div.sidebar.additional" htmlTag="div" htmlClass="sidebar sidebar-additional" after="div.sidebar.main">
<container name="sidebar.additional" as="sidebar_additional" label="Sidebar Additional"/>
</container>
</referenceContainer>
Replicate layout file in your own theme, like:
/app/design/frontend/<Vendor_Name>/<Theme>/Magento_Theme/page_layout/2columns-left.xml
Add classes in htmlClass
accordingly like 'test123' below:
<referenceContainer name="columns">
<container name="div.sidebar.main" htmlTag="div" htmlClass="sidebar sidebar-main" after="main">
<container name="sidebar.main" as="sidebar_main" label="Sidebar Main"/>
</container>
<container name="div.sidebar.additional" htmlTag="div" htmlClass="sidebar sidebar-additional test123" after="div.sidebar.main">
<container name="sidebar.additional" as="sidebar_additional" label="Sidebar Additional"/>
</container>
</referenceContainer>
Run commands to compile etc and refresh frontend to check if you see new class.
This is tested and works in v2.3.x.
I have same requirement for add class on category content, i used htmlClass on content area as below newarrival_custom_category, it works.
For add class on body tag, Use class name attribute after body, the class will be added on body tag of category page.
Ex.
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<attribute name="class" value="newarrival_category"/>
<referenceContainer name="content" htmlTag="div" htmlClass="newarrival_custom_category">
...
</referenceContainer>
</body>
</page>
newarrival_category will be added on category body tag and
newarrival_custom_category will be added on content area.
already custom class add in body tag, you can use that class
In your layout or template file, you need to add an attribute to the body tag, like this:
<body>
<attribute name="class" value="my-css-class"/>
...
Hope that Helps