Cover image for Mastering Magento Theme Design

Mastering Magento Theme Design

Author Andrea Saccà
Release Date: 2014/04/01
ISBN: 9781783288236
Topic:
0%
86
Chapters
0-1
Hours read
0k
Total Words
    Start Reading Now    
       Add to Wishlist       
View table of contents

Book Description

This book will teach you how to create a custom Magento theme from scratch, how to make it mobile compatible, and much more. With lots of code snippets, it’s the perfect tutorial for web designers and developers.

In Detail

This book explores Magento theme design, from basic theme structures to an advanced options panel, and provides you with the advanced knowledge that you need on the frontend of this great CMS.

The book starts with an overview of best practices for Magento theming and explores the field of theme development, starting from the home page all the way through to mobile optimization, analyzing advanced Magento applications such as widgets and modules. You will learn how to change the look and feel of the Magento backend to adapt it to your company's brand identity. The book will also take a look at adding functionalities such as lightbox effects on the product details page and awesome CSS3 animations on the products grid. By the end of this book, you will be able to create a new, custom, responsive, and advanced Magento theme of your own. You will learn everything you need to know to master Magento theme design, from the essential structure to the final sale in a step-by-step, tutorial style.

What You Will Learn

  • Create a custom Magento theme from scratch
  • Make your theme mobile-ready by integrating Bootstrap into it
  • Optimize your theme to be fully responsive and ready for multiple devices
  • Integrate sharing buttons into your theme
  • Add CSS3 and jQuery animations to enhance your theme's appearance
  • Create a widget and a theme options panel to allow the fi nal user to customize your theme in minutes
  • Change the look of the Magento backend to adapt it to your company's brand identity
  • Make money by packaging and selling your theme

Downloading the example code for this book. You can download the example code files for all Packt books you have purchased from your account at http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the files e-mailed directly to you.

