I am trying to add my custom div with class and id before the maincontent.
<main id="maincontent" class="page-main">
can i add the custom div before this line? How this can be done. Please anyone suggest me.
4
7
You can try the below code:
<referenceContainer name="page.wrapper">
<container name="your.custom.name" as="your-custom" label="Your Label Name" htmlTag="div" htmlClass="your-class" htmlId="your-id" before="main.content">
<block class="Magento\Framework\View\Element\Template" name="custom.file" template="Vendor_Module::custom.phtml" /><!-- This is just an example -->
</container>
</referenceContainer>
UPDATED ANSWER AS PER COMMENT:
Create default.xml under:
app/design/frontend/Vendor/theme/Magento_Theme/layout/default.xml
<referenceContainer name="page.wrapper">
<container name="your.custom.name" as="your-custom" label="Your Label Name" htmlTag="div" htmlClass="your-class" htmlId="your-id" before="page-footer"/>
</referenceContainer>
<move element="main.content" destination="your.custom.name"/>
answered Sep 26 '18 at 8:35
-
-
and the div should close after the main tag. but now it is closing before main – jafar pinjar Sep 26 '18 at 8:52
-
Do you mean to wrap the maincontent div with a extra div? like <div id="custom"><main id="maincontent" class="page-main">------</div></div> like this? – Sukumar Gorai Sep 26 '18 at 8:54
-
-
i tried below code <move element="main.content" destination="your-custom" /> its not working for me – jafar pinjar Sep 26 '18 at 9:16
0
You can use below code:
<?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">
<body>
<referenceContainer name="page.wrapper">
<container name="custom_container" as="custom_container" label="Custom Container" htmlTag="div" htmlClass="your_class" after="main.content">
<block class="Magento\Framework\View\Element\Text" name="comment.placeholder">
<arguments>
<argument name="text" xsi:type="string"><![CDATA[<!-- Lorem Ipsum -->]]></argument>
</arguments>
</block>
</container>
</referenceContainer>
</body>
</page>
In the custom container, you must put something for rendering the container div.
-
-
-
I need to add the div before main.content, but your code is not like that, i need to add custom div before main content and move all the content of main into that div – jafar pinjar Sep 26 '18 at 9:17
