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 ﬁle under Catalog\view\theme\shop\template\common with our favourite editor.

2. How to do it

We will follow these steps:

Under the footer ID, we create our ﬁrst We apply the following code block for this column:

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

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

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

</div>

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

<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.

</p>

</div>

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

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

Live simpler, greener and clean.

</p>

</div>

Without footer style, our footer now appears as this:

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

#footer{

color: #333;

background: #DFA200; position:relative;

width:1000px;

margin:0 auto;

padding-left:0px !important;

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

z-index:0;

padding-top:40px;

clear: both;

}

After applying the style, our code becomes as this:

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

.box_entry{

font-size: 11.5p;

line-height: 1.6em;

padding:0;

margin: 0 0 10px 0;

}

This brings the following changes to our footer:

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

#footer .box_entry:hover {

background-color: #DFB137;

}

This brings about the following changes:

Now, we resize the ﬁrst We apply a width to it:

.column {

width:293px;

padding-left:20px;

margin-right:20px;

}

When we go to the browser, we ﬁnd our footer as this:

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;

}

Refresh the browser and bring the changes:

And apply a border to the footer images:

#footer .footer-box img{

border:1px solid #AF7F00;

}

This brings the following changes:

We apply a hover effect to our image border style:

#footer .footer-box img:hover{

border:1px solid #555;

}

When we hover the images, the style changes like:

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;

}

This brings the following change:

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

#footer h4 a:hover{

color: #999;

}

When we hover the title, it brings the changes:

Now, we add this code style:

.alignleft{

float:left;

margin:0px 15px 15px 0pt;

display: block;

}

This brings the ﬁrst column as the following:

We use a margin property to the ﬁrst column:

.box_entry .alignleft{

margin:6px 9px 0px 0;

}

And our column appears as the following:

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

<h3>Benefits</h3>

<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

anywhere.</p>

<p class=”small_block”>Track your expense

that you have spent.</p>

<p class=”small_block”>Access your account

from being online.</p>

</div>

With two columns, the footer appears as this:

We apply a float attribute to the column class:

.column {

float:left;

}

This brings the two columns side by side:

You need to add padding to the small_block class:

.small_block{

padding:5px;

}

So, our second column looks like this:

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

<ul>

<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>

</ul>

</div>

When we see the browser, it appears as this:

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;

}

And our lists look like the following:

We apply a colour to the list’s text:

.column ul li a{

color: #333333;

}

Then, the list becomes:

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

.column ul li:hover{

background-color: #DFB137;

}

This code block brings the following change:

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

.column ul li a:hover{

color: #9f670e;

}

In the browser, the list looks like this:

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

</div>

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

div.copyright{

margin:0 240px;

}

Then, our footer becomes like this:

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

Opencart

Footer Layout in OpenCart: Creating a three column footer

1. Getting started

2. How to do it

Leave a Reply Cancel reply

1. Getting started

2. How to do it

Leave a Reply Cancel reply

Login