Administration Panel Theme in OpenCart: Modifying headers

In this recipe, we will modify the header of our store administration. First, we will create the header banner of our admin.

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. In the header file, we customize the title of the We want our store name Shop to be displayed in the title bar. We change the title tag and make it the following to display our store name; we can pick the store name from the database also:

<title><?php echo ‘Shop: ‘.$title; ?></title>

2. Now, our title bar displays our store name:

3. We create a banner image for the header with a dimension of 10x200px. So, we create an image with GIMP:

4. Choose #c6a50c for the foreground color and #c1c0b9 for the background color:

5. Select the Gradient tool from the toolbox:

6. Apply some brush effects to our background For that we choose the brush tool from the tool box:

7. Go to Windows | Dockable dialogs | Tool options:

8. Choose the confetti brush, scale it to 41. Then, apply it on the background image:

9. We save the image under admin\view\image. You can save it as any image file Then, we need to change the image path in our stylesheet. We open up the stylesheet for the admin section. It is under admin\view\stylesheet. Also, increase the height to 200px.

#header {

background:url(“../image/header.png”) repeat-x scroll 0 0 transparent;

height:200px;

min-width:900px;

padding:0 30px;

}

10. In the browser, we can view our new header in action:

3. How it works…

We have used the background image for the banner of our admin header. You can create different types of banners for our admin in the same way. You can browse the Internet for similar innovative header banners.

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