Magento Front End certifcation

Do you know that Magento has also introduced the Front End Developer certifcation? This certifcation is aimed at all the frontend developers with a good knowledge of the Magento front end, whose main focus is on modifying the user interface (UI) of existing themes or on creating new themes.

To become a certifed frontend Magento developer, you have to register on the Magento web site at The certifcation voucher costs 260 USD and you can take the exam at a specifc center nearest to you.

After I took this certifcation, many companies contacted me for professional services to create custom Magento themes or to improve their stores.Thanks to the certifcation, you can assure your customers and the agency you work with that you have all the capabilities and a full understanding of Magento theming


3. Andrea Saccàs personal experience

My personal experience:
I would like to share my personal experience. The frst time I sent the theme Emphasis to the ThemeForest team, the review team there loved it; however, for some reason, they did not accept it because there were some concerns regarding the copyright issues with the brands used in the theme.So, I corrected the problems indicated by the team and then submitted the theme again. After those small modifcations, my theme was approved. Emphasis made 60 sales between October 2013 and March 2014. A good result for the frst theme! A few months after the Emphasis theme publication on ThemeForest, the Envato team selected my theme to include it into a special e-commerce bundle pack. This was another very good occasion and I had the opportunity to earn some extra money with that special event.

The eCommerce Sampler Pack included four themes for four of your favorite e-commerce platforms; mine included the following:
• WooCommerce
• Magento
• Opencart
• Prestashop
The Emphasis theme was selected to represent the Magento category. I was really surprised with this occasion and I earned a lot of popularity in the marketplace.

Now the pack is complete; you can see the landing page created for it at

This is only to let you understand that sooner or later, the effort you put in to create a theme will be paid for. So if you do a great work, you have a great possibility of gaining a lot with ThemeForest and other marketplaces

Theme pricing:
The theme pricing is decided by the review team. Consider that the pricing of Magento themes start from $80 on ThemeForest and are the most expensive items on the marketplace.Also, consider that you will not earn the full quoted price of the theme; ThemeForest will initially give you a commission of 50 percent that will increase based on the sales. You can see the actual commission rate table at

You can also consider the possibility of selling the theme in other marketplaces too; however, the commission will decrease to 30 percent

So the more you sell, the more you earn. You may think that this is not very fair, but this is the easiest way to start selling your creations and getting some extra money for your work.

Inserting the theme on the Magento Connect site:
Another great channel where you can distribute and publicize the theme is the Magento Connect website. This site is the place where you can fnd free and premium extensions and themes for Magento. The sales will not be through this website, but you have to share the link to the theme page of ThemeForest.The following screenshot shows what the Magento Connect website looks like

Register an account and then you will have the option to upload your extension with all the details using a form similar to the one used by ThemeForest. The item must be approved by the team, and only then can it be found on the website. The approvals take about 48 hours and the price is the cost of the extension that you can fnd in your theme page.
You can also consider selling the theme without going through a marketplace such as ThemeForest; in this case, you can set your own price in Magento Connect.

Support and updates
A parenthesis needs to be done on the support and on the updates of the theme. Keep in mind that your theme will be visited and bought by a lot of people. They may fnd some issues or problems that you can solve or help to solve.Fixing the bugs and adding new features Reserve some extra time to collect all the bug fxes and release all the updates for the theme once in a month. This will ensure that the theme is always updated and that users can rely on your products and services.To do this, you can collect some bugs and fx them in the current version of the theme; once fxed, repackage the fles and resubmit the new ZIP fle in the marketplace.To maintain a report of the modifcations you make for each version, you can
create a fle called changelog.txt and add all the fxes or the new features in the following manner:
Version 1.1 (September 6, 2013)
– FIX: Minor Css bugs fixed
– FIX: Top Cart Background fix
– FIX: Responsive Menu
– FIX: Fixed bug in Google font selector
– FIX: Mobile Account links made like Flags and currency dropdown
– NEW: Animated Scroll to top on top Cart click for better user experience
– NEW: Animated Scroll to top on Menu click for better user experience
Version 1.0 (September 1, 2013) – Initial release Through this fle, both the fnal user and you will have a report of all the improvements you make to the theme.The update approval of ThemeForest usually takes about 24 hours, and the users who buy the theme can choose to be notifed when the theme is uploaded through their account. In this way, the users will be notifed once the theme is updated

