Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Save more on your purchases! discount-offer-chevron-icon
Savings automatically calculated. No voucher code required.
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Free Learning
Arrow right icon
Mastering Magento Theme Design
Mastering Magento Theme Design

Mastering Magento Theme Design: Magento is the super-capable open source e-commerce platform that's number one for a reason. By using this book to optimize your know-how, you'll be acquiring the ultimate in e-tail expertise for yourself and your clients.

eBook
$9.99 $36.99
Paperback
$60.99
Subscription
Free Trial
Renews at $19.99p/m

What do you get with Print?

Product feature icon Instant access to your digital eBook copy whilst your Print order is Shipped
Product feature icon Paperback book shipped to your preferred address
Product feature icon Download this book in EPUB and PDF formats
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
OR
Modal Close icon
Payment Processing...
tick Completed

Shipping Address

Billing Address

Shipping Methods
Table of content icon View table of contents Preview book icon Preview Book

Mastering Magento Theme Design

Chapter 2. Creating a Responsive Magento Theme with Bootstrap 3

In the previous chapter, we learned the fundamentals to create a custom Magento theme, and we created the basic structure of our theme. In this chapter, we will learn how to integrate the Bootstrap 3 framework and how to develop the main theme blocks.

The following topics will be covered in this chapter:

  • 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

  • Developing the footer

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.

Downloading Bootstrap (the current Version 3.1.1)


First, you need to download the latest version of Bootstrap. The current version is 3.0. You can download the framework from http://getbootstrap.com/.

The fastest way to download Bootstrap is to download the precompiled and minified versions of CSS, JavaScript, and fonts. So, click on the Download Bootstrap button and unzip the file you downloaded. Once the archive is unzipped, you will see the following files:

We need to take only the minified version of the files, that is, bootstrap.min.css from css, bootstrap.min.js from js, and all the files from font.

Note

For development, you can use bootstrap.css so that you can inspect the code and learn, and then switch to bootstrap.min.css when you go live.

Copy all the selected files (CSS files inside the css folder, the .js files inside the js folder, and the font files inside the fonts folder) in the theme skin folder at skin/frontend/bookstore/default.

Downloading and including jQuery


Bootstrap is dependent on jQuery, so we have to download and include it before including boostrap.min.js. So, download jQuery from http://jquery.com/download/.

The preceding URL takes us to the following screenshot:

We will use the compressed production Version 1.10.2.

Once you download jQuery, rename the file as jquery.min.js and copy it into the js skin folder at skin/frontend/bookstore/default/js/.

In the same folder, also create the jquery.scripts.js file, where we will insert our custom scripts.

Note

Magento uses Prototype as the main JavaScript library. To make jQuery work correctly without conflicts, you need to insert the no conflict code in the jquery.scripts.js file, as shown in the following code:

// This is important!
jQuery.noConflict();

jQuery(document).ready(function() {
   // Insert your scripts here
});

The following is a quick recap of CSS and JS files:

Integrating the files into the theme


Now that we have all the files, we will see how to integrate them into the theme.

To declare the new JavaScript and CSS files, we have to insert the action in the local.xml file located at app/design/frontend/bookstore/default/layout.

Tip

As explained in the previous chapter, all the overrides of the base theme should go in the local.xml file and we are going to use it to add new CSS and JavaScript files.

In particular, the file declaration needs to be done in the default handle to make it accessible by the whole theme.

The default handle is defined by the following tags:

<default>
   . . .
</default>

The action to insert the JavaScript and CSS files must be placed inside the reference head block. So, open the local.xml file and first create the following block that will define the reference:

<reference name="head">
…
</reference>

Declaring the .js files in local.xml

The action tag used to declare a new .js file located in the skin folder...

Defining the main layout design template


A quick tip for our theme is to define the main template for the site in the default handle.

To do this, we have to define the template into the most important reference, root. In a few words, the root reference is the block that defines the structure of a page.

Let's suppose that we want to use a main structure having two columns with the left sidebar for the theme To change it, we should add the setTemplate action in the root reference as follows:

<reference name="root">
   <action method="setTemplate">
     <template>page/2columns-left.phtml</template>
   </action>
</reference>

You have to insert the reference name "root" tag with the action inside the default handle, usually before every other reference.

Defining the HTML5 boilerplate for main templates

After integrating Bootstrap and jQuery, we have to create our HTML5 page structure for the entire base template.

The following are the structure files that we created...

Developing the header


The header of our theme will look as shown in the following screenshot:

As you can see, there are three main sections that I will call the top header (the black line on the top), the main header (the white one), and the navigation bar.

To customize our header, open the header.phtml file located at app/design/frontend/bookstore/default/page/html and create the basic structure with the Bootstrap scaffolding. Our header file code will look as follows:

