Creating a Responsive Magento Theme with Bootstrap 3 | Mastering Magento Theme Design

Sign In Start Free Trial

Book Overview & Buying
Table Of Contents

Mastering Magento Theme Design

By : Andrea Sacca

4.2 (5)

Mastering Magento Theme Design

4.2 (5)

By: Andrea Sacca

Overview of this book

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

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

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

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

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

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

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

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

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

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

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

Developing the footer

The footer I designed for this theme is made up of two rows and two main columns in the first row. We will put the static contents such as the footer company's description, footer links, social links, and card image in CMS static blocks.

Hence, the user who manages the store can easily manage the footer from the admin panel. The final result will be similar to what is shown in the following screenshot:

All the links and the text in the footer are made of CMS blocks, so let's see the HTML structure. The footer file footer.phtml is located at app/design/frontend/bookstore/default/template/page/html/ like the header file.

The HTML code of the footer will look as follows:

<div class="row">
<div class="col-md-4">
<?php echo $this->getChildHtml('footer-company') ?>
</div>
<div class="col-md-8">
<div class="row">
<?php echo $this->getChildHtml('footer-cmslinks') ?>
<hr>
</div>
<div class="row">
<div class="col...

CONTINUE READING

83

Tech Concepts

36

Programming languages

73

Tech Tools

Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.

Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.

50+ new titles added per month and exclusive early access to books as they are being written.

Mastering Magento Theme Design

Search

Your notes and bookmarks