Browse Library
Sign In Start Free Trial
Close icon Search icon
Account
Browse Library Sign In Start Free Trial

Add to playlist

Create a Playlist

Modal Close icon
You need to login to use this feature.
  • Book Overview & Buying Mastering Magento Theme Design
  • Table Of Contents Toc
Mastering Magento Theme Design

Mastering Magento Theme Design

By : Andrea Sacca
4.2 (5)
Buy this Book
close
close
Mastering Magento Theme Design

Mastering Magento Theme Design

4.2 (5)
By: Andrea Sacca
Buy this Book

Overview of this book

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

The basic concepts of a Magento theme

Before you begin to create your theme, there are some basics you need to know that will help you. This is supposed to be a review of the basic concepts and techniques that you should already know, which will speed up the development of the theme.

The Magento base theme

The base theme was introduced in the CE (Community Edition) Version 1.4 and EE (Enterprise Edition) Version 1.8. The main difference between the CE and EE is the price and support.

In fact, the CE is open source and anyone can download and use it as an e-commerce platform. The EE has an annual fee of $12,000, and it has the same base of the community edition but it is aimed to companies that needs special customizations, additional functionality, and the support of the Magento team.

It's very important to understand that the base theme of Magento is essential to make the other themes work correctly, which in fact will depend on it. The base theme is the core of the Magento frontend.

The following are the frontend base theme directories:

  • app/design/frontend/base

  • skin/frontend/base/

The hierarchy of files and the fall-back system

The frontend of Magento has been structured in such a way that it allows the designers to create themes based on the basic theme, without changing its structure. This fall-back system allows us to create only the files that are necessary for the customization of our theme. All other files, if any, will be taken from the base theme.

In order to create the theme's files, we can proceed in the following two ways:

  • Create the empty files in the appropriate directories and write all the code by hand. You can choose this option if you are an advanced developer who knows how to get the information in the right way from the database.

  • Copy the files from the base theme and edit them accordingly. You can use this option to analyze and study the code, and learn how to retrieve the information of the products, blocks, and so on.

In this book, we will use the second option, which is easier and faster. In the theme you need to create/duplicate only the strictly necessary files for its customization. This allows you to have a theme that is much lighter and with fewer files.

For example, let's say we want to change the header.phtml file that is the block of the theme header. You can copy the header.phtml file from the app/design/frontend/base/default/template/page/html/ path to the app/design/frontend/custom_package/custom_theme/template/page/html/ path.

Tip

It is absolutely important to know that you must not create a theme under the base package; you should create a custom package and place the themes inside it.

CONTINUE READING
83
Tech Concepts
36
Programming languages
73
Tech Tools
Icon Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.
Icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Icon 50+ new titles added per month and exclusive early access to books as they are being written.
Mastering Magento Theme Design
End of Section 1
Next Section
notes
bookmark Notes and Bookmarks search Search in title playlist Add to playlist font-size Font size

Change the font size

margin-width Margin width

Change margin width

day-mode Day/Sepia/Night Modes

Change background colour

Close icon Search
Country selected
Close icon Your notes and bookmarks

Confirmation

Modal Close icon
claim successful
Order Page Read Now

Buy this book with your credits?

Modal Close icon
Are you sure you want to buy this book with one of your credits?
Close
YES, BUY

Submit Your Feedback

Modal Close icon
Modal Close icon
Modal Close icon