<!-- TopBar -->
<div id="topbar">
<div class="container">
<div class="row">
... 
</div>
</div>
</div>

<!-- Header -->
<div id="header">
<div class="container">
<div class="row">

</div>
</div>
</div>

<!-- Navigation -->
<nav>
. . .
</nav>

Let's discuss the preceding code in detail:

  • In the first block, inside the top header div element, we put some custom links or custom text in the left, and the user area in the right

  • In the...

Creating the navigation bar


For the navigation bar, we can use the <nav> tag to wrap it up and make it responsive and ready with some tricks. Bootstrap helps us with the navigation component that we can integrate with a little help from jQuery.

In the header.phtml file, the navigation block looks as follows:

<!-- Navigation -->
<nav class="navbar navbar-default navbar-main" role="navigation">
<div class="container">
<div class="row">
<div class="navbar-header">
<a class="navbar-brand visible-xs" href="#">
<?php echo $this->__('Categories') ?>
</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
<span class="sr-only"><?php echo $this->__('Toggle Navigation') ?></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar...

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...

Summary


OK, now the header and the footer are complete! In the next chapter, we will develop our custom home page with the Bootstrap carousel, products in the home page, and some custom banners.

We've seen how to integrate Bootstrap and start the development of a Magento theme with the most famous framework in the world.

Bootstrap is very neat, flexible, and modular, and you can use it as you prefer to create your custom theme.

However, please keep in mind that it can be a big drawback on the loading time of the page. Following these techniques by adding the JavaScript and CSS classes via XML, you can allow Magento to minify them to speed up the loading time of the site.

In the next chapter, we will learn how to develop the home page with advanced techniques and how to create other custom pages following the basic principles of Magento's fall-back system.

Left arrow icon Right arrow icon
Estimated delivery fee Deliver to Taiwan

Standard delivery 10 - 13 business days

$12.95

Premium delivery 5 - 8 business days

$45.95
(Includes tracking information)

Product Details

Country selected
Publication date, Length, Edition, Language, ISBN-13
Publication date : Apr 25, 2014
Length: 310 pages
Edition :
Language : English
ISBN-13 : 9781783288236
Vendor :
Magento
Languages :
Concepts :
Tools :

What do you get with Print?

Product feature icon Instant access to your digital eBook copy whilst your Print order is Shipped
Product feature icon Paperback book shipped to your preferred address
Product feature icon Download this book in EPUB and PDF formats
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
OR
Modal Close icon
Payment Processing...
tick Completed

Shipping Address

Billing Address

Shipping Methods
Estimated delivery fee Deliver to Taiwan

Standard delivery 10 - 13 business days

$12.95

Premium delivery 5 - 8 business days

$45.95
(Includes tracking information)

Product Details

Publication date : Apr 25, 2014
Length: 310 pages
Edition :
Language : English
ISBN-13 : 9781783288236
Vendor :
Magento
Languages :
Concepts :
Tools :

Packt Subscriptions

See our plans and pricing
Modal Close icon
$19.99 billed monthly
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Simple pricing, no contract
$199.99 billed annually
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just $5 each
Feature tick icon Exclusive print discounts
$279.99 billed in 18 months
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just $5 each
Feature tick icon Exclusive print discounts

Frequently bought together


Stars icon
Total $ 109.98
Mastering Magento Theme Design
$60.99
Learning Magento Theme Development
$48.99
Total $ 109.98 Stars icon
Banner background image

Table of Contents

10 Chapters
Introducing Magento Theme Design Chevron down icon Chevron up icon
Creating a Responsive Magento Theme with Bootstrap 3 Chevron down icon Chevron up icon
Customizing Our Custom Theme Chevron down icon Chevron up icon
Adding Incredible Effects to Our Theme Chevron down icon Chevron up icon
Making the Theme Fully Responsive Chevron down icon Chevron up icon
Making the Theme Socially Ready Chevron down icon Chevron up icon
Creating a Magento Widget Chevron down icon Chevron up icon
Creating a Theme Admin Panel Chevron down icon Chevron up icon
Customizing the Backend of Magento Chevron down icon Chevron up icon
Packaging and Selling the Theme Chevron down icon Chevron up icon

Customer reviews

