7

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.

2 Answers 2

11

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"/>
12
  • we must create template file to load that div? Sep 26, 2018 at 8:47
  • and the div should close after the main tag. but now it is closing before main Sep 26, 2018 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? Sep 26, 2018 at 8:54
  • yes, i need to wrap main content within that div Sep 26, 2018 at 8:57
  • i tried below code <move element="main.content" destination="your-custom" /> its not working for me Sep 26, 2018 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.

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