Magento 1.4 Themes Design

Transcription

1 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 1 open source I community experience distilled - BIRMINGHAM MUMBAI

2 Preface 1 Chapter 1: Introduction to Magento 7 What is Magento? 8 Magento's features 9 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 24 Challenges of Magento theme design 27 Why create a custom Magento theme? 27 Installing Magento Pre-installation check: magento-check.php 28 Downloading Magento 1.4 Community Edition 30 Installing and configuring Magento 30 Configuring file permissions 32 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 Magento packages 42

3 Magento themes 43 Base theme 44 Default themes 44 Non-default themes 45 Blocks in Magento 46 Content blocks 46 Structural blocks 4? What makes a Magento theme? 47 Unique aspects of a Magento theme 47 Typical Magento theme file types 48 Skins 48 Layouts 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 Summary 97 48

4 Chapter 4: Magento Theme Layouts 99 Magento layout terminology 99 Default layout 100 Layout updates 100 Template Path Hints and Block Name Hints 100 Enabling Template Path Hints 100 Enabling Block Name Hints 104 Restricting who can see the hints 107 A brief guide to XML 108 Self-closing elements in XML 109 Closing XML elements normally 109 Entity escapes in XML 109 Changing a page's layout 110 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? 118 The default handle 119 Non-default handles 119 Useful handles in Magento 120 Summary 121 Chapter 5: Non-default Magento Themes 123 Beginning a new Magento 1.4 theme 123 The case study design 124 Creating new theme directories 124 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 template file 134 Styling your store's content area 136 Styling the column blocks 138 Customizing the sidebar basket/cart block 139 Customizing the sidebar COMPARE PRODUCTS block 140 Customizing the sidebar poll block 142 Styl i ng th e sideba r blocks 143

5 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 with Magento Converting typefaces 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 156 Adjusting font size 158 Better results for different weights of a typeface 158 Magento's customer account views 159 Styling the log in view 159 Styling the register an account 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 Adding a conditional stylesheet for Internet Explorer in Magento 198 Creating a new stylesheet for a previous Internet Explorer version 199 Using Magento layout to specify a conditional stylesheet 199

6 Adding a new block to your Magento theme 200 Creating a static block in Magento's CMS 201 Customizing your Magento store's labels with translate.csv 206 Adding a custom block to Magento CMS pages 208 Summary 209 Chapter 8: Magento Templates 211 Transactional templates in Magento 211 Customizing Magento newsletter templates 218 Integrating external HTML newsletter systems with Magento 221 Making Magento templates ready for use 228 Testing 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 markup from the Twitter website 232 Adding a static block in Magento for 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 243 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 ShareThisProduct extension for Twitter, 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 Print style for typography in Magento 265

7 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 Index 271