Theming in magento 2. Knowledge sharing session on Magento 2 theming by Suman KC at Ebpearls Pty Ltd. Presentation includes theming in magento2.

1. This is
Magento 2 Theming
KSS (Knowledge sharing session) by Suman KC

2. I am Suman KC
Magento developer
www.linkedin.com/in/sumankc
www.sumankc.com
Hello!

3. Topics
◉Introduction
◉Themes
◉Layout
◉Templates
◉CSS

4. Introduction
Magento & Magento 2 intro leading to theming
aspects
1

5. ◉eCommerce platform
◉Huge
◉Unique
◉Poor documentation
◉Edition(Community & enterprise)
Magento in general

6. 14K+ Files & 5K+ Folders
That’s a lot of files & directory
109MBand that's before you add themes, modules and all your image libraries
300+ tablesProduct & category alone has 50+ tables relations
Magento1.9.2

7. Magento views are separated into
Magento views
LayoutsBlocks Templates

8. Themes
Creation, Structure, Configuration & Inheritance
2

9. 1. Prerequisites
◉ Not modify out of box Magento themes
[Compatibility,upgradability & easy maintenance]
◉ Set magento application to developer mode
[mode influences the way static files are cached]
Creating a theme

10. app/design/frontend/<Vendor>/
├── <theme>/
│ ├── etc/
│ │ ├── view.xml
│ ├── web/
│ │ ├── images
│ │ │ ├── logo.svg
│ ├── registration.php
│ ├── theme.xml
│ ├── composer.json
Theme directory structure

11. <theme_dir>/
├── <Vendor>_<Module>/
│ ├── web/
│ │ ├── css/
│ │ │ ├── source/
│ ├── layout/
│ │ ├── override/
│ ├── templates/
├── etc/
├── i18n/
├── media/
├── web/
│ ├── css/
│ │ ├── source/
│ ├── fonts/
│ ├── images/
│ ├── js/
├── composer.json
├── registration.php
├── theme.xml
TypicalMagentotheme
directory

12. Apply a theme
1. In Admin, go to Stores > Configuration > Design.
2. In the Store View drop-down field, select the store view where you
want to apply the theme.
3. On the Design Theme tab, select your newly created theme in the
Design Theme drop-down.
4. Click Save Config.
5. If caching is enabled, clear the cache.
6. To see your changes applied, reload the store front pages.
Configure a theme (admin section)

13. The properties of product images used on the storefront are stored in
the view.xml configuration file.
<theme_dir>/etc/view.xml
Image properties are configured for each image type defined by the id
and type attributes of the <image> element:
<images module="Magento_Catalog">
<image id="unique_image_id" type="image_type">...</image>
<images/>
Configure image properties

14. ◉ Set a parent theme
◉ Override view.xml file
◉ Override static assets
Theme inheritance
◉ Override templates
◉ Extend Layouts
◉ Override Layouts

15. ◉ Current theme static files: <theme_dir>/web/
◉ Ancestor’s static files, recursively, until a theme with no parent is
reached: <parent_theme_dir>/web/
Module context
◉ Current theme module static files
<theme_dir>/<Namespace>_<Module>/web/
◉ Ancestor themes module static files, recursively, until a theme with
no ancestor is reached:
<parent_theme_dir>/<Namespace>_<Module>/web/
Override static assets

16. Fallback schema
◉ Current theme templates:
<theme_dir>/<Namespace>_<Module>/templates
◉ Ancestors themes templates, recursively, until a theme with no
ancestor is reached:
<parent_theme_dir>/<Namespace>_<Module>/templates
◉ Module templates: <module_dir>/view/frontend/templates
Override templates

17. The system collects layout files in the following order
◉ Current theme layouts: <theme_dir>/<Vendor>_<Module>/layout/
◉ Ancestors themes <parent_theme_dir>/<Vendor>_<Module>/layout/
◉ Module templates: <module_dir>/view/frontend/templates
◉ Module layouts for the frontend area:
<module_dir>/view/frontend/layout/
◉ Module layouts for the base area: <module_dir>/view/base/layout/
Extend Layouts

18. To override the instructions from an ancestor theme layout file:
● Create a layout file with the same name in the
<theme_dir>/<Vendor>_<Module>/layout/override/theme/<Vendor>/
<ancestor_theme> directory.
*Though overriding layouts is not recommended, it is still possible, and might
be a solution for certain customization tasks.
Overriding Layouts

19. Layout
Instruction, extending, overriding and Customizations
3

20. ◉NO local.xml file - to modify, make a new xml
file with same name
◉All attributes & definitions from origianl
module will be inherited
◉move action - great feature of new XML
◉Structural & content blocks to containers &
blocks
Layouts

21. ◉ Common layout instructions to customize layout
Layout instructions
◉<block>
◉<container>
◉<before> & <after>
◉<action>
◉<referenceBlock>
and
<referenceContainer
>
◉<move>
◉<remove>
◉<update>
◉<argument>

