Footer Layout in OpenCart: Creating a three column footer

In this recipe, we will learn how to create a three column footer. We are going to add each column step by step.

1. Getting started

We bring the footer.tpl file under Catalog\view\theme\shop\template\common with our favourite editor.

2. How to do it

We will follow these steps:

  1. Under the footer ID, we create our first We apply the following code block for this column:

<div class=”column column1″>

<div id=”community_news-2″>

<h3 class=”widgettitle”>Site Features</h3>

<div class=”entry box_entry footer-box”>

<h4><a href=”#” rel=”bookmark” title=”Permanent Link: Apple rebrands to Banana!”>Enjoy Ease and Convenience</a></h4>

<a class=”alignleft preloading_ background” href=”#” title=”Apple rebrands to Banana!”><img class=”rounded alignleft” src=”catalog/view/theme/shop/image/ login-social.png” alt=”” title=”Apple rebrands to Banana!” height=”40 ” width=”40″/></a>

<p>Manage your account online anytime, from anywhere. View and print your bills in seconds. Relax with email alerts and payments information.</p>


<div class=”entry box_entry footer-box”>

<h4><a href=”#” rel=”bookmark” title=”Permanent Link: Hello world!”>Save Time and Money</a></h4>

<a class=”alignleft preloading_ background” href=”#” title=”Hello world!”><img class=”rounded alignleft” src=”catalog/view/theme/shop/image/basket-social.png” alt=”” title=”Hello world!” height=”40 ” width=”40″/></a>

<p>If you are still paying all of your monthly bills by writing checks, you are wasting time and money and setting yourself up for potential late fees.

Save time & money being online.



<div class=”entry box_entry footer-box”>

<h4><a href=”#” rel=”bookmark” title=”Permanent Link: Adobe Wallpaper contest”>Live Simpler and Greener</a></h4>

<a class=”alignleft preloading_ background” href=”#” title=”Adobe Wallpaper contest”><img class=”rounded alignleft” src=”catalog/view/theme/shop/image/home- social.png” alt=”” title=”Adobe Wallpaper contest” height=”40 ” width=”40″/></a>

<p>Reduce paper clutter, stacked mail, and un-filed records. Save some trees with paperless billing.

Live simpler, greener and clean.





  1. Without footer style, our footer now appears as this:

  1. Now, we apply a style code for our footer in our css. We will make our footer a little wider. For IE 6 fixes, we can use the styles for those fixes in a different style file:


color: #333;

background: #DFA200; position:relative;


margin:0 auto;

padding-left:0px !important;

/*ie6fix*/ padding-left:20px;



clear: both;


  1. After applying the style, our code becomes as this:

  1. For the box_entry class, we apply style for font size, line-height, etc:


font-size: 11.5p;

line-height: 1.6em;


margin: 0 0 10px 0;


  1. This brings the following changes to our footer:

  1. We apply hover effect for this column with the following code:

#footer .box_entry:hover {

background-color: #DFB137;


  1. This brings about the following changes:

  1. Now, we resize the first We apply a width to it:

.column {





  1. When we go to the browser, we find our footer as this:

  1. We have a bottom border at the footer So, we add this code for the header title:

#footer h3, #top #footer .box_entry{

border-bottom:1px solid #fff;

padding-bottom: 5px;


  1. Refresh the browser and bring the changes:

  1. And apply a border to the footer images:

#footer .footer-box img{

border:1px solid #AF7F00;


  1. This brings the following changes:

  1. We apply a hover effect to our image border style:

#footer .footer-box img:hover{

border:1px solid #555;


  1. When we hover the images, the style changes like:

  1. For the titles and section headers, we change the font colour to this:

#footer h1, #footer h2, #footer h3, #footer h4, #footer h5,

#footer h6, #footer legend, #footer h1 a, #footer h2 a, #footer h3 a,

#footer h4 a, #footer h5 a, #footer h6 a{

color: #ddd;


  1. This brings the following change:

  1. For hover effect with our section title, we use this code block:

#footer h4 a:hover{

color: #999;


  1. When we hover the title, it brings the changes:

  1. Now, we add this code style:



margin:0px 15px 15px 0pt;

display: block;


  1. This brings the first column as the following:

  1. We use a margin property to the first column:

.box_entry .alignleft{

margin:6px 9px 0px 0;


  1. And our column appears as the following:

  1. Now, we add column two to our First, we add the HTML code style:

<div class=”column column2″>

<div class=”footer-box”>


<p>Grameen billing system is the unique way to keep you informed about your bills. Using online billing system you have several benefits.</p>

<p class=”small_block”>You don’t need to keep paper copy of your bills.</p>

<p class=”small_block”>Pay bills from


<p class=”small_block”>Track your expense

that you have spent.</p>

<p class=”small_block”>Access your account

from being online.</p>



  1. With two columns, the footer appears as this:

  1. We apply a float attribute to the column class:

.column {



  1. This brings the two columns side by side:

  1. You need to add padding to the small_block class:




  1. So, our second column looks like this:

  1. Now, we add column Following is the HTML code block for the third column:

<div class=”column column3″>

<div class=”footer-box”>



<li><a href=”#” title=”Terms of Service”>Terms of Service</a></li>

<li><a href=”#” title=”Privacy Policy”>Privacy Policy</a></li>

<li><a href=”#” title=”About us”>About Us</a></li>

<li><a href=”#” title=”Support”>Support</a></li>

<li><a href=”#” title=”FAQ”>FAQ</a></li>




  1. When we see the browser, it appears as this:

  1. For the styling of the list, we add the following css code:

.column ul li{

color: #333333;

border-bottom: 1px solid #AF7F00;

display: block;

padding: 5px;


  1. And our lists look like the following:

  1. We apply a colour to the list’s text:

.column ul li a{

color: #333333;


  1. Then, the list becomes:

  1. When we hover the li elements, it will change the background colour of the

.column ul li:hover{

background-color: #DFB137;


  1. This code block brings the following change:

  1. On text hover, we change the colour of the text:

.column ul li a:hover{

color: #9f670e;


  1. In the browser, the list looks like this:

  1. At the bottom of the footer, we add the copyright The following is the HTML code structure for the copyright block:

<div class=”clear”></div>

<div class=”copyright”>

<p>&copy; 2010 Shop Inc. | Ecommerce System – Yours ultimate ecommerce solutions.</p>


  1. For this HTML block, we add the following style code:


margin:0 240px;


  1. Then, our footer becomes like this:

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

Leave a Reply

Your email address will not be published. Required fields are marked *