Now you have the key to start creating a powerful theme for the most-used e-commerce CMS of the world. You can create a theme from scratch with the powerful framework Bootstrap and make it responsive.You also learned how to distribute it on the most important marketplaces, and now, I hope that you can test and create your very own theme for your customer or sell it on the marketplace and become one of the best Magento theme designers! In the appendix that follows, you will fnd all the references and resources used in the theme.Thank you for reading and keep designing and coding!


2. Creating the documentation of the theme

Now you have a working demo and the theme pack installation ready. Before submitting the theme to be sold, or giving the theme to the fnal user/customer,it is good practice to send a detailed documentation along with the theme.The documentation must contain all the instructions to install the theme, the code for the static blocks, and an FAQ section. The documentation is very important and needs to be well written and organized to increase the chances for the theme to be accepted by marketplaces such as ThemeForest. In fact, if the documentation is not good or the theme is not well documented, there are a lot of possibilities of it being rejected.It is recommended that the designer have an editor or a copyeditor proofread the theme’s documentation for a polished, professional end result. Most coders and designers aren’t perfect writers, so getting an extra pair of eyes to make sure all the commas and apostrophes are in place would be a good idea.

[If the documentation is accurate and detailed, you will receive less support requests from the users, and the users will be happy to find all the instructions along with the theme.]

To create good documentation and make sure the help documentation is in a fle format readable by all operating systems and devices, you can create a PDF, HTML, and TXT fle that are preferred, say, .docx.To speed up this process, you can use a preset HTML template that will help you write an organized fle.Let us discuss the two different theme documentation fles that you can use.

The Documenter tool:
Documenter is a great tool to generate custom documentation fles with the capability of customizing the template and many other features. You can fnd the tool at and the following is a screenshot of what the Documenter page looks like

Insert all the theme information, as shown in the following screenshot, along with the full documentation on how to install the theme and all the features that are included in the theme:


By setting up some options, you can create your own style. For example, you can create a custom documentation with the color scheme of the theme: orange, black, and white. The fnal result is shown in the following screenshot:


Some tips to write better documentation:
After you download the source fles, you can open and edit them as you want by adding the section of your choice. The documentation needs to be clear and easy to navigate. You can create a well-organized fle by dividing it into the following sections:
• Start
• Introduction
• Installing the theme
• The theme options panel
• Importing static CMS blocks
• Editing or restoring CMS blocks
• Confguring the home pageChapter 10
• Confguring the products in the home page
• Editing the theme
• Updating the Theme
• Support
• Change log
• Credits

Packaging the theme:
After you create a well-organized piece of documentation, ZIP everything and the theme is ready to be distributed.Sometimes, in the pack, you need to insert the mockup of the theme, or if you prefer, only some features such as the product list, the logo, and so on. So, create an additional folder where you can include all the graphics source fles.To complete the pack, name the folder that must be distributed with the theme name and the theme version. This will help to keep you organized with the feature releases
of the theme. For example, you can create the folder BookStore_theme_v1 and you can organize the content with the following folders:
• Theme
• Documentation
• Mockup

Selling the theme on ThemeForest:
As you know, ThemeForest is the most popular marketplace where you can sell professional themes and get some extra money. To sell a theme, you need to perform the following simple steps:
1.First, create an account and pass a simple test to check if you understood the conditions of the site.
2.Once you create an account and are ready to sell, open the Upload page, as shown in the following screenshot, from your account menu at the top:


3.On this page, shown as follows, you have to select the category where you want to upload the theme; in our case, we will select the eCommerce category:


4.In the next step, you need to insert all the theme information, such as the Name and Description:


As you can see from the tip, the name of the theme must have maximum 50 characters.You can use a name such as BookStore Responsive Magento theme.You need to think of a name that reassumes the theme concept and the main features.Think of it with the SEO (Search Engine Optimization) techniques
in mind, because the keyword you use will also appear on the search engines.For example, try to search Magento Responsive Theme on Google. Actually, this was the frst theme I created while I was writing this book, which is on the ThemeForest Marketplace on the frst page of Google. This is because I used some SEO techniques while writing the title and the description.


