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 cart's 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.