O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Magento 1.4 Themes Design

Book Description

Customize the appearance of your Magento 1.4 e-commerce store with Magento's powerful theming engine

  • Install and configure Magento 1.4 and learn the fundamental principles behind Magento themes
  • Customize the appearance of your Magento 1.4 e-commerce store with Magento's powerful theming engine by changing Magento templates, skin files and layout files
  • Change the basics of your Magento theme from the logo of your store to the color scheme of your theme
  • Integrate popular social media aspects such as Twitter and Facebook into your Magento store

In Detail

Magento is a popular open source e-commerce project. Whilst it comes with a number of default themes to change the look and feel of your store, many people, both new to Magento and old hands, struggle with even the more basic aspects of customizing Magento themes. When you read this book you'll learn how to change the basics of your Magento theme, create a new custom theme and much more.

The book is a step-by-step guide to theming Magento, aimed at readers with little technical expertise. The first chapters introduce Magento 1.4 and Magento themes, covering Magento theme hierarchy and the key components of a Magento theme: templates, skins, layout, and locales. Later chapters delve into changing the basics of your Magento store, including methods for changing the logo of your store, adding a custom favicon (favorites icon) and integrating Twitter and Facebook into your store. More advanced topics include customizing Magento templates and XML layout files to alter a theme to your own needs and creating a custom print stylesheet.

n short, the book provides guides to common aspects of theming and customizing Magento 1.4 and equally useful step-by-step walkthroughs of integrating more unusual items in to your Magento store.

A practical guide to customizing and creating Magento 1.4 themes

