2

I need to add additional wrapper in my Magento2 custom theme layout, so it would be

<div class="page-wrapper">
  <div class="my-custom-wrapper">
     ... all other cotainers ....
  </div>
</div>

How can I do that?

1

What you call wrappers are Magento 2 containers. You can add containers easily via XML with code like this:

<referenceContainer name="page.wrapper">
    <container name="my.custom.wrapper" htmlTag="div" htmlClass="my-custom-wrapper" />
</referenceContainer>

I suggest you read the official documentation for layout customization tasks as it's quite well documented: http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/layouts/layout-overview.html

  • Unfortunately, did not work for me. I added this into \app\design\frontend\MyVendor\MyTheme\Magento_Theme\layout\default.xml – Anna Sep 12 '16 at 9:28
  • @Jeremy well that's the right way of doing it. However I don't think you should use default.xml but refer to the original layout file instead. Feel free to read the documentation as it's quite well documented: devdocs.magento.com/guides/v2.0/frontend-dev-guide/layouts/… – Raphael at Digital Pianism Sep 12 '16 at 9:31
1

It works when I added it to app\design\frontend\Vendor\MyTheme\Magento_Theme\page_layout\empty.xml

<container name="page.wrapper" as="page_wrapper" htmlTag="div" htmlClass="page-wrapper">
        <container name="my.custom.wrapper" as="my.custom.wrapper" htmlTag="div" htmlClass="my-wrapper">
            <container name="global.notices" as="global_notices" before="-"/>
            .....
        </container>
</container>

And also change parent container from page.wrapper to my custom, in app\design\frontend\Vendor\MyTheme\Magento_Theme\page_layout\1column.xml

<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_layout.xsd">
<update handle="empty"/>
<referenceContainer name="my.custom.wrapper">
    <container name="header.container" as="header_container" label="Page Header Container"  htmlTag="header" htmlClass="page-header" before="main.content"/>
    .....

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.