Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Newsletter Hub
Free Learning
Arrow right icon
timer SALE ENDS IN
0 Days
:
00 Hours
:
00 Minutes
:
00 Seconds
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
$24.99 $36.99
Paperback
$60.99
Subscription
Free Trial
Renews at $19.99p/m

What do you get with a Packt Subscription?

Free for first 7 days. $19.99 p/m after that. Cancel any time!
Product feature icon Unlimited ad-free access to the largest independent learning library in tech. Access this title and thousands more!
Product feature icon 50+ new titles added per month, including many first-to-market concepts and exclusive early access to books as they are being written.
Product feature icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Product feature icon Thousands of reference materials covering every tech concept you need to stay up to date.
Subscribe now
View plans & pricing
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

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 a Packt Subscription?

Free for first 7 days. $19.99 p/m after that. Cancel any time!
Product feature icon Unlimited ad-free access to the largest independent learning library in tech. Access this title and thousands more!
Product feature icon 50+ new titles added per month, including many first-to-market concepts and exclusive early access to books as they are being written.
Product feature icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Product feature icon Thousands of reference materials covering every tech concept you need to stay up to date.
Subscribe now
View plans & pricing

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
Learning Magento Theme Development
$48.99
Mastering Magento Theme Design
$60.99
Total $ 109.98 Stars icon

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 included in a Packt subscription? Chevron down icon Chevron up icon

A subscription provides you with full access to view all Packt and licnesed content online, this includes exclusive access to Early Access titles. Depending on the tier chosen you can also earn credits and discounts to use for owning content

How can I cancel my subscription? Chevron down icon Chevron up icon

To cancel your subscription with us simply go to the account page - found in the top right of the page or at https://subscription.packtpub.com/my-account/subscription - From here you will see the ‘cancel subscription’ button in the grey box with your subscription information in.

What are credits? Chevron down icon Chevron up icon

Credits can be earned from reading 40 section of any title within the payment cycle - a month starting from the day of subscription payment. You also earn a Credit every month if you subscribe to our annual or 18 month plans. Credits can be used to buy books DRM free, the same way that you would pay for a book. Your credits can be found in the subscription homepage - subscription.packtpub.com - clicking on ‘the my’ library dropdown and selecting ‘credits’.

What happens if an Early Access Course is cancelled? Chevron down icon Chevron up icon

Projects are rarely cancelled, but sometimes it's unavoidable. If an Early Access course is cancelled or excessively delayed, you can exchange your purchase for another course. For further details, please contact us here.

Where can I send feedback about an Early Access title? Chevron down icon Chevron up icon

If you have any feedback about the product you're reading, or Early Access in general, then please fill out a contact form here and we'll make sure the feedback gets to the right team. 

Can I download the code files for Early Access titles? Chevron down icon Chevron up icon

We try to ensure that all books in Early Access have code available to use, download, and fork on GitHub. This helps us be more agile in the development of the book, and helps keep the often changing code base of new versions and new technologies as up to date as possible. Unfortunately, however, there will be rare cases when it is not possible for us to have downloadable code samples available until publication.

When we publish the book, the code files will also be available to download from the Packt website.

How accurate is the publication date? Chevron down icon Chevron up icon

The publication date is as accurate as we can be at any point in the project. Unfortunately, delays can happen. Often those delays are out of our control, such as changes to the technology code base or delays in the tech release. We do our best to give you an accurate estimate of the publication date at any given time, and as more chapters are delivered, the more accurate the delivery date will become.

How will I know when new chapters are ready? Chevron down icon Chevron up icon

We'll let you know every time there has been an update to a course that you've bought in Early Access. You'll get an email to let you know there has been a new chapter, or a change to a previous chapter. The new chapters are automatically added to your account, so you can also check back there any time you're ready and download or read them online.

I am a Packt subscriber, do I get Early Access? Chevron down icon Chevron up icon

Yes, all Early Access content is fully available through your subscription. You will need to have a paid for or active trial subscription in order to access all titles.

How is Early Access delivered? Chevron down icon Chevron up icon

Early Access is currently only available as a PDF or through our online reader. As we make changes or add new chapters, the files in your Packt account will be updated so you can download them again or view them online immediately.

How do I buy Early Access content? Chevron down icon Chevron up icon

Early Access is a way of us getting our content to you quicker, but the method of buying the Early Access course is still the same. Just find the course you want to buy, go through the check-out steps, and you’ll get a confirmation email from us with information and a link to the relevant Early Access courses.

What is Early Access? Chevron down icon Chevron up icon

Keeping up to date with the latest technology is difficult; new versions, new frameworks, new techniques. This feature gives you a head-start to our content, as it's being created. With Early Access you'll receive each chapter as it's written, and get regular updates throughout the product's development, as well as the final course as soon as it's ready.We created Early Access as a means of giving you the information you need, as soon as it's available. As we go through the process of developing a course, 99% of it can be ready but we can't publish until that last 1% falls in to place. Early Access helps to unlock the potential of our content early, to help you start your learning when you need it most. You not only get access to every chapter as it's delivered, edited, and updated, but you'll also get the finalized, DRM-free product to download in any format you want when it's published. As a member of Packt, you'll also be eligible for our exclusive offers, including a free course every day, and discounts on new and popular titles.