Administration Panel Theme in OpenCart: Menu creation

This recipe will show us how we can create a menu for our admin store. We are going to apply some styling to the navigational menu here.

1. Getting ready

First, we will open up the header.tpl file under admin\view\template\common.

2. How to do it…

We follow these steps to modify the header:

1. Now, we change the background image for our We will create a 19x46px image with GIMP:

2. And apply #29a7f6 as foreground color and #1da2d0 as the background color from the color panel:

3. We save the image under admin\view\image.
4. Now, we need to change the image path and the image height in the css under admin\view\stylesheet:

#menu {

background: url(‘../image/menu.png’) repeat-x;

position: relative;

z-index: 1;

height: 46px;

clear: both;

padding: 0px 30px;

min-width: 900px;

}

5. So, in the browser, we find our menu bar as follows:

6. For the selected menu, we create an image of size 19x46px. We choose the color picker tool from tool box. Then, we apply #07b193 as the foreground color and #3f9687 as the background color:

7. We use the gradient tool to color our image:

8. We save the image under admin\view\image. We can view the change of our menu bar:

9. And the separator image will be 1x46px. We use #b4bcbb as our image background color:

10. We use the bucket fill tool from the toolbox to draw the image:

11. You can save the image under admin\view\image. So, our menu bar now looks like this:

12. We need to apply some styles in the css under admin\view\stylesheet to the menu bar texts. We use the following styles:

.nav .top, .nav li li.sfhover {

padding: 13px 15px 9px 17px;

font-family: Arial, Helvetica, sans-serif;

font-size: 12px;

color: #FFFFFF;

text-align: center;

}

13. So, the text will be placed at the middle:

14. We change the hover color of the menu texts:

.nav li a:hover {

color: #c4d509;

}

So, the color changes to this:

15. We now create the sub menu background We change the color to #b4bcbb. We set the dimension at 25x25px. We use bucket fill tool from tool box:

Now, apply a background hover color to the submenu:

.nav li li:hover, .nav li li.sfhover {

background: #29a7f6;

color: #000000;

}

It brings the following changes:

3. How it works…

We have used some styling and images for the navigational menu in the header page. You can use your imagination to make your own navigational menu in the header page for the store admin.

Source: Hasan Tahsin (2011), OpenCart 1.4 Template Design Cookbook, Packt Publishing.