5.In the next section, you need to insert all the fles. As you can see in the following screenshot of the theme, you can upload the zip fle you created (


6.Then, you need to upload all the fles including the theme ZIP fle and a custom image to represent the theme that will be the cover of the ThemeForest item page. For example, you can create a custom cover to represent the theme features, as shown in the following screenshot:


7.Next, you need to insert all the theme specifcations. Fill in all the fles and select all the options, and fnally, submit the theme.In a few hours, you will get an answer from the ThemeForest team; if everything is done well, the team will accept the theme and you are ready to make money!


1. Packaging Rules

Packaging and Selling the Theme:
Congratulations! Now that you have created the theme and optimized it for all devices, it’s time to sell it; if you have created a theme for a customer, it’s time to send it with all the necessary files. The path to this point has been long and difficult, but it is not yet done. If you want your effort to translate into money, you must perform a series of operations that are necessary and essential to be able to sell and distribute your theme.
In this chapter, we are going to learn how to create the perfect pack within all theme files and documentation, and how to present it for a live demo preview.

The list of topics that will be covered in the chapter are as follows:
•Collecting and placing all the folders and files under one folder
•Creating the live demo preview
•Creating the theme documentation
•Packing the theme
•Selling the theme on ThemeForest
•Inserting the theme on the Magento Connect site
•The support and updates of a theme

Collecting and placing all the folders and files under one folder:
The very first thing to do is to collect all the files and the folders created for the theme, and create a folder that is ready to be uploaded or installed by the final user.Just to remind you, the following diagram is the tree of the folders and the files of our project:

all folder

The app folder contains the following folders:
• code: This includes the admin theme module and the widgets
• design: This includes the design structure of the frontend and the backend
• etc: This contains the files needed for the activation of the widget and module

The skin folder contains the following folders:
• frontend: This includes the images and styles for the frontend theme
• adminhtml: This includes the images and styles for the backend theme

Creating the live demo preview:
Now you have to test the theme pack by creating a live demo of the theme online,but we will cover this in the next section.Creating the live demo preview will help you to conduct an
additional test on your theme to check if everything is working as expected. If it is, you can proceed to the next step.

The performance of the sever:
Please keep in mind that the online demo will be accessed by a large number of visitors, mostly during the initial days after your theme is made available on a marketplace such as ThemeForest. So, make sure that your server is optimized for Magento and has high performance.To check if the server is compatible with a Magento installation, you can perform the following steps:
1. Download the magento-check.php file from
2. Extract the file and upload it on your server into the Magento installation folder, for example,
3. Then, open the link and check if everything is working correctly. If the server is optimized as well, you will see the following messages:


Sample products:
Once you created a live demo, you have to create a product that will highlight all the features and beauty of your new theme. The products you use on the demo are very important, so pay attention to the pictures that you use for the demo products.The pictures you use will have a great impact for the theme, so it is necessary to use pictures that actually represent the products the theme is designed for.

So in our case, for example, the theme is designed for a book store, so we have used some book covers, as you can see in the following screenshot:


Searching for royalty-free photos for the theme:
Where can you find some royalty-free pictures that can be used to create a great eye-catching live demo? If you search on the Internet, you can find a lot of websites.Let’s discuss some of the most important ones.

The iStock ( website is probably one of the most well-known websites to buy photos. The quality of the pictures is very good, but the price of the extended license is very expensive.The extended license is needed to sell a theme; if you want to invest some extra money to get some eye-catching pictures and illustrations, this is the right site for you.

Another one site:

The BIGSTOCK website includes a lot of images with licensing for templates.The photos are very good and the price is lower than that of iStock photos.You can try it for some days with a limited number of free pictures, or you can opt for a monthly subscription that allows you to download five photos per day.The site includes not only high-quality photos, but also some great vector files. The following is a screenshot of what the website looks like (

The PhotoDune agency is a part of the Envato network, where you can get a lot of pictures at a very low price. The following is a screenshot of what the website looks like (

The Envato asset library
On the Envato blog, you can get some tips on where to find photos, and an asset library that includes some free files to be used for your next project.

As you can see, there are many images that are grouped by a theme, so you can find pictures in the themes Nature, City, or Portfolio.Please keep in mind that you must be logged in to the ThemeForest website and that you must agree with the Envato conditions in order to find images on the page.

Magento Go admin theme

Installing the Magento Go admin theme:
As you might know, Magento released a new version called Magento Go some time ago; it is a hosted e-commerce solution for small businesses.If you have tried it, you will know that the admin panel has a custom skin that is very modern and clean, as shown in the following screenshot:

magento go theme

Johan Reinke, a French PHP developer, has created a perfect copy of the Magento Go admin theme and published it for free on GitHub. You can find the full article about this theme on his blog at An extension is available on GitHub in the master branch at

The installation is very simple and quick; you only need to download the extension
and upload it into your store root by using the following steps:
1. Disable the Inchoo AdminTheme extension that may conflict with this module.
2. Download the extension URL from the GitHub repository.
3. Extract the files into your Magento root.
4. Refresh the cache.

Once installed, you can see that a custom Magento login panel is also present, as you
can see in the following screenshot:


So if you want a better-looking admin panel but don’t have time or desire to customize the admin panel for each client, downloading and including the Magento Go admin panel theme extension is a great way to update the look of the Magento admin panel for your end user without consuming too much time or effort on your part.

In this chapter, you learned how to customize the backend of Magento. By editing the design of the backend, you can give custom style to the administrative area of Magento, creating a unique style and giving added value to the template.

In the next chapter, we will reorganize the whole theme, collecting all the files that we created from the beginning, to create a zip file that is ready to be distributed.We will also see how to sell it on ThemeForest (,making some extra money at one the most popular theme marketplaces!

Creating a custom login page

Creating a custom login page:
An important section that needs tuning is the admin login form.we are going to see how to customize the admin access page with a custom logo and a custom design.The login file is login.phmtl, placed under app/design/adminhtml/default/default/template/.

If you take a look at the code of the login.phtml file, you can see that its structure is a full HTML document and we have full control of the login page. This means that you can totally customize it, creating your own custom structure.The final result that we are going to reach is shown in the following screenshot, and we will use a custom code structure to make it unique:


Creating the custom login.phtml file:
To create your custom login file, create the login.phtml file in your theme admin folder under app/design/adminhtml/default/bookstore/template.We start by creating a basic HTML5 structure using the following code:

<!DOCTYPE html>
<html lang="en">
		<meta charset="utf-8">
		<title><?php echo Mage::helper('adminhtml')->__('Bookstore Admin Login') ?></title>
		<!--[if IE]>
		<script src="">	</script>
	<body id="login_page">

As you can see, inside the <head> tag, we inserted a conditional script for Internet Explorer to make it HTML5 ready.To insert our CSS modifications, we need to call the custom.css file.
This can be done by adding the following code inside the <head> tag, which will take the CSS from the custom adminhtml skin folder:

<link type="text/css" rel="stylesheet" href="<?php echo $this->getSkinUrl('../../default/bookstore/custom.css') ?>" media="all" /

Creating the login form:
Now, let’s create the HTML file of the form container that will include the form with the input, the button to sign in, and the link to retrieve the password.

1.First, we create a container that will include all the elements:

<div id="loginContainer"></div>

2.Then, create a logo image named logo-login.gif.
3.Inside the div id=”loginContainer” tag, create the logo box within the logo image as follows:

<div class="login_logo">
	<img src="<?php echo $this->getSkinUrl('../../default/bookstore/images/logo-login.gif') ?>" alt="<?php echo Mage::helper('adminhtml')->__('Log into Magento Admin Page') ?>">

4.Then, let’s create the form with all the elements using the following code:

<div class="login_form">
	<form method="post" action="" id="loginForm">
		<div class="form-title">
			<h1><?php echo Mage::helper('adminhtml')->__('Welcome to the login panel') ?></h1>
			<h2><?php echo Mage::helper('adminhtml')->__('Log into Magento Admin Page') ?></h2>
		<!-- /.form-title -->
		<div class="input-container">
			<input type="text" class="form-control" id="login-username" name="login[username]" placeholder="
			<?php echo Mage::helper('adminhtml')->__('User Name:') ?>" required>				
			<input type="password" class="form-control" id="login-password" name="login[password]" 	placeholder="
			<?php echo Mage::helper('adminhtml')->__('Password:') ?>" required>
		<!-- /.input-container -->
		<button type="submit" id="login-btn" class="btn-login">
			<?php echo Mage::helper('adminhtml')->__('Login') ?> &raquo;
	<!-- retrieve link -->
	<a href="<?php echo Mage::helper('adminhtml')->getUrl('adminhtml/index/forgotpassword',array('_nosecret' => true)) ?>">
		<?php echo Mage::helper('adminhtml')->__('Forgot your password?') ?>
<!-- /.login_form -->

As you can see in the preceding code, we added the required attribute to the input to avoid a blank form submission.

5.After the form, insert the link to retrieve the password using the following code:

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

We will later see how to customize the Forgot Password page as well.

6.Now, at the very bottom of the page, outside div id=”loginContainer” ,we will add a custom link to go back to the frontend using the following code:

<a href=" <?php echo $this->getBaseUrl() ?>" class="link-frontend">
	<?php echo Mage::helper('adminhtml')->__('&laquo; Back to the store') ?>

7.Finally, the script that will make the form work is given as follows:

<script type="text/javascript">
	var loginForm = new varienForm('loginForm');

Done. The HTML code for the custom login page is finished. But if you refresh the page, we will have a blank form
Styling the login form:

/* Login form */
#login_page {
	background: url(images/bg.gif) repeat #000;
	font-family: 'Open Sans', Arial, Helvetica, sans-serif;

#login_page h1 {
	font-size: 24px;
	margin: 0;
#login_page h2 {
	font-size: 14px;
	font-weight: normal;
	margin: 0 0 15px;

#loginContainer {
	/* Border Radius */
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	/* Box Shadow */
	-moz-box-shadow: 0 0 47px 4px rgba(0,0,0,.24);
	-webkit-box-shadow: 0 0 47px 4px rgba(0,0,0,.24);
	box-shadow: 0 0 47px 4px rgba(0,0,0,.24);
	background-color: #FFFFFF;
	border-radius: 3px;
	box-shadow: 0 0 47px 4px rgba(0, 0, 0, 0.24);
	margin: 100px auto 20px;
	padding: 10px 20px 20px;
	text-align: center;
	width: 460px;

#loginContainer .login_logo {
	text-align: center;
	margin: 20px auto;

#loginContainer .login_form {
	background: none repeat scroll 0 0 #F69235;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	color: #FFFFFF;
	display: block;
	margin-bottom: 15px;
	padding: 20px;
#loginContainer .login_form .form-title {
	color: #fff;
	text-align: center;
#loginContainer .login_form input {
	border: 0 none;
	display: block;
	margin-bottom: 20px;
	padding: 10px;
	width: 410px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
#loginContainer .login_form .btn-login {
	background: none repeat scroll 0 0 #333;
	border: 0 none;
	clear: both;
	color: #FFFFFF;
	cursor: pointer;
	font-weight: bold;
	line-height: 50px;
	width: 100%;
#loginContainer .login_form .btn-login:hover {
	background: #000;
#loginContainer a {
	text-align: center;
	color: #000;
	font-size: 12px;
#login_page .link-frontend {
	color: #888888;
	display: block;
	font-size: 14px;
	margin: 0 auto;
	padding: 10px;
	text-align: center;
	text-decoration: none;

6.Refresh the page and the login page should now look like the following screenshot:


Adding the alert message if the data is incorrect:
If a user inserts a wrong combination of username and password, the system returns an alert message. To make it appear in our custom form, you can insert the following code just after the code for the logo image.

<?php echo $this->getMessagesBlock()->getGroupedHtml() ?>

You can style the preceding code with CSS using the following code:

#loginContainer .messages {
	background: none repeat scroll 0 0 #FFEBDA;
	border: 1px solid #FF7C0A;
	color: #DD6700;
	font-size: 15px;
	list-style-type: none;
	margin: 0 0 10px;
	padding: 10px;
	text-transform: uppercase;
#loginContainer .messages li {
	list-style-type: none;

Now try to insert a wrong password, and the following message will appear:

warning message

Customizing the retrieve password form
If you click on the Forgot your password? Click here! link, you can see that this page too needs customization:

To customize the preceding page, duplicate the file you created for the login page,login.phtml, and name it forgotpassword.phtml in the same bookstore folder under app/design/adminhtml/default/bookstore/template. What we need to do is only change the title using the following code:

<div class="form-title">
	<h1><?php echo Mage::helper('adminhtml')->__('Forgot your user name or password?') ?></h1>
	<h2><?php echo Mage::helper('adminhtml')->__('Insert your email to restore the password') ?></h2>

Then, change the content of the form, inserting only the e-mail input as follows:

<div class="input-container">
	<input type="text" id="email" name="email" value=" " class="required-entry input-text forgot-password validate-email" placeholder=" <?php echo Mage::helper('adminhtml')->__('Email Address:'); ?>" required>
<!-- /.input-container -->

Now, of course, we need to make a change in the button text too:

<button type="submit" id="login-btn" class="btn-login"> 
	<?php echo Mage::helper('adminhtml')->__('Retrieve Password'); ?> &raquo;

After the form, modify the Forgot your password? Click here! link using the following code. Clicking on this link will send you back to the login form:

<a class="left" href="<?php echo $this->getUrl('adminhtml',array('_nosecret' => true)); ?>">&laquo;
	<?php echo Mage::helper('adminhtml')->__('Back to Login'); ?>

Done! Now you don’t need to change anything else, because the page action is already set to perform the password reset, which will send an email to the user with the link to change the password or with the new password, depending on the settings.

Refresh the page. You will now see the new design of the pages, made in few simple steps, as shown in the following screenshot:


Customizing the Backend

Customizing the Backend of Magento:
Now that we have created our custom Magento theme, we are going to learn how to customize the Magento admin panel. The default backend theme of Magento is pretty ugly; in this chapter, we are going to see how to create a custom skin for it.
The following is a list of topics that will be covered in this chapter:
• An overview of the admin design
• Changing the default admin panel
• Creating a custom Magento admin theme
• Creating a custom login page
• Installing the Magento Go admin theme

An overview of the admin design:
The skin of the admin section is structured almost like the frontend area.Sometimes, you have the need to adapt the admin color scheme and logo to customer requests.

In this chapter, we will see how to transform the admin skin in order to adapt the design to the customer brand. In this case, we are going to customize it with the colors of the logo that we created in the last chapter: black, white, grey, and orange.

Changing the default admin panel:
To customize the admin, we need the AdminTheme module provided by Inchoo,one of the most popular companies that provides great Magento tutorials and services.The module simply gives you the possibility to define the theme folder of the admin skin in the admin configuration.

Installing the module to change the folder path:
You can download the module from
custom-admin-theme-in-magento/. The following screenshot shows the module page on the Inchoo website, where you can download the module:

Read the article that opens on the website, and there you will find the link to download the module. After downloading it, use the following steps to install it and to create the admin theme folder:

1.Extract the folder and copy all the files into your Magento [root]/ folder.
2.Refresh the cache unless you had disabled the cache entirely during development.
3.Now, create your admin theme folder, for example, bookstore in the
app/design/adminhtml/default/bookstore folder.
4. Also, create the skin admin folder under skin/adminhtml/default/bookstore.
5. If you have already logged in the admin, log out and log in again in the admin to avoid the 404 error in the theme module page. You can experience this error even if the cache is disabled.
6. Now go to the admin and navigate to System | Configuration | General | Design (Default Config scope). As you can see, a new tab named Admin Theme appears on the right with a new input text field.
7. That field will allow you to define the admin theme folder, similar to the frontend package. So insert the name of your theme folder, bookstore,
inside the field as shown in the following screenshot:

178328823X_Mastering (2)

8.Save the configuration.

Done. Now the admin theme will take the files from the bookstore folder.If you refresh the page, you will not notice any change, because the fallback system will always take the files from the default admin theme.Thus, it doesn’t need to download all the base theme files to customize the admin
skin, but just the files you need to edit.

Creating a custom Magento admin theme:
Now that the module is installed and the folders of the new admin theme are ready,let’s start creating the files that will overwrite the design.

Creating the custom.css file:
We will begin by copying the custom.css file under skin/adminhtml/default/default/ into the new theme folder, bookstore, under skin/adminhtml/default/bookstore/. In fact, if you take a look at the main.xml file located under app/design/adminhtml/default/default/layout/, you can see that there are some CSS files declared, and one of those is custom.css. The content of the custom.css file is as follows:

<action method="addCss">

Checking the CSS overriding:
Now, to run a quick test and check whether the module is working and if the fallback loads our file correctly, insert the following code inside custom.css to color the header background in black:

.header { background: #000; }

Now save the file. If everything is working, you will see the header color switching to black, as shown in the following screenshot:


Now that we’ve defined the location of our custom admin panel theme, we’re ready to customize the look of the admin panel!

Changing the logo:
The first thing that we are going to customize is the header. We start by changing the logo using the following steps:
1.To change the logo, simply save your logo in .gif format under skin/adminhtml/bookstore/images/.
2.Now open the custom.css file and add the following to overwrite the default logo header set into the default theme:

.logo {height: auto;}

3.Then refresh the page to see your logo in the header of the admin panel, as shown in the following screenshot:

Using a different logo name or extension:
Let’s suppose that you want to use a .png format logo so that you can have more flexibility while changing and customizing the header.

Using a different logo name or extension
Let’s suppose that you want to use a .png format logo so that you can have more flexibility while changing and customizing the header.

The logo declaration is in the header.phtml file, which is located under app/
design/adminhtml/default/default/template/page/. Copy it from that folder to the relative folder of the new admin theme, which is under app/design/adminhtml/default/bookstore/template/page/. The following is the current path of the logo:

<img src="<?php echo $this->getSkinUrl('images/logo.gif) ?>" alt="<?php echo $this->__('Magento Logo') ?>" class="logo"/>
  In place of the preceding path, enter the following new path:
<img src="<?php echo $this->getSkinUrl('images/logo.png') ?>" alt="<?php echo $this->__('Magento Logo') ?>" class="logo"/>

Creating CSS3 gradients without images With CSS3, we can add a background gradient in a few seconds and without using images. To create your own gradient, you can use an online service called Ultimate CSS Gradient Generator, provided by ColorZilla, and available at The following screenshot shows you the ColorZilla website:

Changing the background color of the header:
Once you have selected and copied the text, add the following CSS code into the header:

.header {
	/* Old browsers */
	background: #ffa84c;
	/* FF3.6+ */
	background: -moz-linear-gradient(top, #ffa84c 0%, #ff7b0d 100%);
	/* Chrome,Safari4+ */
	background: -webkit-gradient(linear, left top, left bottom,
	color-stop(0%,#ffa84c), color-stop(100%,#ff7b0d));
	/* Chrome10+,Safari5.1+ */
	background: -webkit-linear-gradient(top, #ffa84c 0%,
	#ff7b0d 100%);
	/* Opera 11.10+ */
	background: -o-linear-gradient(top, #ffa84c 0%,#ff7b0d 100%);
	/* IE10+ */
	background: -ms-linear-gradient(top, #ffa84c 0%,#ff7b0d 100%);
	/* W3C */
	background: linear-gradient(to bottom, #ffa84c 0%,#ff7b0d 100%);
	/* IE6-9 */
	filter: progid:DXImageTransform.Microsoft.gradient(
	startColorstr='#ffa84c', endColorstr='#ff7b0d',	GradientType=0);

Customizing the navigation:
Now, let’s customize the navigation, by adding a padding to the navigation bar and changing the color of the active button using the following code:

/* navbar */
.nav-bar {
	background: none repeat scroll 0 0 #000000 !important;
	border: 0 none;
	padding: 10px 30px !important;
#nav li {
	border-radius: 3px;
#nav {
	background: none repeat scroll 0 0 #FF9733 !important;
	color: #FFFFFF !important;
	font-weight: bold !important;
	margin-left: -1px !important;

Customizing the footer:
You can customize the footer by overriding a class on the custom CSS. In this case,we are going to provide a black gradient and white text to the background of the footer using the following CSS code:

/* footer */
.footer {
	/* Old browsers */
	background: #45484d;
	/* FF3.6+ */
	background: -moz-linear-gradient(top, #45484d 0%, #000000 100%);
	background: -webkit-gradient(linear, left top, left bottom,
	color-stop(0%, #45484d), color-stop(100%, #000000));
	/* Chrome10+,Safari5.1+ */
	background: -webkit-linear-gradient(top, #45484d 0%,
	#000000 100%);
	/* Opera 11.10+ */
	background: -o-linear-gradient(top, #45484d 0%, #000000 100%);
	/* IE10+ */
	background: -ms-linear-gradient(top, #45484d 0%, #000000 100%);
	/* W3C */
	background: linear-gradient(to bottom, #45484d 0%,
	#000000 100%);
	/* IE6-9 */
	filter: progid:DXImageTransform.Microsoft.gradient(
	startColorstr='#45484d', endColorstr='#000000',
	GradientType=0 );
	padding: 30px;

Also, we want to remove the Magento .gif icon on the right side of the footer bar,which has been highlighted in the following screenshot:
To do so, copy the footer.phtml file under app/design/adminhtml/default/default/template/page/ and paste it under app/design/adminhtml/default/bookstore/template/page/.Then remove the following line:

<img src="<?php echo $this->getSkinUrl('images/varien_logo.gif')?>" class="v-middle" alt="" />&nbsp;&nbsp;

Pretty cool, isn’t it? Now you can create your own design for the admin panel,adapting it to the theme color, or based on the customer brand identity.

5. Validate options

You can use the <validate> tag to make sure that the user inserts the right value into the option field based on the type of option. This tag generates a script that makes a particular type of validation based on the type of validation you want.The validation starts when you try to save configuration from the orange action button on the admin theme option panel.

The following are the several types of validation:
• validate-alpha: This checks if the value inserted is text.
• validate-alphanum: This checks if the value inserted is alphanumeric.
• validate-email: This checks if the value inserted is a valid e-mail address.
• validate-greater-than-zero: This checks if the value inserted is a number greater than zero.
• validate-not-negative-number: This checks if the value inserted is a non-negative number.
• validate-number: This checks if the value inserted is a number.
• validate-password: This checks if the value inserted has at least six characters.
• color: This particular validation is the one we inserted now in the module.

It enables the color picker:
Let’s create an example with a validation for a number. If we want to validate the field for a telephone, just add the following code inside the <telephone></telephone> tags:
<validate>validate-password</validate> Once you save, go to admin and try to insert the word Hello inside the input text for Telephone Number. Try to save, and you will get an alert message.

Defining default values for options fields:
Another cool task that you can do with the module is set default options for the module. Doing this is very simple. Open the config.xml file and within the <config></config> node, insert the <default></default> tag and inside it, all the options you created with the default values that you want to set. For example, consider the following code:

<!-- set default configurations -->

In this case, the default value of the menu_bg field will be CCCCCC.
If you set default options after you save the module configuration page at least once, you will no longer see the default value set because the system will store the empty value field (if you save an empty value field).

In this chapter, we have seen how to create a custom and powerful theme options panel with this great tool you created, the theme can be easily used by everyone,including the store manager who doesn’t have programming knowledge.Let’s create your own admin panel with all the options you have in mind and render your theme unique and powerful!

4. Visual color picker in admin

Creating a visual color picker in admin:
Sometimes you may want to add color picker in the admin configuration page of your Magento module or extension. In our case, this is a must-have option for a theme configuration module. To do this, you don’t have to download or add new JavaScripts into the module, because Magento includes the jscolor picker by default. Perform the following steps:

1.Create the bookstore_themeoptions.xml file in app/design/adminhtml/default/default/layout with the following code:

<?xml version="1.0"?>
	<layout version="0.1.1">
			<reference name="head">
				<action method="addJs">

2.Open config.xml and inside the <adminhtml> tag, insert the following layout update to the jscolor script in the admin theme panel section:


Done! Now open the backend and go to the theme admin panel section; if you click on the top header background color, you can see that the color picker appears and you are allowed to select the color by clicking on it! Cool, isn’t it? You can see this

However, to make this happen, you need to pay attention to the field, which includes another tag: the <validate> </validate> tag. Take a look at one of the fields with the <validate>color</validate> tag, for example, see the following code:

<topheader_color1 translate="label">
	<label>Top Header Background: </label>

The preceding code allows the field to display the color picker. Now, you can retrieve the data in the frontend in the same way you did before.

In this case, the value is a CSS value, so to integrate the options in your theme,you can use the inline CSS injection, for example, use the following code:

<div id="topbar" <?php if(Mage::getStoreConfig('bookstore/header/topheader_color1',Mage::app()->getStore())):
	echo 'style="background-color:#'. Mage::getStoreConfig('bookstore/header/topheader_color1',Mage::app()->getStore()) .'"'; 

As you can see in the preceding screenshot, the background color of the top header switched from black to cyan.

3. Advanced options features

Advanced options features:
There are some features that you can add to the options to create a very modular and advanced configuration panel, such as the dependent field and the option to add JavaScripts inside the comment tag. Let’s analyze these features.

A dependent field: It’s very important topic <depends>
One of the advanced features is the <depends> tag to create dependent fields. When navigating the configuration of Magento, you may have noticed that sometimes when you switch from Yes to No, some options disappear and if you select Yes,they reappear.


In the preceding screenshot, you can see some options after the first one, and in the following screenshot, you can see that by selecting No, some options below it disappear:


The options disappear because that field depends on the first one. Any field can
depend on another one.
To create a dependent file, you simply need to add the following code to one of the
fields that you want to make visible or not:


its value. For example, let’s take the <topheader_enable> field which is a Yes/No option field as shown in the following code:

<topheader_enable translate="label">
	<label>Enable Top Header</label>
	<comment>Enable or Disable the top header bar</comment>

Then you have another field called topheader_color, which you want to show only if the topheader_enable option is set to Yes. Simply define the field and add the depends tag at the bottom of the code, with the value as given in the following code:

<topheader_color1 translate="label">
	<label>Top Header Background: </label>

As you can see in the highlighted portion of the preceding code, the <depends> tag includes the name of the field on which it depends. In other words, if the value of <topheader_enable> is 1 (Yes), the field will be displayed.

Please note that any field can depend on another. The main purpose of this one is to hide/show the field, depending on the state of some other field.

Adding JavaScripts inside the comment tag:
There is also one interesting cheat. You can use JavaScript inside the <comment> tag.To do this, simply wrap JavaScript in a CDATA tag; as shown in the following code:

<topheader_enable translate="label">
	<label>Enable Top Header</label>
	<comment>Enable or Disable the top header bar
			<script type="text/javascript">
				Event.observe('bookstore_header_topheader_enable', 'change', function() {
					alert('Warning! This will hide the top bar!');

In this case, if you change the Enable Top Header field, an alert message will pop up