Magento Theme - set the basics right - mm12nl

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

endless possibilities


temporary design change


set your theme
based on default Magento


first fallback

set your theme
based on default Modern


does file exist in yes
package_name/ How stuﬀ works
theme_name/
Magento fall-back logic
no

package_name/ display
default/

no

base/
default/

no
rendering error


default

default


non-default


blue


default


an existing theme

http://www.ﬂickr.com/photos/popilop/331357312

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


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

Remove callouts and rarely used stuff

Add the local stylesheet

your theme starts
with local.xml


not much is changed


prevent unwanted indexation like Sitemap, Search Results and more

add more to your
with local.xml

thanks to Joachim Houtman

timesaver

http://www.ﬂickr.com/photos/maigh/2141921845

Magento backend
goto System >> Conﬁguration
goto Developer
change Scope
expand Debug
set Template Path Hints to Yes
save Conﬁg
(clean Cache)
Magento frontend
refresh page


Magento backend
goto System >> Conﬁguration
goto Developer
change Scope
expand Debug
set Template Path Hints to No
save Conﬁg
(clean Cache)
Magento frontend
refresh page


also M1.7

http://bit.ly/DeveloperToolbar

find the extension key

use it to install

done

I’m a UNIX geek fond of SSH


enabled by default

scroll down to Developer


click and go


from the book: “I always get my sin”

a child can do the laundry


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!


analytics

http://www.ﬂickr.com/photos/playerdue/5285272605/

frontend/base/default/template/
catalog/layer/ﬁlter.phtml


add _gaq.push onClick

important to strip html tags


see results in Google Analytics


add more
four ways to add a link

http://www.ﬂickr.com/photos/farruska/208926935

do not forget to activate


http://www.ﬂickr.com/photos/andrec/2893549851

Lorem Ipsum


M 1.7
<


M 1.7
<
a call for a template file

app/design/frontend/base/layout/catalog.xml


URL key from CMS page

app/design/frontend/yourpackage/yourtheme/
template/catalog/navigation/top.phtml


M 1.7


M 1.7

a call for a template file

app/design/frontend/base/layout/page.xml



app/design/frontend/yourpackage/yourtheme/
template/page/html/topmenu.phtml


DONE!!


http://www.ﬂickr.com/photos/boklm/486678763

M 1.7

call for static block in backend

app/design/frontend/yourpackage/
yourtheme/template/page/html/


M 1.7

create new static block


M 1.7

{{store direct_url="loremipsum"}}


no call for a template file

app/design/frontend/base/layout/page.xml



app/design/frontend/yourpackage/
yourtheme/layout/local.xml


thank your for your time
http://about.me/hans2103

hans2103

http://slideshare.net/hans2103

http://www.ﬂickr.com/photos/trasimac/1217071176

Magento Theme - set the basics right - mm12nl

Recommended

Recommended

More Related Content

Similar to Magento Theme - set the basics right - mm12nl

Similar to Magento Theme - set the basics right - mm12nl (9)

More from Hans Kuijpers

More from Hans Kuijpers (20)

Recently uploaded

Recently uploaded (20)

Magento Theme - set the basics right - mm12nl