Preface

In recent years, Magento has become one of the most important CMS platforms for e-commerce. The e-commerce sector is growing very rapidly and professionals find it a very useful resource to work on. Thanks to its great flexibility, scalability, and optimization, Magento has become a tool that is most used by designers, developers, and web agencies to create an e-commerce website.

Magento is a CMS that is very complex and hard to customize, but with this book, you will learn how to create a customized, responsive Magento theme with custom pages, widgets, and an awesome admin panel.

You will also be able to edit the design of the backend, customize the login panel, and add a new look and feel to the Magento admin panel.

At the end of this book, you will know how to create a customized, professional, and fully responsive Magento theme.

You can improve your development skills with the best practices and tips, adding new skills to your portfolio/resume, and expanding your target customers.

What this book covers

Chapter 1, Introducing Magento Theme Design, introduces the basic information that you need to create a customized Magento theme with all the required files, and a review about the files' structure.

Chapter 2, Creating a Responsive Magento Theme with Bootstrap 3, guides you to create the base for a responsive design of the theme with the integration of the famous frontend framework, Bootstrap 3.

Chapter 3, Customizing Our Custom Theme, guides you to develop a customized home page by adding the Bootstrap carousel as the main slider, a custom vertical navigation menu on the left sidebar, and a products grid.

We will also learn how to customize the other main pages of the theme.

Chapter 4, Adding Incredible Effects to Our Theme, helps you to insert awesome animations and CSS3 and jQuery effects into the theme, improving the aesthetics, usability, and graphic appeal to create a great visual impact.

Chapter 5, Making the Theme Fully Responsive, guides you in the optimization of the theme for mobile and tablet devices, solving the most commons problems related to the responsive design.

Chapter 6, Making the Theme Socially Ready, explains how to integrate social plugins in your theme to enable social sharing of the contents in some sections of the theme.

Chapter 7, Creating a Magento Widget, introduces the base of the Magento widgets and helps you learn how to create a customized module that provides a simple customized widget.

Chapter 8, Creating a Theme Admin Panel, explains how to create a custom Magento module that adds a control panel for the theme with configuration options to customize the theme from the backend.

Chapter 9, Customizing the Backend of Magento, explains how to improve the look and feel of the design of the Magento backend, and create a custom theme for the backend that will customize the administration area from the login page to the admin backend.

Chapter 10, Packaging and Selling the Theme, explains how to pack the theme with all the necessary files, for it to be sold on the most popular theme marketplaces.

Appendix, Conclusions and Credits, contains the useful links, resources, and credits mentioned in the book.

What you need for this book

To start creating the advanced theme described in this book, you will need the following:

• A Magento 1.8.0.0 CE installation with sample data

• One graphic theme mockup PSD to develop the themes

Prerequisites

To start this project, you need basic knowledge of Magento CMS and the file structure. An advanced knowledge of programming languages such as HTML, PHP, CSS, and JavaScript are needed to proceed rapidly through all the chapters.

The prerequisites include knowledge in the following fields:

• HTML, CSS, PHP and JavaScript

• jQuery

• Magento CE (Community Edition)

• Magento files structure

• The Bootstrap 3 framework (non-essential)

Who this book is for

If you are a designer, developer, or web agency who is already familiar with Magento designing, but want to create a complex template, this book is for you.

Among the potential readers of this book, there are also backend developers who want to learn how to create themes for the frontend.

So, if you want to learn how to create fully customized Magento themes, this is the right book for you.

Conventions

In the book we have used the following typographic conventions including: Italic for emphasis, and Monospace for indicating paths and filenames.

A block of code, indicating HTML, PHP, or jQuery snippets of code and other code blocks are set as follows:

<a href="<?php echo Mage::helper('adminhtml')->getUrl('adminhtml/index/forgotpassword',array('_nosecret' => true)) ?>">
  <?php echo Mage::helper('adminhtml')->__('Forgot your password?') ?>
</a>

When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:

<topheader_color1 translate="label">
<label>Top Header Background: </label>
  <comment>Comment…</comment>
  <frontend_type>text</frontend_type>
  <validate>color</validate>
  <sort_order>02</sort_order>
  <show_in_default>1</show_in_default>
  <show_in_website>1</show_in_website>
  <show_in_store>1</show_in_store>
  <depends>
    <topheader_enable>1</topheader_enable>
  </depends>
</topheader_color1>

New terms and important words are shown in bold. Words that you see on the screen, in menus or dialog boxes for example, appear in the text like this: "To make a donation, click on the Contribute button and make your offer."

Note

Warnings or important notes appear in a box like this.

Tip

Tips and tricks appear like this.

Reader feedback

Feedback from our readers is always welcome. Let us know what you think about this book—what you liked or may have disliked. Reader feedback is important for us to develop titles that you really get the most out of.

To send us general feedback, simply send an e-mail to <[e-mail]>, and mention the book title via the subject of your message.

If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide on www.packtpub.com/authors.

Customer support

Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.

Downloading the example code

You can download the example code files for all Packt books you have purchased from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.

Errata

Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books—maybe a mistake in the text or the code—we would be grateful if you would report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this book. If you find any errata, please report them by visiting http://www.packtpub.com/submit-errata, selecting your book, clicking on the errata submission form link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded on our website, or added to any list of existing errata, under the Errata section of that title. Any existing errata can be viewed by selecting your title from http://www.packtpub.com/support.

Piracy

Piracy of copyright material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works, in any form, on the Internet, please provide us with the location address or website name immediately so that we can pursue a remedy.

Please contact us at <[e-mail]> with a link to the suspected pirated material.

We appreciate your help in protecting our authors, and our ability to bring you valuable content.

Questions

You can contact us at <[e-mail]> if you are having a problem with any aspect of the book, and we will do our best to address it.