Rating distribution
Full star icon Full star icon Full star icon Full star icon Half star icon 4.2
(5 Ratings)
5 star 80%
4 star 0%
3 star 0%
2 star 0%
1 star 20%
mrGott Nov 01, 2014
Full star icon Full star icon Full star icon Full star icon Full star icon 5
This is what I wanted. A great book for theme development. There are many others but this one covers topics that were very interesting for me.
Amazon Verified review Amazon
Alfredo Kang Jun 28, 2014
Full star icon Full star icon Full star icon Full star icon Full star icon 5
Livro muito bom, um dos melhores que ja Li, relacionado ao desenvolvimento de temas em Magento, bem detalhado e de facil compreensao, recomendo a todos.
Amazon Verified review Amazon
JC Mar 27, 2015
Full star icon Full star icon Full star icon Full star icon Full star icon 5
This is the best resource to learn magento the development, no other book comes close to this.I was able to learn and apply the techniques of this book on my first custom magento theme at work, it was very straightforward, and the theme used in the book uses nice css3 effects.Overall in my opinion compared to others, this is the best book on magento theme design
Amazon Verified review Amazon
Daniele Rutigliano Dec 09, 2014
Full star icon Full star icon Full star icon Full star icon Full star icon 5
Il libro è chiarissimo, nonostante sia in inglese. Gli esempi pratici e gli screenshot aiutano molto il lettore. Inoltre è molto dettagliato... Direi illuminante! Consigliatissimo. I 37,00 euro sono ben spesi, fidatevi!
Amazon Verified review Amazon
Mantas Jocius Aug 13, 2016
Full star icon Empty star icon Empty star icon Empty star icon Empty star icon 1
A lot of mistakes in code examples.
Amazon Verified review Amazon
Get free access to Packt library with over 7500+ books and video courses for 7 days!
Start Free Trial

FAQs

What is the delivery time and cost of print book? Chevron down icon Chevron up icon

Shipping Details

USA:

'

Economy: Delivery to most addresses in the US within 10-15 business days

Premium: Trackable Delivery to most addresses in the US within 3-8 business days

UK:

Economy: Delivery to most addresses in the U.K. within 7-9 business days.
Shipments are not trackable

Premium: Trackable delivery to most addresses in the U.K. within 3-4 business days!
Add one extra business day for deliveries to Northern Ireland and Scottish Highlands and islands

EU:

Premium: Trackable delivery to most EU destinations within 4-9 business days.

Australia:

Economy: Can deliver to P. O. Boxes and private residences.
Trackable service with delivery to addresses in Australia only.
Delivery time ranges from 7-9 business days for VIC and 8-10 business days for Interstate metro
Delivery time is up to 15 business days for remote areas of WA, NT & QLD.

Premium: Delivery to addresses in Australia only
Trackable delivery to most P. O. Boxes and private residences in Australia within 4-5 days based on the distance to a destination following dispatch.

India:

Premium: Delivery to most Indian addresses within 5-6 business days

Rest of the World:

Premium: Countries in the American continent: Trackable delivery to most countries within 4-7 business days

Asia:

Premium: Delivery to most Asian addresses within 5-9 business days

Disclaimer:
All orders received before 5 PM U.K time would start printing from the next business day. So the estimated delivery times start from the next day as well. Orders received after 5 PM U.K time (in our internal systems) on a business day or anytime on the weekend will begin printing the second to next business day. For example, an order placed at 11 AM today will begin printing tomorrow, whereas an order placed at 9 PM tonight will begin printing the day after tomorrow.


Unfortunately, due to several restrictions, we are unable to ship to the following countries:

  1. Afghanistan
  2. American Samoa
  3. Belarus
  4. Brunei Darussalam
  5. Central African Republic
  6. The Democratic Republic of Congo
  7. Eritrea
  8. Guinea-bissau
  9. Iran
  10. Lebanon
  11. Libiya Arab Jamahriya
  12. Somalia
  13. Sudan
  14. Russian Federation
  15. Syrian Arab Republic
  16. Ukraine
  17. Venezuela
What is custom duty/charge? Chevron down icon Chevron up icon

Customs duty are charges levied on goods when they cross international borders. It is a tax that is imposed on imported goods. These duties are charged by special authorities and bodies created by local governments and are meant to protect local industries, economies, and businesses.

Do I have to pay customs charges for the print book order? Chevron down icon Chevron up icon

The orders shipped to the countries that are listed under EU27 will not bear custom charges. They are paid by Packt as part of the order.

List of EU27 countries: www.gov.uk/eu-eea:

A custom duty or localized taxes may be applicable on the shipment and would be charged by the recipient country outside of the EU27 which should be paid by the customer and these duties are not included in the shipping charges been charged on the order.

How do I know my custom duty charges? Chevron down icon Chevron up icon

The amount of duty payable varies greatly depending on the imported goods, the country of origin and several other factors like the total invoice amount or dimensions like weight, and other such criteria applicable in your country.

For example:

  • If you live in Mexico, and the declared value of your ordered items is over $ 50, for you to receive a package, you will have to pay additional import tax of 19% which will be $ 9.50 to the courier service.
  • Whereas if you live in Turkey, and the declared value of your ordered items is over € 22, for you to receive a package, you will have to pay additional import tax of 18% which will be € 3.96 to the courier service.
