Magento 1.4 Themes Design

Magento

1.4

_Themes

_Design

Customize

_{the appearance of}

_your

_Magento

1.4

e-commerce

store with

_Magento's

_powerful

_theming

engine

Richard Carter

[

PUBLISHING BIRMINGHAM-MUMBAI

1 open

source

Table

of

Contents

Preface

1

Chapter

1:

Introduction

to

Magento

7

What is

_Magento?

8

Magento's

features

₉

Differences

between

_Magento

1.3

and

_Magento

1.4 themes 9 Default

_Magento

1.4 themes

10

Magento

Default theme

10

Modern

theme

17

Blue theme

20

Showcase

of

_Magento

themes

20

Harvey

Nichols 21

Mark One 23

Zhu Zhu

₂₄

Challenges

of

_Magento

theme

_design

27

Why

create a custom

_Magento

theme? 27

Installing Magento

1.4 27

Pre-installation

check:

_{magento-check.php}

28

Downloading

Magento

1.4

_Community

Edition

30

Installing

and

_configuring

_Magento

30

Configuring

file

_permissions

₃₂

Configuring Magento

33

Creating

your

Magento

administration account

36

Summary

37

Chapter

2:

_Exploring

_{Magento Themes}

39

Magento terminology

39

Magento

websites and

_Magento

stores 40

Magento

interfaces

41

Table

_of

Contents

Magento

themes 43 Base theme 44 Default themes 44 Non-defaultthemes 45

Blocks in

_Magento

46

Content blocks 46 Structural blocks 4?

What makes a

Magento

theme?

47

Unique aspects

ofa

_Magento

theme

47

Typical Magento

theme

file

_types

48

Skins 48

Layouts

48

Templates

49

Locales 49

Theme

_hierarchy

in

_Magento:

the fallback

_pattern

49

The base theme 49

An

_example

of theme

_hierarchy

50

The

Blank theme

52

Installing

and

_activating

a

_Magento

theme 53

Installing

a

Magento

theme 54

Activating

a

Magento

theme 56

Good

_practice

in

_{Magento theming}

60

Summary

61

Chapter

3:

Magento

Theme

Basics

63

Magento's

cache 63

Disabling Magento's

cache 64

Changing

your store's

logo

67

Changing

your

store's

logo using

a static block in

_Magento

71

Changing

your store's

favicon 71

What is a

favicon?

71

Favicon

_inspiration

72

Changing

the favicon 74

Displaying

products

on the

_homepage

76

Adding

the featured

_category

77

Adding

a

product

in

_Magento

80

Finding

your

category's

ID 85

Adding

the

featured

_category

to the

_homepage

86

Customizing

the

default

_{placeholder product image}

90

Customizing

the

_{product image}

watermark

92

Chapter

4:

Magento

Theme

_Layouts

₉₉

Magento

layout terminology

99

Default

_layout

₁₀₀

Layout

updates

100

Template

Path Hints and Block Name Hints 100

Enabling

Template

Path

Hints 100

Enabling

Block

Name Hints

₁₀₄

Restricting

who

can see the

hints

₁₀₇

A

brief

_guide

to

XML

₁₀₈

Self-closing

elements in

XML

109

Closing

XML

elements

_normally

109

Entity

escapes in XML

109

Changing

a

page's

_layout

₁₁₀

Changing

a

_{page's layout through}

_Magento's

administration

_panel

110

Customizing

a

Magento

_page

_{through Layout}

_Update

XML field

114

Customizing

a

Magento

_page

through

_layout

files

116

Default and

non-default handles in

_{Magento layout}

118 What is a

handle?

₁₁₈

The

default handle

119

Non-default handles

119

Useful handlesinMagento 120

Summary

121

Chapter

5:

Non-default

Magento

Themes

123

Beginning

a new

_Magento

1.4 theme

₁₂₃

The

case

_{study design}

₁₂₄

Creating

newtheme

directories

₁₂₄

Basic

local.xml

_layout

file

125

Enabling

the new

theme

126

Styling

your store's header

128

Styling

the user account

links

130

Customizing

the_{welcome message 131}

Styling

the search box 132

Customizing

a

Magento

_templatefile 134

Styling

your store's content area

136

Styling

the column

blocks

138

Customizing

thesidebarbasket/cart block 139

Customizing

the sidebar COMPARE PRODUCTSblock 140

Customizing

the sidebar

_poll

block 142

Table

_of

Contents

Styling

your

store's footer

146

Changing

the footer links

147

The

theme

so

far

150

Summary

150

Chapter

6: More

Magento

Theming

153

The

theme

so

far

153

Using @font-face

with

_Magento

1.4 154

Converting

typefaces

for

_@font-face

155

@font-face

support

across

browsers

155 EOT: Internet

_Explorer

155 TTF: _{Safari, Opera,} Chrome, and Firefox 155 OTF: Safari, Opera, Chrome,and Firefox 155 SVG: iPhone and Chrome 155 WOFF: Firefox 156

CSS

for

_@font-face

156

Adjusting

font size

158

Better results for different

_weights

ofa

_typeface

158

Magento's

customer account

views

159

Styling

the

_log

in view 159

Styling

the

_register

anaccount view 166

Navigation

in

_Magento

167

Magento's product

view 170

Customizing

the

_product

view

template

171

Disabling

Magento

reviews

_through

the CMS

172

Customizing

the

_product

view

_layout

172

Summary

173

Chapter

7:

_Customizing

Advanced

_{Magento Layout}

175

Magento

error _{messages and views} 175

Customizing Magento's

404—not found view

176

The no

_JavaScript

error_message 183

Styling

the default

message in

Magento (.note-msg)

186

Styling

your store's

breadcrumb 188

Adding JavaScript

into your

Magento

theme:

_{Lightbox-style}

effects to

_{Magento's product}

_page

192

Adding

a

JavaScript

file

_{using Magento}

layout

192

Editing

the

_{product template}

file to include

_Lightbox

194

Changing image paths

in the

_JavaScript

file 196

Lightbox

extensions for

_Magento

1.4 197

Adding

a conditional

_stylesheet

for Internet

_Explorer

in

_Magento

198

Creating

a new

stylesheet

fora

previous

Internet

Explorer

version

199

Adding

a new_{block to your}

_Magento

theme

200

Creating

a static block in

_Magento's

CMS

₂₀₁

Customizing

your

Magento

store's labels with

translate.csv

206

Adding

a custom

block

to

_Magento

_{CMS pages} 208

Summary

209

Chapter

8:

_Magento

E-mail

_Templates

211

Transactional

e-mail

_templates

in

_Magento

211

Customizing Magento

newsletter

_templates

218

Integrating

external HTML

newsletter

_systems

with

_Magento

221

Making Magento

e-mail

_templates

ready

for

use 228

Testing

e-mail

_templates

230

Summary

230

Chapter

9: Social Media and

_Magento

231

Twitter

_integration

with

_Magento

232

Adding

a

'Follow Us

_{On Twitter' button to your}

_Magento

store 232

Generating

the _markupfrom the Twitter website 232

Adding

astaticblockinMagentofor_{your Twitter button 234}

Updating

your theme's

layout

file for the

'Follow Us' button 235

Embedding

a 'latest tweets'

widget

into your

Magento

store 236

Integrating

Twitter

_{through Magento}

extensions

241

Integrating

Facebook with

_Magento

242

Adding

a 'Like' button

to your

_Magento

store's

_product

_pages

₂₄₃

Getting

the 'Like' button markup 244

Integrating

the

Facebook 'Like box'

_widget

in your

Magento

store 247

Integrating

Facebook

with

_Magento

extensions

251

Further social

media

_integration

with

_Magento

252

Social

_bookmarking

in

_Magento

252 ShareThisProductextension forTwitter, Facebook, and

_MySpace

252

Magento

Social

_Bookmarking

Services extension 252

Logging

in

with

a

social

networking

account 252

Summary

253

Chapter

10:

_Magento

Print

_Style

255

Magento

Default

theme's

_{print styling}

255

Using Magento layout

to include a

_print

_stylesheet

260

Creating

a custom

print

stylesheet

for your

Magento

theme

261

Print

_style

for content blocks in

_Magento

261

Table

_of

Contents

Print

_style

for links in

_Magento

267

Styling

links 267

Displaying

a

printed

link's destination 268

Overcoming

a common

browser-specific problem

in

print stylesheets

269

Summary

269