Book Image

Mastering Magento Theme Design

By : Andrea Sacca
Book Image

Mastering Magento Theme Design

By: Andrea Sacca

Overview of this book

Related Content you might be interested in

Current Title:

Small book image
Mastering Magento Theme Design
Andrea Sacca
Apr, 2014 | 310 pages
No titles found
Table of Contents (18 chapters)
Mastering Magento Theme Design
Mastering Magento Theme Design
Credits
Credits
About the Author
About the Author
About the Reviewers
About the Reviewers
www.PacktPub.com
www.PacktPub.com
Preface
Preface
Free Chapter
1
Introducing Magento Theme Design
Introducing Magento Theme Design
The basic concepts of a Magento theme
The structure of a Magento theme
Creating the theme
Tips and tricks
Summary
2
Creating a Responsive Magento Theme with Bootstrap 3
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
Defining the main layout design template
Developing the header
Creating the navigation bar
Developing the footer
Summary
3
Customizing Our Custom Theme
Customizing Our Custom Theme
Developing the home page
Customizing the left sidebar
Customizing the main content
Customizing the other pages of the theme
Summary
4
Adding Incredible Effects to Our Theme
Adding Incredible Effects to Our Theme
Introducing CSS3 transitions
Creating an animated cart in the header
Creating a stunning CSS3 3D flip animation
Creating a custom product images gallery
Adding a custom font to our theme
Adding a custom icon font to our theme
Summary
5
Making the Theme Fully Responsive
Making the Theme Fully Responsive
Our goal
Using specific CSS3 media queries
Optimizing the theme for multiple devices
Tips and tools for responsive coding
Adding mobile icons
Summary
6
Making the Theme Socially Ready
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
Adding the Facebook Like box to the left sidebar
Summary
7
Creating a Magento Widget
Creating a Magento Widget
Getting started with Magento widgets
Developing a widget
Creating a widget with options
Adding the widget in the admin panel
Summary
8
Creating a Theme Admin Panel
Creating a Theme Admin Panel
Creating the theme options module
Overviewing the System.xml fields
Creating the advanced admin options panel
Interfacing the admin panel with the theme
Advanced options features
Creating a visual color picker in admin
A quick recap of the theme's option panel
Summary
9
Customizing the Backend of Magento
Customizing the Backend of Magento
An overview of the admin design
Changing the default admin panel
Creating a custom Magento admin theme
Creating a custom login page
Customizing the retrieve password form
Installing the Magento Go admin theme
Summary
10
Packaging and Selling the Theme
Packaging and Selling the Theme
Collecting and placing all the folders and files under one folder
Creating the live demo preview
Creating the documentation of the theme
Packaging the theme
Selling the theme on ThemeForest
Inserting the theme on the Magento Connect site
Support and updates
Summary
Conclusions and Credits
Conclusions and Credits
Official Magento resources
Useful websites on Magento
Free resources for design, UI, and web design
Conclusions
Thank you
Index
Index

An introduction to Bootstrap

Bootstrap is a sleek, intuitive, powerful, mobile-first frontend framework that enables faster and easier web development, as shown in the following screenshot:

Bootstrap is the most popular frontend framework that is used to create mobile-first websites. It includes a free collection of buttons, CSS components, and JavaScript to create websites or web applications; it was created by the Twitter team.

Previous Section
End of Section 2
Next Section