Mastering Magento Theme Design电子书

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