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

Written in a step-by-step, tutorial style with a lot of code snippets and hands-on examples to create an advanced Magento theme from scratch, this book is tailor-made for web designers and developers. This book is great for developers and web designers who are looking to get a good grounding in how to create custom, responsive, and advanced Magento themes. Readers must have some experience with HTML, PHP, CSS, and Magento theme design. This book will be useful for anybody who already has knowledge of the Magento frontend structure.
Table of Contents (13 chapters)
close
close
close
Preface
Icon
Preface
Icon
What this book covers
Icon
What you need for this book
Icon
Prerequisites
Icon
Who this book is for
Icon
Conventions
Icon
Reader feedback
Icon
Customer support
Lock Free Chapter
1
1. Introducing Magento Theme Design
chevron up
Icon
1. 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
2. Creating a Responsive Magento Theme with Bootstrap 3
Icon
2. 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
3. Customizing Our Custom Theme
Icon
3. 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
4. Adding Incredible Effects to Our Theme
Icon
4. 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
5. Making the Theme Fully Responsive
Icon
5. 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
6. Making the Theme Socially Ready
Icon
6. 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
7. Creating a Magento Widget
Icon
7. 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
8. Creating a Theme Admin Panel
Icon
8. 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
9. Customizing the Backend of Magento
Icon
9. 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
10. Packaging and Selling the Theme
Icon
10. 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
11
A. Conclusions and Credits
Icon
A. 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
12
Index
Icon
Index

Chapter 1. Introducing Magento Theme Design

Creating a Magento theme can be more complicated than any other CMS (Content Management System). This is because Magento has a complex structure and the files are located in multiple directories.

In this chapter, we will analyze the concepts and basic information that you need to know about the design of Magento, how to create the structure of a new theme, and how to activate it.

At the end of this chapter, you will be able to create the foundation of your theme, ready to be developed.

The following topics will be covered in this chapter:

  • The basic concepts of a Magento theme
  • The structure of a Magento theme
  • Structural blocks and content blocks
  • CMS blocks and pages
  • Variables
  • Widgets
  • Creating and activating a theme
  • Tips and tricks
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