How can I cancel my order? Chevron down icon Chevron up icon

Cancellation Policy for Published Printed Books:

You can cancel any order within 1 hour of placing the order. Simply contact customercare@packt.com with your order details or payment transaction id. If your order has already started the shipment process, we will do our best to stop it. However, if it is already on the way to you then when you receive it, you can contact us at customercare@packt.com using the returns and refund process.

Please understand that Packt Publishing cannot provide refunds or cancel any order except for the cases described in our Return Policy (i.e. Packt Publishing agrees to replace your printed book because it arrives damaged or material defect in book), Packt Publishing will not accept returns.

What is your returns and refunds policy? Chevron down icon Chevron up icon

Return Policy:

We want you to be happy with your purchase from Packtpub.com. We will not hassle you with returning print books to us. If the print book you receive from us is incorrect, damaged, doesn't work or is unacceptably late, please contact Customer Relations Team on customercare@packt.com with the order number and issue details as explained below:

  1. If you ordered (eBook, Video or Print Book) incorrectly or accidentally, please contact Customer Relations Team on customercare@packt.com within one hour of placing the order and we will replace/refund you the item cost.
  2. Sadly, if your eBook or Video file is faulty or a fault occurs during the eBook or Video being made available to you, i.e. during download then you should contact Customer Relations Team within 14 days of purchase on customercare@packt.com who will be able to resolve this issue for you.
  3. You will have a choice of replacement or refund of the problem items.(damaged, defective or incorrect)
  4. Once Customer Care Team confirms that you will be refunded, you should receive the refund within 10 to 12 working days.
  5. If you are only requesting a refund of one book from a multiple order, then we will refund you the appropriate single item.
  6. Where the items were shipped under a free shipping offer, there will be no shipping costs to refund.

On the off chance your printed book arrives damaged, with book material defect, contact our Customer Relation Team on customercare@packt.com within 14 days of receipt of the book with appropriate evidence of damage and we will work with you to secure a replacement copy, if necessary. Please note that each printed book you order from us is individually made by Packt's professional book-printing partner which is on a print-on-demand basis.

What tax is charged? Chevron down icon Chevron up icon

Currently, no tax is charged on the purchase of any print book (subject to change based on the laws and regulations). A localized VAT fee is charged only to our European and UK customers on eBooks, Video and subscriptions that they buy. GST is charged to Indian customers for eBooks and video purchases.

What payment methods can I use? Chevron down icon Chevron up icon

You can pay with the following card types:

  1. Visa Debit
  2. Visa Credit
  3. MasterCard
  4. PayPal
What is the delivery time and cost of print books? Chevron down icon Chevron up icon

Shipping Details

USA:

'

Economy: Delivery to most addresses in the US within 10-15 business days

Premium: Trackable Delivery to most addresses in the US within 3-8 business days

UK:

Economy: Delivery to most addresses in the U.K. within 7-9 business days.
Shipments are not trackable

Premium: Trackable delivery to most addresses in the U.K. within 3-4 business days!
Add one extra business day for deliveries to Northern Ireland and Scottish Highlands and islands

EU:

Premium: Trackable delivery to most EU destinations within 4-9 business days.

Australia:

Economy: Can deliver to P. O. Boxes and private residences.
Trackable service with delivery to addresses in Australia only.
Delivery time ranges from 7-9 business days for VIC and 8-10 business days for Interstate metro
Delivery time is up to 15 business days for remote areas of WA, NT & QLD.

Premium: Delivery to addresses in Australia only
Trackable delivery to most P. O. Boxes and private residences in Australia within 4-5 days based on the distance to a destination following dispatch.

India:

Premium: Delivery to most Indian addresses within 5-6 business days

Rest of the World:

Premium: Countries in the American continent: Trackable delivery to most countries within 4-7 business days

Asia:

Premium: Delivery to most Asian addresses within 5-9 business days

Disclaimer:
All orders received before 5 PM U.K time would start printing from the next business day. So the estimated delivery times start from the next day as well. Orders received after 5 PM U.K time (in our internal systems) on a business day or anytime on the weekend will begin printing the second to next business day. For example, an order placed at 11 AM today will begin printing tomorrow, whereas an order placed at 9 PM tonight will begin printing the day after tomorrow.


Unfortunately, due to several restrictions, we are unable to ship to the following countries:

  1. Afghanistan
  2. American Samoa
  3. Belarus
  4. Brunei Darussalam
  5. Central African Republic
  6. The Democratic Republic of Congo
  7. Eritrea
  8. Guinea-bissau
  9. Iran
  10. Lebanon
  11. Libiya Arab Jamahriya
  12. Somalia
  13. Sudan
  14. Russian Federation
  15. Syrian Arab Republic
  16. Ukraine
  17. Venezuela