4

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.

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"/>
  • we must create template file to load that div? – jafar pinjar Sep 26 '18 at 8:47
  • 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
  • yes, i need to wrap main content within that div – jafar pinjar Sep 26 '18 at 8:57
  • 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.

  • Please update me full code, its not working for me – jafar pinjar Sep 26 '18 at 8:38
  • I have updated. – St3phan Sep 26 '18 at 8:44
  • 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

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.