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
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
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
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
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>
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
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