O'Reilly logo

OpenCart 1.4 Template Design Cookbook by Tahsin Hasan

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Footer with a gradient image

We have seen a wide footer in our previous recipe. In this recipe, we will create another footer with a gradient image as the footer background. We will add the contact information, telephone numbers, and some useful links in the footer.

Getting started

We open up the footer.tpl file under catalog\view\theme\shop\template\common with our favourite editor.

How to do it

We will follow these steps:

  1. We first create a footer container in the footer ID of our HTML block. The containing code is placed below:
    <div id="footer">
    <div class="footer-wrap">
    <div class="footer-content">
    //...
    </div>
    </div>
    </div>
    
  2. For the footer ID, we will create a background image with the dimension 2x247. We choose #c6a50c as the foreground colour ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required