Module Adjustment in OpenCart: Changing header of module

We have placed our featured module on the left side of our store front. It has the default layout structure. In this recipe, we are going to change its layout structure.

1.  Getting started

To change the layout structure, we will go to the OpenCart folder of our document root, that is, Xampp|htdocs. Then, we will go to our project folder. We will copy the module folder of the default template to catalog\view\theme\shop\template.In the catalog\ view\theme\shop\template\module, we will see feature .tpl file. This one is for left/right column and if we set featured products on the middle of the homepage, there will be another file named feature-home.tpl. For now, we will change the featured tpl file for the left/right column.

2.  How to do it…

1. In the Featured tpl file, this block is within a class of ‘box’. It is divided into three sections: top, middle, and Top section is for header of the block, middle div contains the body, and bottom is the bottom layer.
2. In the top class, we have code like this:

<div class=”top”><img src=”catalog/view/theme/default/image/

featured.png” alt=”” /><?php echo $heading_title; ?></div>

3. The image tag contains an icon for featured header We can create a new icon and replace it. We can search for a featured icon on the Internet. Suppose, we use the following for our featured products block:

4. We are going to edit this So, let’s open this image with GIMP. As the icon is too small to work with, we will enlarge the image with the zoom tool:

5. By clicking the left button of the mouse on the image, we can enlarge it according to our Now, we are going to change the image color. First, we will change the outer ring of the image. For this, select the select by color tool on the tool box.

6. Then, we will select the outer ring with this Now, we will choose a proper color from the color tool:

7. We will see the color For the featured block, we will choose #10aae3:

8. So, our color is now #10aae3. And now, we will choose the Gradient tool from the tool box and apply it in our selected image Now, our images will be like this:

9. We can change the font color to Choose the Fuzzy select tool:

10. And now, select the font area on the We will change our color to #ffffff’. Now, choose the gradient tool and apply the color on the select area. So, our icon will be like this:

11. We will save it under the catalog\view\theme\shop\image. We have our icon and now we will change the image name on the top In the featured tpl file, we will place our image. We have used the Featured-icon-name.png just for example, you can use other names.

<img src=”catalog/view/theme/default/image/featured-icon-name.png” alt=”” />

12. We will see our icon in Go to the store front and refresh the browser:

13. If we like, we may remove icons from the top For this, we need to just remove the image tag. Then, our top block will become like this:

<div class=”top”><?php echo $heading_title; ?></div>

14. We can change the top header color Let’s see how we can change that. We are going to use Firebug for this. Click on the Firebug icon on the bottom right corner.

15. Our Firebug window will open, click the Inspect icon to inspect HTML:

16. Click the Inspect icon and catch the top header block on the browser. Then, the relevant code will be viewed on the Firebug console. Click on the box class and corresponding styles will be shown on the style tab on the right You will find the background image for the top header block.
17. We are going to change the image of the top The image is on the image folder of the shop theme. We will open up the image box_top with GIMP.
18. Click the select by color tool from the Now, click on the main center region of the image. The area will remain selected. Now, click the color tool. And choose the color we want to apply to our header. We will choose #11b2c1. Now, choose the Gradient tool. We apply it from top to bottom:

19. If you zoom into the image, you will see there is a border around the image. We will change the color First select the fuzzy select tool from the tool set. Click on the edges. Then, choose the bucket fill tool and click on the selected edge. Now, the image is changed to the following:

20. If we go to the store front and refresh our browser, we can easily view our new background We can change the image name by going to the stylesheet. css file of our theme. Go to line number 295, we will see this code:

background: url(‘../image/box_top.png’) no-repeat;

21. We can change the image name Now, let’s see how it is looking in the browser:

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