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

Mastering Magento Theme Design

Copyright © 2014 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

First published: April 2014

Production Reference: 1030713

Published by Packt Publishing Ltd.

Livery Place

35 Livery Street

Birmingham B3 2PB, UK.

ISBN 978-1-78328-823-6

www.packtpub.com

Cover Image by John Harkness (<jtothem@gmail.com>)

Credits

Author

Andrea Saccà

Reviewers

Srikanth AD

Ray Bogman

Andi Mancuso

Fernando J. Miguel

Commissioning Editor

Ashwin Nair

Acquisition Editors

Mary Jasmine

Nikhil Karkal

Content Development Editor

Priya Singh

Technical Editors

Neha Mankare

Menza Mathew

Krishnaveni Nair

Shiny Poojary

Copy Editors

Aditya Nair

Tanvi Gaitonde

Kirti Pai

Project Coordinator

Sanghamitra Deb

Proofreaders

Simran Bhogal

Indexer

Hemangini Bari

Mehreen Deshmukh

Graphics

Ronak Dhruv

Abhinash Sahu

Production Coordinators

Pooja Chiplunkar

Melwyn D'sa

Adonia Jones

Cover Work

Melwyn D'sa

About the Author

Andrea Saccà is a web designer and a frontend developer based in the infamous, central area of Rome, Italy. He is also one of the first Magento Certified Front End Developers and he will be speaker to the first Meet Magento Italy 2014.

After his studies in Graphic and Web Design in Rome, he worked for a few renowned web agencies as a web designer, and in 2012, he started his freelance career. After two years of freelancing, he started his own web agency, 1604lab (www.1604lab.com) in Rome. You can visit the twitter page for his website at @1604lab.

He is a multiskilled web designer and a developer who specializes in creating an effective online presence for all kind of businesses, start-ups, and individuals, for customers all over the world.

Andrea is a passionate and hard-working individual with a strong ambition, and yes, he's a bit of a geek too! In his free time he likes snowboarding, playing guitar, going to the cinema, and drinking some beer with his friends.

You can follow Andrea on twitter at @andreasacca, and on his personal blog at www.andreasacca.it.

A special thanks to my mother and family, who always supported me; my girlfriend, Ilaria, who supported and endured me in this adventure; Gaia, who believed in me from the beginning; Paolo, who introduced me to Magento from the earlier versions; Mihai, who taught me the PHP basics; and Antonio, who bought me my first computer. I would also like to thank my friends, Silvia and Andrea e Riccardo, who helped me with English, and all my friends and people who believe in me.

Last but not least, I would like to thank Magento Commerce, who created this awesome CMS, and the community, who support the open source environment.

About the Reviewers

Srikanth AD is a Magento Certified Front End Developer passionate about developing and optimizing websites for a better user experience and search engine visibility. He is particularly interested in adapting content management systems to develop structured and scalable websites. Find out more about him at http://srikanth.me and get in touch via Twitter @Srikanth_AD.

Ray Bogman is an IT professional and a Magento evangelist from the Netherlands. He started working with computers as a hobby in 1983. In the past, he worked for KPN, a large Dutch Telecom company, as a senior security officer.

He has been the CTO of Wild Hibiscus, Netherlands, since 2010; the CTO of Jira ICT since 2005, and the CTO of SupportDesk B.V, which he co-founded in 2011. He is also the co-founder and creator of Yireo.

At SupportDesk B.V, he is a Magento, Joomla, web/server/mobile performance specialist, and a security evangelist. At work, he focuses on business development and on training webmasters and consultants in Magento, from the basics up to an advanced level. He has trained over 1000 Magento and 750 Joomla experts worldwide since 2005.

In Magento events such as Magento Developers Paradise and Meet Magento, he has been a regular speaker since 2009.

Besides work, his hobbies are snowboarding, running, going to the movies and music concerts, and loving his wife Mette and daughter Belize..

He has participated in reviewing Mastering Magento, Bret Williams, Packt Publishing; Mastering Magento [VIDEO], Franklin Strube, Packt Publishing; and Joomla! templates ontwerpen, Jisse Reitsma, Van Duuren Media, a Dutch book that covers Joomla template tutorials.

I would like to thank my loving wife, Mette, and daughter, Belize, for their constant support.

Andi Mancuso is a web designer and Internet marketer with a wide range of skills including CMS management and theme customization. She has an experience of over a decade in creating unique, branded websites and professional blogs, and she has worked in both corporate and small business environments with e-commerce and/or informational online presences. Her primary focus in web designing is user experience, employing deep knowledge of visual psychology and a written voice to optimize a visitor's usage and impression of a website. She currently works for a global company as a marketing manager, accepting independent editing and design work in her free time.

Fernando J. Miguel has been working on the backend development of Content Management System (CMS) since 2004. He has a bachelor's degree in Information System and is a postgraduate in Health Informatics at Universidade Federal de São Paulo, Brazil. He has experience in PHP, JSP, Java, Objective C, Zend Framework 2, Yii PHP Framework, jQuery, Node.js, Prototype, Mac OS X, iOS, Android, MySQL, Oracle, PL/SQL, HTML5, CSS3, web services, WordPress, Magento, and Joomla!

Currently, he is working in the company named Origami Web (http://www.origamiweb.com.br) and has also been working with Magento Development, WordPress, and Zend Framework 2, besides working on Android and iOS mobile development. Fernando is also engaged in social projects such as technologically assisting an NGO, Alma Vira-lata from Ubatuba, SP, Brazil (http://www.almaviralata.org.br), which is responsible for the protection of abandoned animals.

Fernando has reviewed the following Packt Publishing books: Magento 1.4 Theming Cookbook, Jose Argudo Blanco; Mastering Magento, Bret Williams; and the Mastering Magento [VIDEO], Franklin Strube. He is currently working on revising the Mastering Magento PHP book.

I would like to dedicate this work to my beloved grandmother, Mildes, and my mother, Ednéia, who are no longer with me, and the love of my life, my dear wife, Elizabete. These women will always continue to inspire my work.

www.PacktPub.com

Support files, eBooks, discount offers, and more

You might want to visit www.PacktPub.com for support files and downloads related to your book.

Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.PacktPub.com and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at for more details.

At www.PacktPub.com, you can also read a collection of free technical articles, sign up for a range of free newsletters and receive exclusive discounts and offers on Packt books and eBooks.