E-book details

Mastering Magento Theme Design. Magento is the super-capable open source e-commerce platform that’s number one for a reason. By using this book to optimize your know-how, you’ll be acquiring the ultimate in e-tail expertise for yourself and your clients

Mastering Magento Theme Design. Magento is the super-capable open source e-commerce platform that’s number one for a reason. By using this book to optimize your know-how, you’ll be acquiring the ultimate in e-tail expertise for yourself and your clients

Andrea Sacca

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