Themes in Magento 2 are set up a bit differently than Magento 1. Some of these changes are as follows:
In this sample theme, the files are located in app/design/frontend/<Vendor>/<Theme>
. When a theme is installed through Composer, it will be installed in the vendor directory.
In order to work with themes, you should have a basic knowledge of XML, HTML, CSS, and Less as these are used to build your theme.
The following are the steps to create a new theme:
app/design/frontend/Genmato/default/theme.xml
<?xml version="1.0"?> <theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd"> <title>M2 Cookbook Sample Theme</title> <parent>Magento/blank</parent> <media> <preview_image>media/preview.png</preview_image> </media> </theme>
preview.png
for how your theme will look like. (This file needs to be present, but you can start with a blank file and replace this later when your theme is done.) Place this preview image under app/design/frontend/Genmato/default/media/
.composer.json
file:app/design/frontend/Genmato/default/composer.json
{ "name": "genmato/sample-theme", "description": "Genmato Sample Theme", "require": { "php": "~5.5.0|~5.6.0|~7.0.0", "magento/theme-frontend-blank": "100.0.*", "magento/framework": "100.0.*" }, "type": "magento2-theme", "version": "1.0.0", "license": [ "OSL-3.0", "AFL-3.0" ], "autoload": { "files": [ "registration.php" ] } }
registration.php
:app/design/frontend/Genmato/default/registration.php
<?php MagentoFrameworkComponentComponentRegistrar::register( MagentoFrameworkComponentComponentRegistrar::THEME, 'frontend/Genmato/default', __DIR__ );
app/design/frontend/Genmato/default
web/ web/css/source/ web/fonts/ web/images/ web/js/
app/design/frontend/Genmato/default/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> <referenceBlock name="logo"> <arguments> <argument name="logo_file" xsi:type="string">images/genmato.svg</argument> <argument name="logo_img_width" xsi:type="number">372</argument> <argument name="logo_img_height" xsi:type="number">84</argument> </arguments> </referenceBlock> <referenceBlock name="report.bugs" remove="true"/> </body> </page>
app/design/frontend/Genmato/default/etc/view.xml
<?xml version="1.0"?> <view xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/view.xsd"> <media> <images module="Magento_Catalog"> <image id="category_page_grid" type="small_image"> <width>240</width> <height>300</height> </image> </images> </media> </view>
app/design/frontend/Genmato/default/web/css/source/_theme.less
@page__background-color: @color-gray20; @primary__color: @color-gray80; @genmato__green: #009A4E; @genmato__blue: #0089CF; @link__color: @genmato__green; @link__hover__color: darken(@link__color, 10%); @button-primary__background: @genmato__green; @button-primary__border: darken(@genmato__green, 40%); @button-primary__color: @color-black; @button-primary__hover__background: darken(@genmato__green, 10%); @button-primary__hover__border: darken(@genmato__green, 50%); @button-primary__hover__color: @color-black; @navigation__background: @genmato__blue;
bin/magento cache:clean
bin/magento setup:static-content:deploy
You can rerun this command every time you make changes to your theme and need to regenerate the CSS from the Less files. Make sure that you remove your theme-generated files from the following locations:
pub/static/frontend/<Theme Vendor>
var/view_preprocessed/css/frontend/<Theme Vendor>
Otherwise, the changes in the Less files in your theme will not be used as the preprocessor checks if there is already a generated CSS file available. Check the Using Grunt for CSS changes recipe of this chapter on how to use live reloading of CSS changes without the need of recompiling.
Stores | [General] Design | Design Theme
This can be seen in the following screenshot:
Choose the newly created theme from the drop-down list and save the configuration change.
The theme configuration in Magento 2 is more powerful than in Magento 1, allowing you to have better control on changing elements that are available from installed modules. The way in which the fallback is configured makes it easier to create different variants of a theme by defining the parent theme only. During compilation of the theme, all the files are gathered from the right parent and merged into your theme. This improves page rendering as there is no more layout merging done. All static elements such as CSS and images are pregenerated. Building themes for distribution and changing them afterward is now also much easier and can be done without modifying the bought theme.
During the bin/magento setup:static-content:deploy
command, the system collects all the Less files from the following:
Next, it will use the built-in PHPLess
module to merge all these files into the configured CSS files. In this example, it generated a styles-m.css
and styles-l.css
as configured in the blank theme (Magento/blank/Magento_Theme/default_head_blocks.xml
):
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <head> <css src="css/styles-m.css" /> <css src="css/styles-l.css" media="screen and (min-width: 768px)"/> <css src="css/print.css" media="print" /> </head> </page>
The styles files are built from styles-m.less
and styles-l.less
(found in Magento/blank/web/css/
) and define all the Less files that should be included. The two files are the definition files for the mobile and desktop versions of the layout. These external Less files are included through the default @import
command used in Less. They also contain a special @magento_import
command (which has to be commented out in order to avoid breaking the Less preprocessor). During compilation of the theme, Magento replaces these imports with a regular @import
command but with a resolved path to the corresponding file location based on the fallback file found. During compilation, all files are stored at the pub/static/frontend/<Vendor>/<theme>
location and served as static files to improve load times.
Creating a variant of a theme, for example, for seasonal promotions, is easy to add. Here, it is only necessary to create a new theme that has a parent to the default/normal theme; all separate themes need to be located in their own directories. The theme only needs the files that are different from the parent theme; this can be just CSS changes or static files used as backgrounds in the theme.
In Magento 2, the layout files are split per layout handle; this makes it easier to modify a specific page only. A layout handle is a unique identifier for the layout definitions that are used to build the page. There are three different types of layout handles:
customer_account_create
)catalog_product_view_type_downloadable
)Every file is located in the corresponding Module directory, so for the customer_account_create
page handle, the layout file would be located in [Theme Directory]/Magento_Customer/layout/customer_account_create.xml
. In the design and building of the pages, the layout is configured based on containers
and defines the basic structure of a page (such as the header, footer, and columns—left, main, and right). In the containers, the content is added using blocks
; every block has a template and block class assigned that is used to render the HTML for that block. It is possible to have multiple blocks assigned to a single container, allowing you to assign the order in which they must be shown. During generation, all layout files are merged together for each layout handle, allowing you to modify the output in the theme without the need of including the complete original files from the module.
Template files are phtml
files containing the HTML and PHP code to build the specified content. In order to change or add data with a template in your theme, you will need to copy the original template file to your theme, for example, to change the account registration form, the <customer-module-dir>/view/frontend/templates/form/register.phtml
file needs to be copied to <theme-dir>/Magento_Customer/templates/form/register.phtml
and can be edited there.
In Magento 2, there is a UI library available that includes basic interface CSS-class elements that can be used in the templates. The following components are available:
The CSS definition of all these elements can be altered to find out what variables to alter; check out <magento-root>/lib/web/css/source/lib/variables
. In order to modify the way an element is rendered, you can look up the required variable and add your own definition in the <theme-directory>/web/css/source/_theme.less
theme file.
18.191.235.8