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 - Ebook - Andrea Sacca - Modern learning platform

E-book details

Log in, If you're interested in the contents of the item.

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

select a language

Categories

E-book details