INTRO TO THEMING IN MAGENTO

Transcription

1 Summer Webinar Series August 10, 2010 INTRO TO THEMING IN MAGENTO What we ll cover today Magento concepts we ll cover: Multi theme set up Design packages Default and non- themes Fall-back logic and base package Components of a theme Page templates Block templates Layouts Starting steps to creating your own theme Demo tasks: Create a new design package Create theme directory structure Copy and modify files to modify theme Notes: Before working with themes, be sure to disable your cache Tools we won t cover but you need: Firebug Firefox add-on HTML/CSS editor of your choice FTP program of your choice 1

2 Magento Themes The Big Picture The multi-theme model Working with themes The base package and fall-back model What are Magento themes? In Magento, themes control: The visual aspects of your site design (skinning) CSS, images, design/ui-specific Javascript Many functional aspects of your site Which blocks/modules are available (layouts) Which data is shown and how (templates) Allows the presentation layer to be independent of business logic and functionality / theme /modern theme /iphone theme 2

3 Magento s store hierarchy Website Brand1 Brand2 Store Main store Parts store Main store Store View English Spanish English English Any of these entities can have a different package and/or theme assigned to it, or they can all share the same one More commonly, the main store in a set will be assigned the theme in a design package and slight variations for other store types will be handled in the non- themes for that design package Multiple themes for multiple stores Design packages contain the theme and any theme variants of that design Magento s design package contains several demo theme variants you can experiment with Design packages base brand1 brand2 Design packages are really just a collection of related themes Default themes blank varia?on1 Non- themes blue modern varia?on2 iphone 3

4 What that looks like in the Admin Panel ADMIN: System Configuration Design tab Design package Theme What that looks like in the file system Themes in Magento are made up of files in 2 sets of directories skin/frontend/ /frontend/ Images and CSS files for a theme are in skin/frontend/ Page templates and layout files for a theme are in /frontend/ skin directory design package themes in package directory design package themes in package skin directory directory 4

5 Understanding the base package Provides hooks to all of Magento s core functionality Cross-package fall-back point Allows your theme to contain ONLY changes from the base and not have to replicate and maintain all of the files Design packages base brand1 brand2 Default themes blank varia?on1 Non- themes blue modern varia?on2 iphone Theme fall-back logic in Magento Start Base package was introduced in CEv1.4 and EEv1.8. Prior versions do NOT have a cross package fall-back option Look for file in package_name/ theme_name/ Look for file in package_name/ / Look for file in base// Found? no no no Found? Found? Rendering error yes yes yes Display as indicated 5

6 Understanding Magento Theming Magento modules and themes Components of a Magento theme ~ directory structure ~ file types involved What s actually in a theme? Logical contents skin Visual layout info and files & UI-specific Javascript css images js layout template Page generation xml instructions for each module Content block.phtml files for each module Directory structure skin frontend package_name theme_name css js images frontend package_name theme_name layout template 6

7 Building pages with blocks and layouts in Magento header left main right Layout files (xml) footer Page templates (phtml) Content block templates (phtml) The page is not the base unit in Magento design Blocks are Content blocks are assigned to structural blocks (in page templates) by layout files 7

8 Modules that control sections of Magento websites Log in Account Dashboard Customer Account Functions Log out Content pages CMS Home Default top links CMS footer links Default system-generated footer links Categories Site map Search terms Adv Search Contact Contacts Subcats Catalog Catalog Search Search Results Product Pages Product Functions Shopping Cart Checkout Checkout Process Thank you Content block templates Content blocks category list callout store naviga?on poll news- leeer product lis?ng footer links Content blocks are the actual content and functionality of your store They are defined in frontend package_name theme_name layout template module1 module2 etc. 8

9 Layout files Content blocks assigned to their structural blocks Layout files assign the individual content blocks to structural blocks They are defined in frontend package_name theme_name layout module1.xml module2.xml etc. CSS handles the styling of these blocks Use template path hints to find module and file names ADMIN: System Configuration Developer tab Debug panel 9

10 Page templates & structural blocks Structural blocks Page templates define structural blocks which create the logical structure of your pages They are defined in frontend package_name theme_name layout page.xml template page Example: page.xml /frontend/base//layout/page.xml 10

11 Example: page/3column.phtml /frontend/base//template/page/3column.phtml Default page templates and structural blocks 3 columns 2 columns with left bar 2 columns with right bar header header header left content right left content content right footer footer footer 1 column Empty header content content footer frontend package_name theme_name layout template page 11

12 Steps to Creating a Magento Theme 0. Disable your cache 1. Make skin and directories for your design package and theme 2. In Admin Panel, set your store to use your theme 3. Make skin subdirectories for CSS and images 4. Make subdirectories for layout and template 5. Move only files you need to change into your design theme or create a local file with changes 12