A presentation at Meet Magento 2012 in in Ede, Netherlands by Hans Kuijpers
set the basics right for better pasta twitter: hans2103 Peter Ogg Wednesday, 30 May, 2012
boring stuff first http://www.flickr.com/photos/swiv/5719738832 Wednesday, 30 May, 2012
endless possibilities Wednesday, 30 May, 2012
temporary design change Wednesday, 30 May, 2012
set your theme based on default Magento Wednesday, 30 May, 2012
first fallback set your theme based on default Modern Wednesday, 30 May, 2012
does file exist in package_name/ yes theme_name/ How stuff works Magento fall-back logic no does file exist in package_name/ yes display default/ no does file exist in base/ yes default/ no Wednesday, 30 May, 2012 rendering error
default default Wednesday, 30 May, 2012
Wednesday, 30 May, 2012
non-default Wednesday, 30 May, 2012
blue Wednesday, 30 May, 2012
default Wednesday, 30 May, 2012
blue Wednesday, 30 May, 2012
does file exist in package_name/ yes theme_name/ How stuff works Magento fall-back logic no does file exist in package_name/ yes display default/ no does file exist in base/ yes default/ no Wednesday, 30 May, 2012 rendering error
an existing theme http://www.flickr.com/photos/popilop/331357312 Wednesday, 30 May, 2012
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 Javascript Wednesday, 30 May, 2012
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 small Wednesday, 30 May, 2012
Remove callouts and rarely used stuff Add the local stylesheet your theme starts with local.xml Wednesday, 30 May, 2012
not much is changed Wednesday, 30 May, 2012
prevent unwanted indexation like Sitemap, Search Results and more add more to your with local.xml thanks to Joachim Houtman Wednesday, 30 May, 2012
timesaver http://www.flickr.com/photos/maigh/2141921845 Wednesday, 30 May, 2012
Magento backend goto System >> Configuration goto Developer change Scope expand Debug set Template Path Hints to Yes save Config (clean Cache) Magento frontend refresh page Wednesday, 30 May, 2012
Magento backend goto System >> Configuration goto Developer change Scope expand Debug set Template Path Hints to No save Config (clean Cache) Magento frontend refresh page Wednesday, 30 May, 2012
also M1.7 http://bit.ly/DeveloperToolbar Wednesday, 30 May, 2012
find the extension key use it to install done I’m a UNIX geek fond of SSH Wednesday, 30 May, 2012
enabled by default scroll down to Developer Wednesday, 30 May, 2012
click and go Wednesday, 30 May, 2012
click and go Wednesday, 30 May, 2012
from the book: “I always get my sin” a child can do the laundry Wednesday, 30 May, 2012
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
analytics http://www.flickr.com/photos/playerdue/5285272605/ Wednesday, 30 May, 2012
Wednesday, 30 May, 2012
frontend/base/default/template/ catalog/layer/filter.phtml Wednesday, 30 May, 2012
add _gaq.push onClick important to strip html tags Wednesday, 30 May, 2012
Wednesday, 30 May, 2012
see results in Google Analytics Wednesday, 30 May, 2012
add more four ways to add a link http://www.flickr.com/photos/farruska/208926935 Wednesday, 30 May, 2012
Wednesday, 30 May, 2012
do not forget to activate Wednesday, 30 May, 2012
Wednesday, 30 May, 2012
http://www.flickr.com/photos/andrec/2893549851 Wednesday, 30 May, 2012
Wednesday, 30 May, 2012
Lorem Ipsum Wednesday, 30 May, 2012
< Wednesday, 30 May, 2012 .7 1 M
< a call for a template file app/design/frontend/base/layout/catalog.xml Wednesday, 30 May, 2012 .7 1 M
URL key from CMS page app/design/frontend/yourpackage/yourtheme/ template/catalog/navigation/top.phtml Wednesday, 30 May, 2012
.7 1 M Wednesday, 30 May, 2012
.7 1 M a call for a template file app/design/frontend/base/layout/page.xml Wednesday, 30 May, 2012
URL key from CMS page app/design/frontend/yourpackage/yourtheme/ template/page/html/topmenu.phtml Wednesday, 30 May, 2012
DONE!! Wednesday, 30 May, 2012
http://www.flickr.com/photos/boklm/486678763 Wednesday, 30 May, 2012
.7 1 M Wednesday, 30 May, 2012
.7 1 M call for static block in backend app/design/frontend/yourpackage/ yourtheme/template/page/html/ Wednesday, 30 May, 2012
.7 1 M create new static block Wednesday, 30 May, 2012
.7 1 M {{store direct_url=”loremipsum”}} Wednesday, 30 May, 2012
DONE!! Wednesday, 30 May, 2012
http://www.flickr.com/photos/boklm/486646798 Wednesday, 30 May, 2012
.7 1 M Wednesday, 30 May, 2012
no call for a template file app/design/frontend/base/layout/page.xml Wednesday, 30 May, 2012
URL key from CMS page app/design/frontend/yourpackage/ yourtheme/layout/local.xml Wednesday, 30 May, 2012
DONE!! Wednesday, 30 May, 2012
http://www.flickr.com/photos/boklm/486676439 Wednesday, 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/hans2103 http://www.flickr.com/photos/trasimac/1217071176 Wednesday, 30 May, 2012
Magento theming - a presentation about how to create magento themes. Given during Meet Magento 2012
for free. You
can too.