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.
1. 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”>
<name>custom.css</name>
</action>
2. 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!
3. 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:
- To change the logo, simply save your logo in .gif format under skin/adminhtml/bookstore/images/.
- Now open the css file and add the following to overwrite the default logo header set into the default theme:
.logo {
height: auto;
}
- Then refresh the page to see your logo in the header of the admin panel, as shown in the following screenshot:
As you can see, we created a white version of the logo to make the admin panel similar to the previous logo, but a little bit different from the frontend.
4. 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”/>
Now, let’s change the header background. We are going to use a gradient background without images to speed up the loading time of the admin.
5. 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 http://www.colorzilla.com/gradient-editor/. The following screenshot shows you the ColorZilla website:
As you can see, the site is very simple and intuitive. You can create your own gradient by uploading an image, or alternatively you can grab one of the existing gradients.
In this case, select the gradient that you like and that better adapts to the logo colors, then copy the code from the right-hand side column and integrate it into your CSS file!
6. 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);
}
Now refresh the admin. As you can see, we now have a nice and customized background for the header:
Now, let’s customize the right-hand side area of the header a little bit by changing the colors of the Try Magento Go for Free and Log Out links and styling the search bar with the following CSS code:
/* header right */
.header-right {
float: right;
}
.header-right a, .header-right a:hover {
color: #000;
}
.header-right .super {
margin-bottom: 10px;
}
/* Header Search */
.header-right fieldset {
clear: both;
display: block;
}
.header-right fieldset input.input-text {
border: 0 none;
border-radius: 3px;
padding: 7px;
width: 18em;
}
The result of the preceding code will be as follows:
7. 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 li.active {
background: none repeat scroll 0 0 #FF9733 !important;
color: #FFFFFF !important;
font-weight: bold !important;
margin-left: -1px !important;
}
The result of the preceding code will be as follows:
8. 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 );
color:#888; padding: 30px;
}
Also, we want to remove the Magento .gif icon on the right, 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=”” />
After these steps, our new admin footer will look as shown in the following screenshot:
9. Customizing other objects
To customize other objects, you can use Firebug—the famous plugin for Firefox—to analyze the content class and create your own style in custom.css.
You can download Firebug into the plugin page from https://addons.mozilla. org/it/firefox/addon/firebug/.
It’s pretty simple to add Firebug to your Firefox browser. As you can see in the following screenshot, you only need to click the Add to Firefox button and the extension will be installed without the need to restart the browser:
You can make a donation to the developer who developed this great and useful extension that helps us save a lot of time in web development! To make a donation, click on the Contribute button and make your offer.
You can change the aspect of the buttons and tables elements using the following code:
/* other elements */ button, .form-button {
font-size: 15px;
padding: 5px 10px 5px 8px !important;
}
dl.accordion dt, .entry-edit .entry-edit-head {
background: #333;
padding: 5px 10px;
}
.content-header h3 {
color: #000000; float: left;
font-size: 23px; font-weight: normal;
}
Now, save and refresh the page. The final result of our Magento admin theme customization is shown in the following screenshot:
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.
Source: Sacca Andrea (2014), Mastering Magento theme design, Packt Publishing; Illustrated edition.