PART 1.1.3 – Blank and Luma

Magento’s default installation contains blank and Luma themes

•  The blank theme is a basis for custom theme creation

•  Luma is a demonstration theme which inherits from the blank theme

A parent and a child theme can belong to different vendors. You can override static assets, templates, or layouts, or extend layouts.

 

The blank and Luma themes provide hooks to all of Magento’s core functionality.

The blank theme is the parent theme to Luma

• ONLY files being changed should be incorporated into custom themes

• No need to replicate and maintain all of the files

When creating a custom theme, it’s necessary to explicitly ensure that a parent theme is named

 

A parent and a child theme can belong to different vendors. For example, your custom theme can inherit from the Magento blank theme.

Should I use blank or Luma?

Some UX base the design on Luma, in that case Luma might be a good starting point. In previous versions of the Magento devdcos They stated that Luma was not supposed to be used as a parent theme.

Blank is more blank than luma but not really blank, provides a fairly good starting point.

Build your own theme without fallback is the third option until a proper Vaimo boilerplate theme exist.

 

 

blank

Luma

clean/custom

pros

fairly blank starting point

all views have styling that works (well mostly…)

tends to be used by UX more

is more polished than blank

full freedom

cons

you’ll fight the less structure

you’ll fight the existing mixins and variables

another level of fallback

you’ll fight the less structure

you’ll fight the existing mixins and variables

you need to add styling for everything on all pages

can be hard to estimate the amount of work needed

most modules are tested using blank or Luma

Advertisements

PART 1.1.2 – Fallback and theme inheritance

Theme structure at a glance:

 

Magento 2 compared to Magento 1 only has one folder for all theme files. 

Magento 1

app/design

skin

layout

css

template

images

locale

js

Magento 2

Vendor/themename (or vendor/vaimo/theme-name)

Vendor_Modules (eg Magento_Catalog)

etc

web

i18n

theme.xml

registration.php

Fallback

is defined in theme.xml. Theme xml is used by Magento to recognise the theme. 

theme.xml

1

2

3

4

5

6

7

<theme xmlns:xsi=http://www.w3.org/2001/XMLSchema-instance” xsi:noNamespaceSchemaLocation=“urn:magento:framework:Config/etc/theme.xsd”>

    <title>Frontend Workshop</title> <!– your theme’s name –>

    <parent>Magento/blank</parent> <!– the parent theme, in case your theme inherits from an existing theme –>

    <media>

        <preview_image>media/preview.jpg</preview_image> <!– the path to your theme’s preview image –>

    </media>

</theme>

 

Important difference compared to M1 – Layout files are merged! 

There is no local.xml in themes in M2. In some cases layout files need to be overridden, this can be done by adding an override folder inside layout

 

Files in web or templates are not merged. 

PART 1.1.1 – Theme file structure

  • Magento 2 file structure
  • Magento 2’s Theme File Structure
  • Admin settings
  • Themes: Magento 1 vs. Magento 2
  • theme-module vs. app/design

Magento 2 file structure

/app/code

Contains Magento and third-party program code

/app/design

Contains designs for Magento storefronts

/app/etc

Contains the base configuration for Magento installation

/app/i18n

Contains bare configuration files used for language and wording overrides

/bin

Contains Magento command-line utility

/pub

Contains all static files, such as images, CSS and JavaScript. This directory is published with Magento scripting functionality and should not be modified manually

/pub/media

Contains all uploaded media, such as product images

/pub/static

Contains static theme-specific CSS, JavaScript, fonts, and images

/var

Contains temporary items such as error reports, cache, sessions, and import/export files

index.php

Important routing and access files

.htaccess

Apache configuration file

Removing .htaccess from /pub directory can cause problems with rendering styles. In case, your styles are not generated, make sure, you didn’t remove .htaccess file from /pub directory.

Magento 2’s Theme File Structure

Vendor_Modules (e.g. Magento_Theme)

Contains dynamic and static theme components overriding core theme files

etc

Contains theme-specific data configuration

i18n

Contains CSV files used for language and wording overrides

media

Contains the screenshot provided for the theme list in the Admin panel

web

Contains static theme-specific CSS, JavaScript, fonts, and images

composer.json

Describes theme dependencies and some metainformation

theme.xml

Contains basic meta-information, such as the theme name and the parent theme name

registration.php

Declares a theme as a system component

Admin settings

Themes: Magento 1 vs. Magento 2

 

theme-module vs. app/design

There are 2 ways with working with Magento 2’s theme. The theme on separate repository and the theme on project repository.