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

Spis treści książki

• 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

pokaż cały spis treści

ukryj recenzje