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.

Improve this question

2 Answers 2

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

Improve this answer
3
  • Please update me full code, its not working for me
    – jafar pinjar
    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
    – jafar pinjar
    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.