22. ◉ Container is a structure without content which holds other
blocks and containers
◉ You can specify HTML attributes...
◉ When extending, we have referenceBlock &
referenceContainer
Containers and blocks

23. ◉ Updates in <referenceBlock> & <referenceContainer> are
applied to the corresponding <block> or <container>.
◉ Eg. if you make a reference by <referenceBlock name=”right”>,
you are targeting the block <block name=”right”>
◉ Attributes = remove & display, values = true/false
◉ <referenceBlock name="block.name" remove="true" />
<referenceBlock> & <referenceContainer>

24. ◉ <move> helps moving elements to other location without the
need to unset or removing from one place
<move element="name.of.an.element" destination="name.of.destination.element"
as="new_alias" after="name.of.element.after"
before="name.of.element.before"/>
◉ <remove> to remove static resource linked in a page <head
and to remove blocks & containers
<head>
<!-- Remove local resources -->
<remove src="css/styles-m.css" />
<move> & <remove>

25. Extend a layout

26. Overriding layouts

27. Overriding layouts (from parent theme)

28. 1. Set page layout
<page layout="2columns-left" xmlns:xsi="" xsi:noNamespaceSchemaLocation="">
...
</page>
2. Include/remove static resources
<page xmlns:xsi="" xsi:noNamespaceSchemaLocation="">
<head>
<!-- Add local resources -->
<css src="css/my-styles.css"/>
<css src="css/ie-9.css" ie_condition="IE 9" />
<remove src="my-js.js"
Layout Customization examples

29. 3. Create a container - Reference a container
<container name="some.container" as="someContainer" label="Some Container" htmlTag="div"
htmlClass="some-container" />
<referenceContainer name="header.panel">
<block class="MagentoFrameworkView…”>....</block>
4. Create a block - Reference block
<block class="MagentoCatalogBlockProductViewDescription" name="product.info.sku"
template="product/view/attribute.phtml" after="product.info.type">
<arguments>...</arguments>
</block>
<referenceBlock name="logo">...</referenceBlock>
Layout Customization examples

30. Templates
Basic concepts, customizations & overriding
4

31. ◉ Template hint - to locate template(store> config > advanced > developer
> debug > enable template)
◉ Copy template to your theme following convention
◉ Make required changes
For eg. form inside
<Magento_Review_module_dir>/view/frontend/templates/form.phtml
app/design/frontend/OrangeCo/orange/Magento_Review/templates
Template customization walkthrough

32. ◉ Templates are usually initiated in layout files.
◉ Each layout block has an associated template.
◉ The template is specified in the template attribute of the layout
instruction. For example, from
<Magento_Catalog_module_dir>/view/frontend/layout/catalog_category_view.xml
:
<block class="MagentoCatalogBlockCategoryView" name="category.image"
template="Magento_Catalog::category/image.phtml"/>
Template initiation

33. Templates are stored in the following locations:
● Module templates:
<module_dir>/view/frontend/templates/<path_to_templates>
● Theme templates:
<theme_dir>/<Namespace>_<Module>/templates/<path_to_templates>
Conventional template location

34. Customize email templates using theme
◉ Template fallback is supported for email templates
◉ For eg, to override the New Order email template, create a template
named order_new.html in the <theme_dir>/Magento_Sales/email
◉ Customize using Magento Admin
◉ In the Magento Admin, navigate to MARKETING > Communications > Email
Templates
◉ Click Add New Template.
Customizing email templates

35. CSS
Include, preprocessor & Magento UI Library
5

36. In the Magento application, CSS files are included in layout files.
◉ Include css in
<Magento_Blank_theme_dir>/Magento_Theme/layout/default_head_blocks.xml
◉ <page xmlns:xsi="" xsi:noNamespaceSchemaLocation="">
<head>
<css src="css/styles-m.css" />
◉ Module-specific styles - /<Namespace>_<Module>/web/css
◉ web/css - styles-m.less, styles-l.less, _styles.less
Include CSS

37. how stylesheets are preprocessed and compiled to CSS
◉ Server-side LESS compilation
default compilation mode, only option for production mode, Compilation
performed server, using the LESS PHP library.
◉ Client-side LESS compilation
When your application is not in the production mode, you can set Magento
to compile .less files in a browse
Backend : Stores > Configuration > ADVANCED > Developer [Store View drop-down field,
select Default Config.] Front-end development workflow, in the Workflow type
Preprocessor (LESS)

38. The Magento UI library is a flexible LESS-based frontend library designed
to assist Magento theme developers
● actions-toolbar
● breadcrumbs
● buttons
● drop-downs
● Forms.. And so on
Magento UI Library

39. You can find the Magento UI library under lib/web/css.
Magento UI Library location

40. Any questions ?
Appreciate your participation !!
Thanks!

41. ◉ Magento 2 frontend developers guide
◉ Sessiondigital & Inchoo articles
Credit
◉Presentation template by SlidesCarnival
◉Prepared slides using Google Slides
Frontend Demo: https://iwdagency.com/magento2/
Backend Demo: https://iwdagency.com/magento2/admin/
User: demo
Pass: demo123
Reference