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
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
chevron up
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

Chapter 4. Adding Incredible Effects to Our Theme

In this chapter, we are going to add some lovely animations to the theme to give the end users of the site a better user experience. We will learn how to create a dropdown cart in the header and how to insert jQuery animations and CSS3 transitions.

The following topics will be covered in this chapter:

  • Introducing CSS3 transitions

  • Creating an animated cart in the header

  • Creating a stunning CSS3 3D flip animation

  • Creating a custom product images gallery

  • Adding custom fonts to our theme

  • Adding a custom icon font to our theme

Visually different images
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 4
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