Cover image for Magento 1.3 Theme Design

Magento 1.3 Theme Design

Author Richard Carter
Release Date: 2009/07/01
ISBN: 9781847196644
Topic:
0%
60
Chapters
0-1
Hours read
0k
Total Words
    Start Reading Now    
       Add to Wishlist       
View table of contents

Book Description

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

  • Give your Magento stores a unique branded look and feel by creating your own Magento themes

  • Use design techniques to reinforce your brand message and increase sales

  • Customise your Magento theme’s look, feel, layout, and features

  • Promote and improve your Magento store with the use of social media such as Twitter, social bookmarks, and so on

  • Ideas and examples for defining a good print stylesheet

  • Packed with essential hints and tips for effective Magento web design

In Detail

Magento is the hottest and most powerful e-commerce software around and it has gained massive popularity in a short period. By using Magento's powerful theming engine, you can control the look, content, and functionality, and easily launch a flexible e-commerce web site. However, because of its powerful features, developing Magento themes is easier said than done.

Magento 1.3 Theme Design covers everything you need to build effective, attractive themes for your Magento store. You will learn how the theming system works, how to build your own look on top of the Magento Blank Theme, how to give different looks to different parts of your store, and much more.

We start off by introducing you to Magento and its basic themes and then take you through the benefits of changing your store's theme. We then move on to the actual Magento theme design, where you will learn the basics, such as changing the logo, color scheme, and so on. Next, we take a look at more advance tasks where you will learn theme layouts. You will then prepare a Magento theme from scratch and also take a look at Magento templates and layouts. You will also learn how to promote and improve your Magento store with the use of social media such as Twitter, social bookmarks, and so on and how to define a good print style. Finally, you will learn Magento Theme Deployment in detail.

