Footer Layout in OpenCart: Creating a wide footer for our store

First, we will create a wide footer for our store shop.

1. Getting started

Open up 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. We will open the default tpl file under catalog\view\theme\shop\ template\common. We will replace the default footer ID with the new footer content. There are two div tags: div1, div2. Following is the default footer content:

<div class=”div1″><a onclick=”window.open(‘https://www.paypal. com/uk/mrb/pal=W9TBB5DTD6QJW’);”><img src=”catalog/view/theme/ default/image/payment.png” alt=”” /></a></div>

<!–

OpenCart is open source software and you are free to remove the Powered By OpenCart if you want, but it’s generally accepted practise to make a small donation.

Please donate via PayPal to donate@opencart.com

//–>

<div class=”div2″><?php echo $text_powered_by; ?></div>

<!–

OpenCart is open source software and you are free to remove the Powered By OpenCart if you want, but its generally accepted practise to make a small donatation.

Please donate via PayPal to donate@opencart.com

//–>

</div>

We will apply a background style in the footer ID. But first, we will create a background image for our footer.

2. Open GIMP and create a 60×60 We will fill the image with the color #0d9492. Then, we select the bucket fill tool from the toolbox:

3. So, our background image becomes like this:

4. We place the following style code for the footer id in css under catalog\view\theme\shop\stylesheet:

#footer {

height: 500px;

background:transparent url(catalog/view/theme/shop/image/footer- back.png) repeat top center;

margin-top:40px;

}

5. When we go to the browser, the footer will appear as the following:

6. We will have an inner div class in our opened tpl:

<div class=”inner”>

//…

</div>

7. And apply the following style to this class in css:

#footer .inner{

padding:90px 20px 0px;

}

8. We add an inner block for site’s information in the footer within the footer ID:

<div class=”inner-block”>

<h3 class=”widgettitle”>Information</h3>

<ul>

<li><a title=”Text one” href=”#”>Text one</a></li>

<li><a title=”Text second” href=”#”>Text second</a></li>

<li><a title=”Text third” href=”#”>Text third</a></ li>

<li><a title=”Text fourth” href=”#”>Text fourth</a></li>

<li><a title=”Text fifth” href=”#”>Text fifth</a></li>

</ul>

</div>

<div class=”inner-block”>

<h3 class=”widgettitle”>Information</h3>

<ul>

<li><a title=”Text one” href=”#”>Text one</a></li>

<li><a title=”Text second” href=”#”>Text second</a></li>   

<li><a title=”Text third” href=”#”>Text third</a></li>

<li><a title=”Text fourth” href=”#”>Text fourth</a></li>

<li><a title=”Text fifth” href=”#”>Text fifth</a></li>

</ul>

</div>

9. Now, we need to do some styling with We use the following style in our stylesheet.css:

.inner-block {

float: left;

width: 300px;

}

.inner-block ul {

list-style-type: none;

padding: 5px;

}

10. So, our footer becomes like this:

11. And we make a style for the li tags also in our css:

.inner-block ul li {

padding: 10px 0px;

border-top: 1px solid #7cbfbe;

}

12. This makes our footer the following:

13. We then apply a hover style for the li tag in our css:

.inner-block ul li:hover {

background-color: #0db492;

}

14. By hovering the li tag, we find the following changes:

15. Now, we will change the font colour of the li tag element in our css:

.inner-block ul li a {

padding: 0px 10px;

text-decoration: none;

color: #fff;

}

16. So, the footer style becomes like this:

17. We now set a hover effect for our li tag element:

.inner-block ul li a:hover {

color: #FFC62F;

}

18. When we hover the texts of li element, then the style appears as this:

19. Now, we add another block to the We will use a contact us form here. We will add the following code block beside the information block:

<div class=”widget webtreats_contact_form_widget” id=”contact- form-widget”>

<h3 class=”widgettitle”>Email Us</h3>

<form method=”post” id=”contactFormWidget” action=””>

<p><input type=”text” tabindex=”5″ size=”22″ class=”requiredField textfield” value=”” id=”contactNameWidget” name=”contactNameWidget”><label for=”contactNameWidget” class=”textfield_label”>Name *</label></p>

<p><input type=”text” tabindex=”6″ size=”22″ class=”requiredField email textfield” value=”” id=”emailWidget” name=”emailWidget”><label for=”emailWidget” class=”textfield_ label”>Email *</label></p>

<p><textarea class=”requiredField textarea” tabindex=”7″ cols=”19″ rows=”20″ id=”commentsTextWidget” name=”commentsWidget”></textarea></p>

<p><input type=”submit” value=”Submit” tabindex=”8″ class=”button in_footer” id=”submittedWidget” name=”submittedWidget”></p>

</form>

</div>

20. We need to add some styling to our contact us We add the following style elements here:

.webtreats_contact_form_widget h3{

margin-bottom:8px;

}

textarea#commentsTextWidget {

padding-left:8px;

height:107px;

overflow:hidden;

}

21. After applying this style, our footer becomes like this:

22. We also use a background style for buttons:

#footer .button{

background:transparent none;

height:42px;

width:97px;

}

23. So, our Submit button of the contact us form becomes like this:

24. We apply some padding and margin to the input fields:

#footer input#emailWidget, #footer input#contactNameWidget{

height:24px;

padding:5px 8px;

width:178px;

}

25. When we go to the browser, it brings the following changes:

26. Again, we make a background color change of the input fields. We add this css style to our code:

.webtreats_contact_form_widget label{

vertical-align:top;

}

.inputError ,input[type=”text”].inputError {

border:1px solid #888;

}

#footer input[type=text], #footer textarea,#footer table,

#footer td, #footer th, #footer tr:hover{

background:#3ab3b2;

}

This makes our footer look like the following:

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