Editing a child theme in Magento

0
votes

I've created a child theme by adding files to C:\xampp\htdocs\magento\app\design\frontend\Magento\themename

In this I have a theme.xml file, a registration.php file, web folder, media folder and a Magento_Theme folder.

My question is as follows:

This child theme is using the C:\xampp\htdocs\magento\vendor\magento\theme-frontend-blank structure. For my homepage, how would I change the header file for example. It has a top menu, a search and a logo. How would I be able to re-arrange this? Or even the homepage. How would I make a new layout for this, to maybe have a 3/5 column of normal content and 2/5 content of a latest products (As an example).

Any directions would be awesome!

1
phpmagentothemesmagento2

1 Answers

0
votes

Change header

Overridde logo: Copy vendor\magento\module-theme\view\frontend\templates\html\header.phtml to app\design\frontend\Magento\themename\Magento_Theme\templates\html\header.phtml and modify it as you want.

Overridde topmenu: Copy vendor\magento\module-theme\view\frontend\templates\html\topmenu.phtml to app\design\frontend\Magento\themename\Magento_Theme\templates\html\topmenu.phtml and modify it as you want.

Overridde searchbox: It's a little bit different. Copy vendor\magento\module-search\view\frontend\templates\form.mini.phtml to app\design\frontend\Magento\themename\Magento_Search\templates\form.mini.phtml and modify it as you want.

Ref:

Create layout

  1. Create file app\design\frontend\Magento\themename\Magento_Theme\page_layout\new-layout.xml with the following content:

    <?xml version="1.0" ?>
<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_layout.xsd">
    <update handle="2columns-left"/>
</layout>

  2. Create file app\design\frontend\Magento\themename\Magento_Theme\page_layout\layouts.xml with the following content:

    <page_layouts xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/PageLayout/etc/layouts.xsd">
    <layout id="new-layout">
        <label translate="true">My New Layout</label>
    </layout>
</page_layouts>

    1. Write the CSS file to declare the width:

      .page-layout-new-layout .column.left {
    width: 60%;
    float: left;
    -ms-flex-order: 1;
    -webkit-order: 1;
    order: 1;
}


.page-layout-new-layout .column.main {
    width: 40%;
    float: right;
    -ms-flex-order: 2;
    -webkit-order: 2;
    order: 2;
}

    2. Clear cache

Ref: