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.