Footer Layout in OpenCart: 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.

1. Getting started

We open up 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:

We ﬁrst create a footer container in the footer ID of our HTML The containing code is placed below:

//…

</div>

For the footer ID, we will create a background image with the dimension 2×247. We choose #c6a50c as the foreground colour and #987e04 as the background color:

Now, we will choose the gradient tool from the tool box of GIMP:

We apply the selected colours with the gradient tool from top to We save the image as footer.png. We use some styling for our footer block in our stylesheet.css:

/* Footer */ #footer {

border-top: 1px solid #d0d3d8; padding: 0.5em 0;

clear: both;

background: transparent url(‘catalog/view/theme/shop/image/ footer.png’) repeat-x top left;

Min-height:246px;

width:100%;

margin:auto;

color: #fc0;

line-height:20px;

}

If we refresh our browser, we get our footer as this:

Our ﬁrst container block will be the email We add the following code

block there:

<p>admin@fishshop.com</p>

<p>info@ fishshop.com</p>

</span>

</div>

So, the footer appears as follows:

We will add an image icon for the email We searched the Internet and chose the following image. You can ﬁnd your favorite one.

And apply the following code in our tpl:

</span>

Then, the footer becomes like this:

Our email block is at the top left corner, we will do some styling with See the following styles:

.footer-wrap{

width:960px;

margin:auto;

}

.footer-content{

width:960px;

margin:auto;

overflow:hidden;

padding-top:10px;

}

.footer-content p{

font-size:16px;

text-align: center;

}

This makes our email block more See the following image:

We add a width property for the email Here is the width code:

.email{

width:330px;

float:left;

}

Now, the email block appears like this:

We now add the phone block to the footer:

<p>880197<span class=”phone-word1″ style=”display: inline;”>fishshop.ltd</span></p>

</span>

</div>

In the browser, the footer becomes:

We also add another image icon for the phone We get the following image icon:

And add the following code, we can also use the css background property to use icons:

</span>

When we refresh our browser, it looks like this:

Now, we add the following style code block for the contact section:

.contact{

width:270px;

float:left;

}

This makes our footer look like the following:

Now, add the Services block into our footer Here is the HTML code block for that:

<ul><span>Services</span>

<li><a href=”#”>Gallery</a></li>

<li><a href=”#”>Location</a></li>

<li><a href=”#”>Contact</a></li>

</ul>

</div>

In the browser, we found it as this:

We need to do some styling to our list items for the services block:

#footer li a{

color: #fc0;

text-decoration:none;

}

This brings the following changes to our site footer:

There needs to be some spacing between the footer So, we apply some padding there too:

.footer-info ul li{

padding: 5px 5px 0px;

}

When we go to the browser, it looks like this:

We apply a different colour for the services block

.footer-info span{

padding-bottom:2px;

color:#fff;

}

It makes the services header look like this:

You can apply a bottom border to the service block For this, we will apply the following style:

.footer-info span{

border-bottom:1px solid #ffffff;

}

It brings a bottom border to the service block

We use a hover colour for the service block We add the following style code for this purpose:

#footer li a:hover{

color: #f7f888;

text-decoration:none;

}

This brings about the following changes to the footer:

This completes the service block We now add another block site-info to the footer:

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

<li><a href=”#”>Terms & condition</a></li>

</ul>

</div>

Let’s refresh our browser, we will ﬁnd our footer as follows:

There will be a float property for the site-info block:

.footer-info{

float: left;

}

The blocks now become like the following:

Still the blocks are too close to each So, we apply a width for the information blocks:

.footer-info{

width: 150px;

float: left;

}

So, our footer now displays the following contents:

Now, place a divider between each section of the We can also use the border colour to create a divider effect:

We add the following styling for this:

.foot-divider{

height:130px;

width:1px; margin:0px 20px;

float:left;

background:#c1c0b9;

}

In the browser, our footer now is like the following image:

At the bottom, we add the copyright section at the Following is the HTML code block:

</p>

<p class=”copyright”> developed by: ABCD</p>

</div>

The footer now appears with the copyright section:

For the bottom class, we apply the following style code:

.footer-bottom{

text-align:center;

margin:auto;

padding-bottom:40px;

width:620px;

}

This makes our footer bottom like this:

We will add a site logo on the footer For this, we need to have the following img tag:

We can view the footer with our site logo now:

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

Opencart

Footer Layout in OpenCart: Footer with a gradient image

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