Magento2: Wrap all contents under .page-wrapper in new container

Question

Im trying to add a secondary div wrapper if you like underneath the .page-wrapper, for example:

<div class="page-wrapper">
  <div class="my-new-wrapper-div">
    <!-- ALL OTHER CONTAINERS, header, main.content etc -->
  </div>
</div>

Is there a supported way of doing this by just creating a new container? Im able to get a new container to show on the page but it doesn't wrap the rest of the contents.

Answer 1

This is how i do this for some of the projects i work on.

<!--   Move all nessecery elements   -->
<move element="header.container" destination="my.new.wrapper.div" as="header_container"/>
<move element="main.content" destination="my.new.wrapper.div" as="main_content"/>

<referenceContainer name="page.wrapper">
    <!--    ofcourse make this html file in the right directory  -->
    <block class="Magento\Framework\View\Element\Template" name="my.new.wrapper.div" before="-" template="Magento_Theme::html/my-new-wrapper-div.phtml" />
</referenceContainer>

You might need to echo these blocks inside you html files

<?php echo $block->getChildHtml('header_container'); ?>
<?php echo $block->getChildHtml('main_content'); ?>

You also need to move your footer the same way as main.content and header.container

Hope this helps!