Table of Contents

  1. Magento 1.3 Theme Design
    1. Table of Contents
    2. Magento 1.3 Theme Design
    3. Credits
    4. About the Author
    5. About the Reviewers
    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. The challenges of theming Magento
        3. Default Magento themes
      2. Why theme your Magento store?
      3. Example Magento themes
        1. Raspberry Kids
        2. Mia & Maggie
        3. Cacties
        4. The Recycled Retriever
      4. Summary
    8. 2. Exploring Magento Themes
      1. What makes a Magento theme?
        1. Interfaces and themes
          1. Interfaces in Magento
          2. Themes in Magento
        2. Default and non-default themes
          1. Default themes
          2. Non-default themes
          3. Hierarchy of themes
        3. Skins, layouts, and templates
          1. Skins
          2. Layouts and blocks
          3. Templates
      2. Summary
    9. 3. Magento Themes: The Basics
      1. Our case study: Cheesy Cheese Store
        1. What we need to consider design-wise
        2. Blank Theme from Magento Connect
          1. Accessing the Blank Theme
          2. Clearing Magento's cache
          3. Installing Magento's Blank Theme
          4. Making a theme Magento's default theme
          5. What the Blank Theme looks like
          6. Adding content with Magento's CMS
      2. Cheesy Cheese Store's Magento theme
        1. Changing your store's design
          1. The header
            1. The search form
          2. User links
          3. Styling pages
            1. Styling your store's footer
            2. Styling the product pages
        2. Changing the Magento store's logo
          1. Changing your store's favicon
        3. Removing the callouts
          1. Removing the callouts on the righthand side
          2. Removing callouts on the lefthand side
      3. Displaying featured products on the home page
        1. Creating a "featured" category
        2. Displaying the "featured" category through the Content Management System
      4. Cheesy Cheese Store so far
      5. Summary
    10. 4. Magento Theme Layout
      1. Themes and Layouts in Magento
        1. Changing our store's layout with CMS
          1. Template path hints
            1. Enabling template path hints
      2. Layout terminology in Magento
      3. A brief guide to XML
        1. Self-closing elements in XML
        2. Closing XML elements normally
        3. Entity escapes in XML
      4. Customizing Magento layouts with XML
        1. Layout files' location
        2. Handles
          1. Non-default handles
            1. Useful handles in Magento
        3. Using Magento layout: Another example
      5. Changing the layout on a particular page
      6. Summary
    11. 5. Non-default Magento Themes
      1. Uses of non-default themes
        1. A/B testing
        2. Easily rolled-back themes
      2. Non-default themes
      3. Magento theme hierarchy
        1. Magento theme directory structure
          1. Templates
          2. Layout
          3. Skins
      4. Assigning your non-default theme
        1. Restrictions with assigning themes
      5. Creating non-default themes
        1. Skin changes
        2. Template changes
      6. Summary
    12. 6. Advanced Magento Themes
      1. Introducing our new design
      2. Creating skeleton templates
        1. getChildHtml
        2. Assigning the skeleton template
      3. Blocks in Magento
        1. Structural blocks
        2. Content blocks
        3. Inserting in to <head> tag
        4. Creating your store's header.phtml file
          1. Store links
          2. Altering your store's logo
            1. Changing the logo using Magento's administration panel
        5. Footer.phtml
        6. Pager.phtml
        7. Wrapper.phtml
        8. Magento's IDs and classes
        9. Styling with CSS
          1. Reset CSS
      4. Turning the cache off
      5. Creating a favicon
      6. Setting the theme
      7. Summary
    13. 7. Further Magento Theming
      1. Theming tasks
        1. Customizing the product page
          1. Improving content hierarchy for better search engine results
        2. Customizing Magento's navigation
          1. Displaying Navigation in Magento
          2. Creating a new root category
          3. Editing the navigation
          4. Styling the navigation
        3. Creating a custom "not found" page
          1. Creating a "not found" page using templates
        4. Advanced layouts in Magento
          1. Default layouts
          2. Layout updates
          3. How Magento layouts work
            1. Handles in layout
          4. Layout blocks
            1. The action attribute
            2. The as attribute
            3. The after and before attributes
            4. The type attribute
            5. Layout references
          5. addJS in layout
          6. addCss in layout
          7. as in layout
          8. Removing a layout
      2. Summary
    14. 8. Social Media in Magento
      1. Integrating Twitter with Magento
        1. Tweeting: Ideas for your store's tweets
        2. Displaying your Twitter updates on your Magento store
        3. Installing the LazzyMonks Twitter module
        4. Other ways to integrate Twitter with Magento
          1. Adding your Twitter feed through Magento's CMS
      2. Integrating Get Satisfaction with Magento
      3. Integrating social bookmarking with Magento
        1. Social bookmarking tools
          1. Socializer
          2. AddThis
        2. Using AddThis in Magento
      4. Summary
    15. 9. Magento Print Styles
      1. Viewing the print stylesheet
      2. Print stylesheets in other Magento themes
        1. The Default theme print style
      3. Principles of good print stylesheet designs
        1. Limitations of the print stylesheet
          1. Print preview
          2. Gecko-based browsers
        2. What we should show
          1. Logos and store names
          2. Promotional graphics and callouts
          3. Links
        3. What we can hide
          1. Background images
      4. Styling our theme for print
        1. Assigning a print stylesheet in Magento
      5. Styling Magento for print with CSS
        1. Images
        2. Printing and colors
        3. Printing and links
        4. Printing and typography
        5. Printing and layout
      6. Summary
    16. 10. Magento Theme Deployment
      1. Cross-browser testing
        1. Popularity of browsers
        2. Browser-testing services
          1. BROWSERCAM
          2. BrowserShots
      2. Deploying your Magento theme on your own store
        1. Setting the theme
        2. Turning template path hints off
        3. Turning the system cache on
      3. Packaging your Magento theme
        1. Types of Magento contributions
          1. Magento Commercial Extensions
          2. Magento Community Extensions
        2. What to include in your packaged Magento theme
        3. Creating your package
          1. Package Info
          2. Maintainers
          3. Dependencies
          4. Contents
        4. Sharing your theme with the Magento community
      4. Summary
    17. Index