Magento Theme - set the basics right - mm12nl

  • 6,014 views
Uploaded on

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

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

More in: Education , Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to like this
No Downloads

Views

Total Views
6,014
On Slideshare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
42
Comments
2
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. set the basics right for better pasta twitter: hans2103 Peter OggWednesday, 30 May, 2012
  • 2. boring stuff first http://www.flickr.com/photos/swiv/5719738832Wednesday, 30 May, 2012
  • 3. endless possibilitiesWednesday, 30 May, 2012
  • 4. temporary design changeWednesday, 30 May, 2012
  • 5. set your theme based on default MagentoWednesday, 30 May, 2012
  • 6. first fallback set your theme based on default ModernWednesday, 30 May, 2012
  • 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. default defaultWednesday, 30 May, 2012
  • 9. Wednesday, 30 May, 2012
  • 10. non-defaultWednesday, 30 May, 2012
  • 11. blueWednesday, 30 May, 2012
  • 12. defaultWednesday, 30 May, 2012
  • 13. blueWednesday, 30 May, 2012
  • 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. an existing theme http://www.flickr.com/photos/popilop/331357312Wednesday, 30 May, 2012
  • 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. 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. Remove callouts and rarely used stuff Add the local stylesheet your theme starts with local.xmlWednesday, 30 May, 2012
  • 19. not much is changedWednesday, 30 May, 2012
  • 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. timesaver http://www.flickr.com/photos/maigh/2141921845Wednesday, 30 May, 2012
  • 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. 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. also M1.7 http://bit.ly/DeveloperToolbarWednesday, 30 May, 2012
  • 25. find the extension key use it to install done I’m a UNIX geek fond of SSHWednesday, 30 May, 2012
  • 26. enabled by default scroll down to DeveloperWednesday, 30 May, 2012
  • 27. click and goWednesday, 30 May, 2012
  • 28. click and goWednesday, 30 May, 2012
  • 29. from the book: “I always get my sin” a child can do the laundryWednesday, 30 May, 2012
  • 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. analytics http://www.flickr.com/photos/playerdue/5285272605/Wednesday, 30 May, 2012
  • 32. Wednesday, 30 May, 2012
  • 33. frontend/base/default/template/ catalog/layer/filter.phtmlWednesday, 30 May, 2012
  • 34. add _gaq.push onClick important to strip html tagsWednesday, 30 May, 2012
  • 35. Wednesday, 30 May, 2012
  • 36. see results in Google AnalyticsWednesday, 30 May, 2012
  • 37. add more four ways to add a link http://www.flickr.com/photos/farruska/208926935Wednesday, 30 May, 2012
  • 38. Wednesday, 30 May, 2012
  • 39. do not forget to activateWednesday, 30 May, 2012
  • 40. Wednesday, 30 May, 2012
  • 41. http://www.flickr.com/photos/andrec/2893549851Wednesday, 30 May, 2012
  • 42. Wednesday, 30 May, 2012
  • 43. Lorem IpsumWednesday, 30 May, 2012
  • 44. M 1.7 <Wednesday, 30 May, 2012
  • 45. M 1.7 < a call for a template file app/design/frontend/base/layout/catalog.xmlWednesday, 30 May, 2012
  • 46. URL key from CMS page app/design/frontend/yourpackage/yourtheme/ template/catalog/navigation/top.phtmlWednesday, 30 May, 2012
  • 47. M 1.7Wednesday, 30 May, 2012
  • 48. M 1.7 a call for a template file app/design/frontend/base/layout/page.xmlWednesday, 30 May, 2012
  • 49. URL key from CMS page app/design/frontend/yourpackage/yourtheme/ template/page/html/topmenu.phtmlWednesday, 30 May, 2012
  • 50. DONE!!Wednesday, 30 May, 2012
  • 51. http://www.flickr.com/photos/boklm/486678763Wednesday, 30 May, 2012
  • 52. M 1.7Wednesday, 30 May, 2012
  • 53. M 1.7 call for static block in backend app/design/frontend/yourpackage/ yourtheme/template/page/html/Wednesday, 30 May, 2012
  • 54. M 1.7 create new static blockWednesday, 30 May, 2012
  • 55. M 1.7 {{store direct_url="loremipsum"}}Wednesday, 30 May, 2012
  • 56. DONE!!Wednesday, 30 May, 2012
  • 57. http://www.flickr.com/photos/boklm/486646798Wednesday, 30 May, 2012
  • 58. M 1.7Wednesday, 30 May, 2012
  • 59. no call for a template file app/design/frontend/base/layout/page.xmlWednesday, 30 May, 2012
  • 60. URL key from CMS page app/design/frontend/yourpackage/ yourtheme/layout/local.xmlWednesday, 30 May, 2012
  • 61. DONE!!Wednesday, 30 May, 2012
  • 62. http://www.flickr.com/photos/boklm/486676439Wednesday, 30 May, 2012
  • 63. Wednesday, 30 May, 2012
  • 64. Wednesday, 30 May, 2012
  • 65. Wednesday, 30 May, 2012
  • 66. Wednesday, 30 May, 2012
  • 67. Wednesday, 30 May, 2012
  • 68. Wednesday, 30 May, 2012
  • 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