1

I want to add a new class inside column main div. Right now my layout in frontend is like this:

<div class="columns">
    <div class="column main">
        <div="MYDIV">
        </div>
    </div>
    <div class="sidebar sidebar-additional">
    </div>
</div>

this is my layout:

<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_layout.xsd">
    <update handle="1column"/>
    <referenceContainer name="columns">
        <container name="div.sidebar.main" htmlTag="div" htmlClass="sidebar sidebar-main" after="main">
            <container name="sidebar.main" as="sidebar_main" label="Sidebar Main"/>
        </container>
        <container name="div.sidebar.additional" htmlTag="div" htmlClass="sidebar sidebar-additional" after="div.sidebar.main">
            <container name="sidebar.additional" as="sidebar_additional" label="Sidebar Additional"/>
        </container>
    </referenceContainer>
</layout>
  • on your 2nd div where class is "column main".. you want to add one more class here , for example "test" ? – Manoj Deswal Nov 1 '17 at 8:12
  • I want to be where is MYDIV – Robert Nov 1 '17 at 8:14
  • I want to be created – Robert Nov 1 '17 at 9:03
  • let me explain you again, this <div="MYDIV"> must be inside <div class="column main"> is the magento Blank theme – Robert Nov 1 '17 at 9:08
3

You can try it:

your_theme_root/Magento_Theme/layout/default.xml

<?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="columns">
            <container name="columns.main" htmlTag="div" htmlClass="column main" before="-" />
        </referenceContainer>
        <referenceContainer name="main" htmlClass="class-example" />
        <move element="main" destination="columns.main" />
    </body>
</page>

Replace class-example to your css class.

  • and sidebar where is? – Robert Nov 1 '17 at 9:14
  • and what I post there is the 2columns-left layout – Robert Nov 1 '17 at 9:15
  • It is layout inside your theme, it extends standard 2columns-left layout. Sidebars remain on the same places. – Evgeny Levinsky Nov 1 '17 at 9:19
  • I understand, is perfect thank you very much – Robert Nov 1 '17 at 9:22
2

You can try this.

Preferred way is to edit in theme's default.xml file. You may create or edit the default.xml file at path app/design/frontend/Vendor/theme/Magento_Theme/layout/default.xml

If one wants to add container div under column div, should try this.

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
        <body>
           <referenceContainer name="columns">
                <container name="container" label="" htmlTag="div" htmlClass="container" />
            </referenceContainer>        
           <move element="main" destination="container" before="-"/>
        </body>
</page>

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.