Table of Contents

  1. Mastering Magento Theme Design
    1. Table of Contents
    2. Mastering Magento Theme Design
    3. Credits
    4. About the Author
    5. About the Reviewers
    6. www.PacktPub.com
      1. Support files, eBooks, discount offers, and more
        1. Why Subscribe?
        2. Free Access for Packt account holders
    7. Preface
      1. What this book covers
      2. What you need for this book
      3. Prerequisites
      4. Who this book is for
      5. Conventions
      6. Reader feedback
      7. Customer support
        1. Downloading the example code
        2. Errata
        3. Piracy
        4. Questions
    8. 1. Introducing Magento Theme Design
      1. The basic concepts of a Magento theme
        1. The Magento base theme
          1. The hierarchy of files and the fall-back system
      2. The structure of a Magento theme
        1. Design packages and design themes
        2. Directory 1 – app
          1. The layout subdirectory
          2. Templates
          3. Locales
          4. Creating new translatable entries
        3. Directory 2 – skin
          1. Structural blocks and content blocks
          2. CMS blocks and page
            1. CMS blocks
            2. CMS pages
        4. Magento variables
        5. Widgets
      3. Creating the theme
        1. Starting with the app folders
        2. Creating the skin folders
        3. Creating the necessary files
        4. Disabling the cache
        5. Activating the theme
      4. Tips and tricks
        1. Template path hint
        2. Disabling the WYSIWYG editor
      5. Summary
    9. 2. Creating a Responsive Magento Theme with Bootstrap 3
      1. An introduction to Bootstrap
      2. Downloading Bootstrap (the current Version 3.1.1)
      3. Downloading and including jQuery
      4. Integrating the files into the theme
        1. Declaring the .js files in local.xml
        2. Declaring the CSS files in local.xml
        3. Removing and adding the style.css file
        4. Adding conditional JavaScript code
        5. A quick recap of our local.xml file
      5. Defining the main layout design template
        1. Defining the HTML5 boilerplate for main templates
      6. Developing the header
        1. Creating the top header
          1. CMS block links
            1. Creating the CMS block with the links
            2. Declaring the CMS block in the local.xml file
            3. Declaring the CMS block with a PHP statement in header.phtml
          2. The right part of the top header
        2. Creating the main header
          1. Logo
          2. The top cart
      7. Creating the navigation bar
        1. The top menu bar
        2. Search
      8. Developing the footer
        1. Creating the CMS blocks from the admin panel
        2. Adding the newsletter block
      9. Summary
    10. 3. Customizing Our Custom Theme
      1. Developing the home page
        1. Configuring the structure of the home page
        2. Creating the slider row
        3. Creating the CMS block for the carousel
        4. Creating the CMS block for the banners
        5. Creating the CMS home page from the admin panel
        6. Customizing the look and feel of the home page with CSS
        7. Creating the content row
      2. Customizing the left sidebar
        1. Removing the default blocks from the sidebar
        2. Creating a vertical navigation menu on the sidebar
      3. Customizing the main content
        1. Adding a block with some products of a specific category
      4. Customizing the other pages of the theme
        1. The products grid
        2. The product page
        3. File paths and handles for the other sections of the theme
      5. Summary
    11. 4. Adding Incredible Effects to Our Theme
      1. Introducing CSS3 transitions
        1. Multiple property changes
        2. The CSS3 transition properties
      2. Creating an animated cart in the header
        1. Customizing the topcart.phtml file
        2. Customizing the CSS of the cart
        3. Styling the cart's content with CSS
      3. Creating a stunning CSS3 3D flip animation
        1. Planning the hover animation
        2. The HTML code of list-home.phtml
        3. Creating the CSS animation
      4. Creating a custom product images gallery
        1. Planning the work
        2. Integrating prettyPhoto into Magento
          1. Downloading prettyPhoto
          2. Integrating prettyPhoto JS and CSS
          3. Customizing the media.phtml code
          4. Initializing prettyPhoto
        3. Creating a nice image swap effect for when you hover the cursor over a thumbnail
      5. Adding a custom font to our theme
        1. Sources to find free and premium web-safe font
          1. Google fonts
          2. Font Squirrel
          3. Adobe TypeKit
        2. Integrating a Google font in our theme
      6. Adding a custom icon font to our theme
      7. Summary
    12. 5. Making the Theme Fully Responsive
      1. Our goal
      2. Using specific CSS3 media queries
        1. Large devices (.container width – 1170 px)
        2. Medium devices (.container width – 970 px)
        3. Tablet devices (.container width – 750 px)
        4. Smartphones
      3. Optimizing the theme for multiple devices
        1. Testing the responsiveness of a website
        2. Optimizing the top bar of the header
          1. Fixing the logo row
          2. Fixing the menu bar
          3. Fixing the main content column
          4. Fixing the products grid
          5. Adjusting the footer
      4. Tips and tools for responsive coding
        1. Hiding the unnecessary blocks for lower resolutions
        2. Flexible images
        3. Initial scale meta tag (iPhone)
      5. Adding mobile icons
      6. Summary
    13. 6. Making the Theme Socially Ready
      1. Getting started with social media integration
      2. Integrating the social plugin in the product page
      3. Integrating the code in the product page
        1. Facebook's Like button
        2. Twitter's Tweet button
        3. Pinterest's Pin button
        4. The Google+ button
        5. The + button
      4. Adding the Facebook Like box to the left sidebar
        1. Installing the Like box on your site
      5. Summary
    14. 7. Creating a Magento Widget
      1. Getting started with Magento widgets
      2. Developing a widget
        1. Creating an empty module
        2. Adding the widget to the CMS page
      3. Creating a widget with options
        1. Adding options to our widget.xml
        2. Creating the frontend widget block
      4. Adding the widget in the admin panel
      5. Summary
    15. 8. Creating a Theme Admin Panel
      1. Creating the theme options module
        1. Activating the module
        2. Creating the module helper
        3. Creating the configuration file config.xml
        4. Creating the options file system.xml
        5. Getting started with options fields
      2. Overviewing the System.xml fields
        1. Creating an input text
        2. Creating textarea
        3. Creating a dropdown with Yes/No values
        4. Creating a dropdown with Enable/Disable values
        5. Creating a dropdown with custom values
        6. Creating a File Upload option field
      3. Creating the advanced admin options panel
        1. Creating a custom dropdown field
      4. Interfacing the admin panel with the theme
        1. Customizing the frontend
          1. Getting the value of an input text field
          2. Conditional options
          3. Accessing a Yes/No dropdown
          4. Getting the uploaded image file
      5. Advanced options features
        1. A dependent field
        2. Adding JavaScripts inside the comment tag
      6. Creating a visual color picker in admin
        1. Validate options
        2. Defining default values for options fields
      7. A quick recap of the theme's option panel
      8. Summary
    16. 9. Customizing the Backend of Magento
      1. An overview of the admin design
      2. Changing the default admin panel
        1. Installing the module to change the folder path
      3. Creating a custom Magento admin theme
        1. Creating the custom.css file
        2. Checking the CSS overriding
        3. Changing the logo
        4. Using a different logo name or extension
        5. Creating CSS3 gradients without images
        6. Changing the background color of the header
        7. Customizing the navigation
        8. Customizing the footer
        9. Customizing other objects
      4. Creating a custom login page
        1. Creating the custom login.phtml file
        2. Creating the login form
        3. Styling the login form
        4. Adding the alert message if the data is incorrect
        5. A quick recap of the complete form.phtml file
      5. Customizing the retrieve password form
      6. Installing the Magento Go admin theme
      7. Summary
    17. 10. Packaging and Selling the Theme
      1. Collecting and placing all the folders and files under one folder
      2. Creating the live demo preview
        1. The performance of the sever
        2. Sample products
        3. Searching for royalty-free photos for the theme
          1. iStock
          2. BIGSTOCK
          3. PhotoDune
        4. The Envato asset library
      3. Creating the documentation of the theme
        1. A simple example of the ThemeForest documentation
        2. The Documenter tool
        3. Some tips to write better documentation
      4. Packaging the theme
      5. Selling the theme on ThemeForest
        1. My personal experience
        2. Theme pricing
      6. Inserting the theme on the Magento Connect site
      7. Support and updates
        1. Fixing the bugs and adding new features
        2. Supporting final users
      8. Summary
    18. A. Conclusions and Credits
      1. Official Magento resources
        1. The Magento commerce website
        2. The Magento design guide
        3. Magento Front End certification
        4. Magento 2
      2. Useful websites on Magento
        1. Excellence Magento blog
        2. Fabrizio Branca blog
        3. Bubble codes by Johann Reinke
        4. Inchoo's blog
        5. Tuts plus Magento tutorials
        6. Smashing magazine
      3. Free resources for design, UI, and web design
        1. Responsive design
        2. UI – UIX resources
        3. Animations
        4. Fonts
        5. Social media
        6. Photo stocks resources
        7. Free resources
        8. Selling your theme
      4. Conclusions
      5. Thank you
    19. Index
18.220.66.151