set the basics right                             for better pasta                          twitter: hans2103              ...
boring stuff first                          http://www.flickr.com/photos/swiv/5719738832Wednesday, 30 May, 2012
endless possibilitiesWednesday, 30 May, 2012
temporary design changeWednesday, 30 May, 2012
set your theme                          based on default MagentoWednesday, 30 May, 2012
first fallback                                                    set your theme                                          ...
does file exist in   yes                          package_name/                      How stuff works                       ...
default                          defaultWednesday, 30 May, 2012
Wednesday, 30 May, 2012
non-defaultWednesday, 30 May, 2012
blueWednesday, 30 May, 2012
defaultWednesday, 30 May, 2012
blueWednesday, 30 May, 2012
does file exist in   yes                          package_name/                      How stuff works                       ...
an existing theme                          http://www.flickr.com/photos/popilop/331357312Wednesday, 30 May, 2012
create your own                Page generation xml instructions                                      for each module      ...
a well coded theme   should have to following traits          • a single layout file, named local.xml, where all           ...
Remove callouts and rarely used stuff                          Add the local stylesheet                                   ...
not much is changedWednesday, 30 May, 2012
prevent unwanted indexation like Sitemap, Search Results and more                                                         ...
timesaver                          http://www.flickr.com/photos/maigh/2141921845Wednesday, 30 May, 2012
Magento backend                          goto System >> Configuration                                         goto Develope...
Magento backend                          goto System >> Configuration                                        goto Developer...
also M1.7                          http://bit.ly/DeveloperToolbarWednesday, 30 May, 2012
find the extension key                                 use it to install                                          done    ...
enabled by default                                         scroll down to DeveloperWednesday, 30 May, 2012
click and goWednesday, 30 May, 2012
click and goWednesday, 30 May, 2012
from the book: “I always get my sin”      a child can do the laundryWednesday, 30 May, 2012
be aware           http://yourmagentosite.com/developertoolbar/           index/hints/enabled/1/type/front/               ...
analytics                               http://www.flickr.com/photos/playerdue/5285272605/Wednesday, 30 May, 2012
Wednesday, 30 May, 2012
frontend/base/default/template/                          catalog/layer/filter.phtmlWednesday, 30 May, 2012
add _gaq.push onClick                          important to strip html tagsWednesday, 30 May, 2012
Wednesday, 30 May, 2012
see results in Google AnalyticsWednesday, 30 May, 2012
add more                          four ways to add a link                              http://www.flickr.com/photos/farrusk...
Wednesday, 30 May, 2012
do not forget to activateWednesday, 30 May, 2012
Wednesday, 30 May, 2012
http://www.flickr.com/photos/andrec/2893549851Wednesday, 30 May, 2012
Wednesday, 30 May, 2012
Lorem IpsumWednesday, 30 May, 2012
M 1.7                          <Wednesday, 30 May, 2012
M 1.7                                                                   <                                      a call for ...
URL key from CMS page                          app/design/frontend/yourpackage/yourtheme/                             temp...
M 1.7Wednesday, 30 May, 2012
M 1.7                                      a call for a template file     app/design/frontend/base/layout/page.xmlWednesda...
URL key from CMS page                          app/design/frontend/yourpackage/yourtheme/                               te...
DONE!!Wednesday, 30 May, 2012
http://www.flickr.com/photos/boklm/486678763Wednesday, 30 May, 2012
M 1.7Wednesday, 30 May, 2012
M 1.7                              call for static block in backend                          app/design/frontend/yourpacka...
M 1.7                          create new static blockWednesday, 30 May, 2012
M 1.7     {{store direct_url="loremipsum"}}Wednesday, 30 May, 2012
DONE!!Wednesday, 30 May, 2012
http://www.flickr.com/photos/boklm/486646798Wednesday, 30 May, 2012
M 1.7Wednesday, 30 May, 2012
no call for a template file        app/design/frontend/base/layout/page.xmlWednesday, 30 May, 2012
URL key from CMS page                          app/design/frontend/yourpackage/                             yourtheme/layo...
DONE!!Wednesday, 30 May, 2012
http://www.flickr.com/photos/boklm/486676439Wednesday, 30 May, 2012
Wednesday, 30 May, 2012
Wednesday, 30 May, 2012
Wednesday, 30 May, 2012
Wednesday, 30 May, 2012
Wednesday, 30 May, 2012
Wednesday, 30 May, 2012
thank your for your time                                http://about.me/hans2103    hans2103    http://slideshare.net/hans...
Upcoming SlideShare
Loading in …5
×