Table of Contents

  1. Magento 1.4 Themes Design
    1. Magento 1.4 Themes Design
    2. Credits
    3. About the Author
    4. About the Reviewer
    5. www.PacktPub.com
      1. Support files, e-books, discount offers, and more
        1. Why Subscribe?
        2. Free Access for Packt account holders
    6. Preface
      1. What this book covers
      2. What you need for this book
      3. Who this book is for
      4. Conventions
      5. Reader feedback
      6. Customer support
        1. Errata
        2. Piracy
        3. Questions
    7. 1. Introduction to Magento
      1. What is Magento?
        1. Magento's features
        2. Differences between Magento 1.3 and Magento 1.4 themes
      2. Default Magento 1.4 themes
        1. Magento Default theme
        2. Modern theme
        3. Blue theme
      3. Showcase of Magento themes
        1. Harvey Nichols
        2. Mark One
        3. Zhu Zhu
      4. Challenges of Magento theme design
      5. Why create a custom Magento theme?
      6. Installing Magento 1.4
        1. Pre-installation check: magento-check.php
        2. Downloading Magento 1.4 Community Edition
        3. Installing and configuring Magento
        4. Configuring file permissions
        5. Configuring Magento
        6. Creating your Magento administration account
      7. Summary
    8. 2. Exploring Magento Themes
      1. Magento terminology
        1. Magento websites and Magento stores
        2. Magento interfaces
        3. Magento packages
        4. Magento themes
          1. Base theme
          2. Default themes
          3. Non-default themes
        5. Blocks in Magento
          1. Content blocks
          2. Structural blocks
      2. What makes a Magento theme?
        1. Unique aspects of a Magento theme
        2. Typical Magento theme file types
          1. Skins
          2. Layouts
          3. Templates
          4. Locales
      3. Theme hierarchy in Magento: the fallback pattern
        1. The base theme
        2. An example of theme hierarchy
      4. The Blank theme
      5. Installing and activating a Magento theme
        1. Installing a Magento theme
        2. Activating a Magento theme
      6. Good practice in Magento theming
      7. Summary
    9. 3. Magento Theme Basics
      1. Magento's cache
        1. Disabling Magento's cache
      2. Changing your store's logo
        1. Changing your store's logo using a static block in Magento
      3. Changing your store's favicon
        1. What is a favicon?
        2. Favicon inspiration
        3. Changing the favicon
      4. Displaying products on the homepage
        1. Adding the featured category
        2. Adding a product in Magento
        3. Finding your category's ID
        4. Adding the featured category to the homepage
      5. Customizing the default placeholder product image
      6. Customizing the product image watermark
      7. Summary
    10. 4. Magento Theme Layouts
      1. Magento layout terminology
        1. Default layout
        2. Layout updates
      2. Template Path Hints and Block Name Hints
        1. Enabling Template Path Hints
        2. Enabling Block Name Hints
        3. Restricting who can see the hints
      3. A brief guide to XML
        1. Self-closing elements in XML
        2. Closing XML elements normally
        3. Entity escapes in XML
      4. Changing a page's layout
        1. Changing a page's layout through Magento's administration panel
        2. Customizing a Magento page through Layout Update XML field
        3. Customizing a Magento page through layout files
      5. Default and non-default handles in Magento layout
        1. What is a handle?
        2. The default handle
        3. Non-default handles
          1. Useful handles in Magento
      6. Summary
    11. 5. Non-default Magento Themes
      1. Beginning a new Magento 1.4 theme
        1. The case study design
        2. Creating new theme directories
        3. Basic local.xml layout file
        4. Enabling the new theme
      2. Styling your store's header
        1. Styling the user account links
          1. Customizing the welcome message
        2. Styling the search box
          1. Customizing a Magento template file
      3. Styling your store's content area
        1. Styling the column blocks
          1. Customizing the sidebar basket/cart block
          2. Customizing the sidebar COMPARE PRODUCTS block
          3. Customizing the sidebar poll block
          4. Styling the sidebar blocks
            1. Styling a specific sidebar block
      4. Styling your store's footer
        1. Changing the footer links
      5. The theme so far
      6. Summary
    12. 6. More Magento Theming
      1. The theme so far
      2. Using @font-face with Magento 1.4
        1. Converting typefaces for @font-face
        2. @font-face support across browsers
          1. EOT: Internet Explorer
          2. TTF: Safari, Opera, Chrome, and Firefox
          3. OTF: Safari, Opera, Chrome, and Firefox
          4. SVG: iPhone and Chrome
          5. WOFF: Firefox
        3. CSS for @font-face
        4. Adjusting font size
          1. Better results for different weights of a typeface
      3. Magento's customer account views
        1. Styling the log in view
        2. Styling the register an account view
      4. Navigation in Magento
      5. Magento's product view
        1. Customizing the product view template
        2. Disabling Magento reviews through the CMS
        3. Customizing the product view layout
      6. Summary
    13. 7. Customizing Advanced Magento Layout
      1. Magento error messages and views
      2. Customizing Magento's 404—not found view
        1. The no JavaScript error message
        2. Styling the default message in Magento (.note-msg)
      3. Styling your store's breadcrumb
      4. Adding JavaScript into your Magento theme: Lightbox-style effects to Magento's product page
        1. Adding a JavaScript file using Magento layout
        2. Editing the product template file to include Lightbox
        3. Changing image paths in the JavaScript file
        4. Lightbox extensions for Magento 1.4
      5. Adding a conditional stylesheet for Internet Explorer in Magento
        1. Creating a new stylesheet for a previous Internet Explorer version
        2. Using Magento layout to specify a conditional stylesheet
      6. Adding a new block to your Magento theme
        1. Creating a static block in Magento's CMS
      7. Customizing your Magento store's labels with translate.csv
      8. Adding a custom block to Magento CMS pages
      9. Summary
    14. 8. Magento E-mail Templates
      1. Transactional e-mail templates in Magento
        1. Adding a new transactional e-mail template in Magento
          1. Previewing an e-mail template in Magento
          2. Changing the logo in the Magento e-mail templates
          3. Variables in e-mail templates
          4. Using the Template Styles field
      2. Customizing Magento newsletter templates
      3. Integrating external HTML newsletter systems with Magento
        1. Integrating Campaign Monitor in your Magento store
          1. Getting the Campaign Monitor subscription form markup
          2. Updating the newsletter subscription form's markup
      4. Making Magento e-mail templates ready for use
        1. Upgrade-proof e-mail templates
      5. Testing e-mail templates
        1. Testing in Campaign Monitor
      6. Summary
    15. 9. Social Media and Magento
      1. Twitter integration with Magento
        1. Adding a 'Follow Us On Twitter' button to your Magento store
          1. Generating the markup from the Twitter website
          2. Adding a static block in Magento for your Twitter button
          3. Updating your theme's layout file for the 'Follow Us' button
        2. Embedding a 'latest tweets' widget into your Magento store
        3. Integrating Twitter through Magento extensions
      2. Integrating Facebook with Magento
        1. Adding a 'Like' button to your Magento store's product pages
          1. Getting the 'Like' button markup
        2. Integrating the Facebook 'Like box' widget in your Magento store
        3. Integrating Facebook with Magento extensions
      3. Further social media integration with Magento
        1. Social bookmarking in Magento
          1. ShareThisProduct extension for Twitter, Facebook, and MySpace
          2. Magento Social Bookmarking Services extension
        2. Logging in with a social networking account
      4. Summary
    16. 10. Magento Print Style
      1. Magento Default theme's print styling
      2. Using Magento layout to include a print stylesheet
      3. Creating a custom print stylesheet for your Magento theme
        1. Print style for content blocks in Magento
        2. Print style for typography in Magento
        3. Print style for links in Magento
          1. Styling links
          2. Displaying a printed link's destination
      4. Overcoming a common browser-specific problem in print stylesheets
      5. Summary