Mastering magento theme design PDF
Preview 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 Mastering Magento Theme Design
Description:The list of books you might like
