SWS Theming Aug10 Handouts

8/8/2019 SWS Theming Aug10 Handouts

1/12

Magento USummer Webinar Ser ies Intro to Theming in Magento

1

Intro to Theming in Magento Magento U Summer Webinar Series

INTRO TO THEMINGIN MAGENTO

Summer Webinar SeriesAugust 10, 2010


What well cover today Magento concepts well

cover: Multi theme set up

Design packages Default and non-default themes

Fall-back logic and basepackage

Components of a theme Page templates Block templates Layouts

Starting steps to creatingyour 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 wont cover but you need:

FirebugFirefox add-on HTML/CSS editor of your choice FTP program of your choice


2/12


2


Magento ThemesThe Big PictureThe multi-theme modelWorking 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 default blocks/modules are available (layouts) Which data is shown and how (templates)

Allows the presentation layer to be independent of businesslogic and functionality

default/default theme default/modern theme default/iphone theme


3/12


3


StoreView

Store

Website

Magentos store hierarchy

Any of these entities can have a different package and/or theme assigned to it, or theycan all share the same one

More commonly, the main store in a set will be assigned the default theme in a designpackage and slight variations for other store types will be handled in the non-default

themes for that design package

Brand2

Mainstore

English

Brand1

Mainstore

English Spanish

Partsstore

English


Multiple themes for multiple stores Design packages contain the default theme and any theme variants of that design Magentos default design package contains several demo theme variants you can

experiment withDesign

packagesbase

default

default

default

blank

blue

modern

iphone

brand1

default

varia?on1

varia?on2

brand2

defaultDefault

themes

Non-default

themes

Design packages are reallyjust a collection of related

themes


4/12


4


Design

package

Theme

What that looks like in the Admin PanelADMIN:SystemConfiguration

Design tab


What that looks like in the file system Themes in Magento are made up of files in 2 sets of directories

skin/frontend/ app/design/frontend/

Page templates and layout

files for a theme are inapp/design/frontend/

app/designdirectory

default design

packagethemes in package

app/design directory

Images and CSS files for a

theme are inskin/frontend/

skin directory

default design

package

skin directory

themes in package


5/12


5


Understanding the base package Provides hooks to all of Magentos core functionality Cross-package fall-back point

Allows your theme to contain ONLY changes from the base and not have to replicate and maintain allof the files

Design

packagesbase

default

default

default

blank

blue

modern

iphone

brand1

default

varia?on1

varia?on2

brand2

defaultDefault

themes

Non-defaultthemes


Theme fall-back logic in MagentoStart

Look for file in

package_name/

theme_name/

Found?

Look for file in

package_name/

default/

Display as

indicated

Found?

Look for file in

base/default/

Found? Renderingerror

yes yes yes

no no no

Base package was introduced in

CEv1.4 and EEv1.8.

Prior versions do NOT have a

cross package fall-back option


6/12


6


Understanding Magento ThemingMagento modules and themes

Components of a Magento theme~ directory structure~ file types involved


Whats actually in a theme?skin

css

images

js

app/design

layout

template

skinfrontend

package_name theme_name css js images

app/designfrontend

package_name theme_name layout template

Page generation xml instructions

for each moduleContent block .phtml files for

each module

Visual layout info and

files & UI-specific

Javascript

Directory structure

Logical contents


7/12


7


Building pages with blocks and layouts in Magento

The page is not the baseunit in Magento design Blocks are

Content blocks areassigned to structural

blocks (in page

templates) by layout

files

header

footer

left rightmain

Page templates

(phtml)

Content block

templates(phtml)

Layout files (xml)



8/12


8


Modules that control

sections of Magento websites

Checkout Process

Shopping Cart

Categories Contact

Content pages

Product Pages

Home

Adv Search

Search Results

Log in Account Dashboard

Account

Functions

Log out

Thank you

Site map Search terms

ProductFunctions

Subcats

Default system-generated footer links

Default top links

CMS footer links

CMS

Catalog

Catalog

Search

Contacts

Checkout

Customer


Content blocksContent block templates

Content blocks are theactual content and

functionality of your

store They are defined in

app/designfrontend package_name theme_name layout template module1 module2 etc.

productlis?ng

store

naviga?on

category

list

callout

poll

news-

leer

footer

links


9/12


9


Content blocks assigned to their structural blocksLayout files

Layout files assign theindividual content blocks

to structural blocks They are defined in

CSS handles the stylingof these blocks

app/designfrontend package_name theme_name layout module1.xml module2.xml etc.


Use template path hints to find module and file names

ADMIN:

SystemConfiguration

DevelopertabDebug

panel


10/12


10


Structural blocksPage templates & structural blocks

Page templates definestructural blocks which

create the logical

structure of your pages They are defined in

app/designfrontend package_name theme_name layout page.xml template page


Example: page.xmlapp/design/frontend/base/default/layout/page.xml


11/12


11


Example: page/3column.phtmlapp/design/frontend/base/default/template/page/3column.phtml


Default page templates and structural blocksheader

footer

left rightcontent

header

footer

left content

header

footer

rightcontent

header

footer

content content

3 columns 2 columns with left bar 2 columns with right bar

1 column Empty app/designfrontend package_name theme_name layout template page


12/12


12


Steps to Creating a Magento Theme0. Disable your cache1. Make skin and app/design directories for your design

package and theme2. In Admin Panel, set your store to use your theme3. Make skin subdirectories for CSS and images4. Make app/design subdirectories for layout and

template5. Move only files you need to change into your design

theme or create a local file with changes

SWS Theming Aug10 Handouts

Documents

Transcript of SWS Theming Aug10 Handouts