Magento Theme - set the basics right - mm12nl

6,895 views
6,793 views

Published on

Magento theming - a presentation about how to create magento themes. Given during Meet Magento 2012

Published in: Education, Technology
3 Comments
3 Likes
Statistics
Notes
No Downloads
Views
Total views
6,895
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
50
Comments
3
Likes
3
Embeds 0
No embeds

No notes for slide

Magento Theme - set the basics right - mm12nl

  1. 1. set the basics right for better pasta twitter: hans2103 Peter OggWednesday, 30 May, 2012
  2. 2. boring stuff first http://www.flickr.com/photos/swiv/5719738832Wednesday, 30 May, 2012
  3. 3. endless possibilitiesWednesday, 30 May, 2012
  4. 4. temporary design changeWednesday, 30 May, 2012
  5. 5. set your theme based on default MagentoWednesday, 30 May, 2012
  6. 6. first fallback set your theme based on default ModernWednesday, 30 May, 2012
  7. 7. does file exist in yes package_name/ How stuff works theme_name/ Magento fall-back logic no does file exist in yes package_name/ display default/ no does file exist in yes base/ default/ no rendering errorWednesday, 30 May, 2012
  8. 8. default defaultWednesday, 30 May, 2012
  9. 9. Wednesday, 30 May, 2012
  10. 10. non-defaultWednesday, 30 May, 2012
  11. 11. blueWednesday, 30 May, 2012
  12. 12. defaultWednesday, 30 May, 2012
  13. 13. blueWednesday, 30 May, 2012
  14. 14. does file exist in yes package_name/ How stuff works theme_name/ Magento fall-back logic no does file exist in yes package_name/ display default/ no does file exist in yes base/ default/ no rendering errorWednesday, 30 May, 2012
  15. 15. an existing theme http://www.flickr.com/photos/popilop/331357312Wednesday, 30 May, 2012
  16. 16. create your own Page generation xml instructions for each module app/design/frontend/yourpackage/yourtheme/layout app/design/frontend/yourpackage/yourtheme/template Content block .phtml files for each module skin/frontend/yourpackage/yourtheme/css skin/frontend/yourpackage/yourtheme/images Visual layout info and files & UI-specific JavascriptWednesday, 30 May, 2012
  17. 17. a well coded theme should have to following traits • a single layout file, named local.xml, where all layout updates are placed. • no layout files with the same name as any layout file in the base theme • no css files with the same name as any css file in the default skin create local.css • no .phtml template files, except for those that were modified to support the new theme. usually this number will be very smallWednesday, 30 May, 2012
  18. 18. Remove callouts and rarely used stuff Add the local stylesheet your theme starts with local.xmlWednesday, 30 May, 2012
  19. 19. not much is changedWednesday, 30 May, 2012
  20. 20. prevent unwanted indexation like Sitemap, Search Results and more add more to your with local.xml thanks to Joachim HoutmanWednesday, 30 May, 2012
  21. 21. timesaver http://www.flickr.com/photos/maigh/2141921845Wednesday, 30 May, 2012
  22. 22. Magento backend goto System >> Configuration goto Developer change Scope expand Debug set Template Path Hints to Yes save Config (clean Cache) Magento frontend refresh pageWednesday, 30 May, 2012
  23. 23. Magento backend goto System >> Configuration goto Developer change Scope expand Debug set Template Path Hints to No save Config (clean Cache) Magento frontend refresh pageWednesday, 30 May, 2012
  24. 24. also M1.7 http://bit.ly/DeveloperToolbarWednesday, 30 May, 2012
  25. 25. find the extension key use it to install done I’m a UNIX geek fond of SSHWednesday, 30 May, 2012
  26. 26. enabled by default scroll down to DeveloperWednesday, 30 May, 2012
  27. 27. click and goWednesday, 30 May, 2012
  28. 28. click and goWednesday, 30 May, 2012
  29. 29. from the book: “I always get my sin” a child can do the laundryWednesday, 30 May, 2012
  30. 30. be aware http://yourmagentosite.com/developertoolbar/ index/hints/enabled/1/type/front/ more serious http://yourmagentosite.com/ developertoolbar/index/url/enabled/1/ broken links all over the place!Wednesday, 30 May, 2012
  31. 31. analytics http://www.flickr.com/photos/playerdue/5285272605/Wednesday, 30 May, 2012
  32. 32. Wednesday, 30 May, 2012
  33. 33. frontend/base/default/template/ catalog/layer/filter.phtmlWednesday, 30 May, 2012
  34. 34. add _gaq.push onClick important to strip html tagsWednesday, 30 May, 2012
  35. 35. Wednesday, 30 May, 2012
  36. 36. see results in Google AnalyticsWednesday, 30 May, 2012
  37. 37. add more four ways to add a link http://www.flickr.com/photos/farruska/208926935Wednesday, 30 May, 2012
  38. 38. Wednesday, 30 May, 2012
  39. 39. do not forget to activateWednesday, 30 May, 2012
  40. 40. Wednesday, 30 May, 2012
  41. 41. http://www.flickr.com/photos/andrec/2893549851Wednesday, 30 May, 2012
  42. 42. Wednesday, 30 May, 2012
  43. 43. Lorem IpsumWednesday, 30 May, 2012
  44. 44. M 1.7 <Wednesday, 30 May, 2012
  45. 45. M 1.7 < a call for a template file app/design/frontend/base/layout/catalog.xmlWednesday, 30 May, 2012
  46. 46. URL key from CMS page app/design/frontend/yourpackage/yourtheme/ template/catalog/navigation/top.phtmlWednesday, 30 May, 2012
  47. 47. M 1.7Wednesday, 30 May, 2012
  48. 48. M 1.7 a call for a template file app/design/frontend/base/layout/page.xmlWednesday, 30 May, 2012
  49. 49. URL key from CMS page app/design/frontend/yourpackage/yourtheme/ template/page/html/topmenu.phtmlWednesday, 30 May, 2012
  50. 50. DONE!!Wednesday, 30 May, 2012
  51. 51. http://www.flickr.com/photos/boklm/486678763Wednesday, 30 May, 2012
  52. 52. M 1.7Wednesday, 30 May, 2012
  53. 53. M 1.7 call for static block in backend app/design/frontend/yourpackage/ yourtheme/template/page/html/Wednesday, 30 May, 2012
  54. 54. M 1.7 create new static blockWednesday, 30 May, 2012
  55. 55. M 1.7 {{store direct_url="loremipsum"}}Wednesday, 30 May, 2012
  56. 56. DONE!!Wednesday, 30 May, 2012
  57. 57. http://www.flickr.com/photos/boklm/486646798Wednesday, 30 May, 2012
  58. 58. M 1.7Wednesday, 30 May, 2012
  59. 59. no call for a template file app/design/frontend/base/layout/page.xmlWednesday, 30 May, 2012
  60. 60. URL key from CMS page app/design/frontend/yourpackage/ yourtheme/layout/local.xmlWednesday, 30 May, 2012
  61. 61. DONE!!Wednesday, 30 May, 2012
  62. 62. http://www.flickr.com/photos/boklm/486676439Wednesday, 30 May, 2012
  63. 63. Wednesday, 30 May, 2012
  64. 64. Wednesday, 30 May, 2012
  65. 65. Wednesday, 30 May, 2012
  66. 66. Wednesday, 30 May, 2012
  67. 67. Wednesday, 30 May, 2012
  68. 68. Wednesday, 30 May, 2012
  69. 69. thank your for your time http://about.me/hans2103 hans2103 http://slideshare.net/hans2103 http://www.flickr.com/photos/trasimac/1217071176Wednesday, 30 May, 2012

×