Customize Cover, Illustration Layout In Magento 2

January 2, 2020July 22, 2021 Adam Roger 0 Comments Cover Customizing Layout, Customize Cover Illustration Layout In Magento 2, Illustration Theme layout, magento 2 tutorials, Magento 2.3 Cover Customizing Layout, Magento 2.3 Cover Customizing Layout Illustration Theme layout, Magento 2.3 Illustration Theme layout

Table Of Contents hide

1 Basic layouts elements

2 Basic layouts

3 Simplest override template to customize

4 Simplest create new template to customize

5 Simplest extend parent styles

6 Simplest override parent styles

Our previous post is How to create new theme in Magento 2. I think you guys should read it. To continue the previous post, we will introduce you to Customize cover, illustration layout in Magento 2.

Magento 2 Blank theme provides hooks to core functionality. Only the files or modules that are changed should be incorporated into custom themes. When creating a child theme, it is necessary to ensure a parent theme is named. Please go to vendor/magento/theme-frontend-luma, it is a suggestion for you when building your theme.

Basic layouts elements

(1) Layouts provide the structures for web pages using an XML file that identifies all the containers and blocks composing the page. The details of layout XML files are described later in this section.

(2) Containers assign content structure to a page using container tags within a layout XML file. A container has no additional content except the content of include elements. Examples of containers include the header, left column, main column, and footer.

(3) Blocks render the UI elements on a page using block tags within a layout XML file. Blocks use templates to generate the HTML to insert into its parent structural block. Examples of blocks include a category list, a mini cart, product tags, and product listing.

Extending layouts: You only need to create an extending layout file that contains the changes you want.

For example: to customize the layout of a page defined in vendor/magento/module-catalog/view/frontend/layout/catalog_product_view.xml, you need to add layout files with the same name in your custom theme, such as the following: Magetop/default/Magento_Catalog/layout/catalog_product_view.xml

Overriding layouts: If the amount of customizations is large, you can use the overriding function for the needed layout file. This means that the new file that you place in the theme will be used instead of the parent theme layout file of base layout file. Copy extensive page layout or page configuration code and then modify what you want to change.

For example, to override catalog_product_view.xml, you need to make a folder like below:
Magetop/default/Magento_Catalog/layout/override/theme/Magento/blank/catalog_product_view.xml.

Basic layouts

The basic view of all Magento storefront pages in defined within two-page configuration layout files located in the Magento_Theme module.

–<Magento_Theme_module_dir>/view/frontend/layout/default.xml: defines the page layout

–<Magento_Theme_module_dir>/view/frontend/layout/default_head_blocks.xml: defines the scripts, images, and metadata included in a pages’ section.

We’ll update our theme folder like below:

app/design/frontend/Magetop/
  ├── default/
  │   ├── Magento_Theme/
  │   │   ├── Layout/
  │   │   │    ├── default.xml
  │   │   │    ├── default_head_blocks.xml
  │   │   ├── templates/
  │   │   │       ├── html/
  │   │   │       │     ├── hello.phtml
  │   ├── web/
  │   │     ├── css/
  │   │     │    ├── source/
  │   │     │    │     ├── _extend.less
  │   │     │    │     ├── _theme.less

Simplest override template to customize

Locate the template which is associated with the page or block you want to change, using template hints in developer tools.

Or maybe these would be located at:

app/code/<vendor_name>/<module_name>/view/frontend/templates/../templateFile.phtml or <parent_theme_dir>/<vendor_name>_<module_name>/templates/../templateFile.phtml

Copy templateFile.phtml to: <theme_dir>/<vendor_name>_<module_name>/templates/../ then Make the required changes.

Simplest create new template to customize

Add a template in your theme directory according to the template storing convention.

Create a template file: <theme_dir>/Magento_Theme/templates/html/hello.phtml then insert the following code:

<?php
echo "say Hello!"
?>

Assign your template to a block in the corresponding layout xml file. We’ll use default.xml assign our template. It should look like 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="header.container">
            <block class="Magento\Framework\View\Element\Template" name="test_file" template="Magento_Theme::html/hello.phtml"/>
        </referenceContainer>
    </body>
</page>

Simplest extend parent styles

Create file: <theme_dir>/web/css/source/_extend.less

Extending a theme using _extend.less is the simplest option when you want to add additional styles to what the parent theme already offers.

Simplest override parent styles

Create file: <theme_dir>/web/css/source/_theme.less

It is important to remember that your _theme.less file overrides the parent file _theme.less. So, copy all variables you need from the parent _theme.less, including those which will not be changed.

Refresh cache to see your changes applied.

This is Customize cover, illustration layout in Magento 2.

You can see the next post: How to create simple module to configure options for theme in Magento 2.

We hope this is useful blog for you.

Thank you for reading!

5 1 vote

Article Rating

Magetop Blog