Magento 2.0 supports a CSS-preprocessor called LESS. LESS allows using variables, mixins, functions and mathematical operations when writing styles. Using LESS significantly increases the productivity when developing and accompanying styles.
In the first part of “How To Create a Theme in Magento 2” we were talking about theme declaration, registration, applying in the admin panel and Composer.json file addition. Now it’s time to continue.
Let’s create a folder for theme static files. The structure should be following:
If everything relating to CSS, fonts, images and js folders is clear, there is a question about a source folder and its intended use.
Magento 2 incorporates LESS, a CSS pre-processor that simplifies the management of complex CSS files. To define styles of a Magento store, you can use both – CSS and LESS stylesheets.
If your theme inherits from the Magento out-of-the-box Blank or Luma theme, you can override the default LESS files.
As an example, we can create a _theme.less file with basic variables override in Magento UI. In the folder /lib/web/css/source/lib/variables/ in source files we can find default values for those variables which can be overridden. The module styles can be set in a _module.less file as well as for widgets it can be performed in a _widgets.less file. For minor corrections, it is possible to create a _extend.less file. So as an example we’re going to change a _theme.less file.
Now we have the following structure:
Theme logo definition
In Magento 2 logo “logo.svg” is located in <theme_dir>/web/images by default. Logo format is SVG by default.
In order to use your own logo, you should:
- If your logo is .svg, you should rename as logo.svg and put in <theme_dir> /web/images
- If your logo has another format, it should be declared. For logo declaration it’s necessary to add a file <theme>/Magento_Theme/layout/default.xml.
In this case, we extend the layout of a parent theme. Then in the layout, the data on logo should be added.
For example, the logo logo.png which has size 70×40 will be declared as:
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<argument name="logo_file" xsi:type="string">images/logo.png</argument>
<argument name="logo_img_width" xsi:type="number">70</argument>
<argument name="logo_img_height" xsi:type="number">40</argument>
The function is considered as rather useful in Magento 2. Product images configuration such as size, proportions, cutting, background color is described in the file <theme>/etc/view.xml. The file is obligatory, so in case it wasn’t inherited from Magento 2 default theme “luma” or “blank”, it would be necessary to copy from a default theme (values are not inherited).
Let’s consider the example. On the main page, products are displayed with the widget. Now decrease images from 240×300 to 200х200.
<view xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/view.xsd">
<image id="new_products_content_widget_grid" type="small_image">
new_products_content_widget_grid is unique within theme. Type small_image coincides with Small Image Role in admin part. Permitted values are image, small_image, swatch_image, swatch_thumb and thumbnail.
After saving an item, all images are cached. That’s why after size alteration a command php bin/magento catalog:images:resize can be executed for images regeneration.
As a result, we have the same “Luma” but with another logo and image size.
“Less” usage for changing styles
After a theme has been created, but before starting to change the styles, you should decide which LESS compilation mode should be used. There are two modes available in Magento:
– server-side compilation mode;
– client-side (recommended for theme development).
Client compilation is used during development mode, as all changes performed can be seen in a moment. A browser will compile every time when calling styles file. If it’s server compilation, you should remove folder contents pub/static and var/view_preprocessed manually. These actions can be optimized with Grunt. It tracks any changes in files, removes definite folders and compiles LESS automatically.
The compilation type can be changed in admin panel: Stores > Configuration > Advanced > Developer > Frontend Development Workflow > Workflow type:
Let’s apply server compilation which is considered as default. We’re going to set background color as well as fonts in the file _theme.less.
@panel__background-color: darken(@page__background-color, 20%);
@font-family__base: 'Arial', sans-serif;
Since we’ve applied server-side compilation mode, after changes we need to remove directories contents /pub/static/frontend/Belvg/air/en_US и var/view_preprocessed.
Let’s observe the changes:
As we can see, the template structure in Magento 2 pretty differs from Magento 1.x. The structure has been improved, so now it’s much more logical, all the theme files are structured, which is very good for search.