Administration Panel Theme in OpenCart: Footer adjustment

This recipe will show us how we can create a footer style for our store admin. We are going to apply some styling to the footer here.

1. Getting ready

First, we will open up the header.tpl file under admin\view\template\common.

2. How to do it…

We follow these steps to modify the footer:

1. In the tpl file, we placed the following code under the footer ID:

<div class=”column column1″>

<div id=”community_news-2″>

<h3 class=”widgettitle”>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>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>

</div>

<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>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>

</div>

<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>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>

</div>

</div>

</div>

Our footer then appears as:

2. We now apply the following style code for our footer column; we make the width fixed:

#footer{

color: #333;

position:relative;

width:1000px;

margin:0 auto;

padding-left:0px !important;

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

z-index:0;

padding-top:40px;

clear: both;

height:350px;

}

.column {

width:293px;

float:left;

padding-left:20px;

margin-right:20px;

}

3. See the following footer image:

4. We add the following code for the alignleft class:

.alignleft{

float:left;

margin:0px 15px 15px 0pt;

display: block;

}

5. Then, our footer column appears as the following:

6. We apply a hover color for the left column blocks:

#footer .box_entry:hover {

background-color: #d9dedd;

}

7. When we hover over our blocks, it appears as the following:

8. We add a bottom border and a padding to We add a 10px padding to the top title:

#footer h3, #top #footer .box_entry{

border-bottom:1px solid #ddd;

padding-bottom: 10px;

}

9. This makes the footer title appear as the following:

10. Now change the image border of the We set the border color to #AF7F00:

#footer .footer-box img{

border:1px solid #AF7F00;

}

11. So, the image border looks like this:

12. We also apply a code for the image hover style change:

#footer .footer-box img:hover{

border:1px solid #555;

}

13. When we hover the image area, the border changes to:

14. Now, we change the style for the block titles:

#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: #ccc;

}

15. Therefore, our footer block titles appear as the following:

16. You now use the following code for hovering on the title:

#footer h4 a:hover{

color: #999;

}

17. Our footer block header title appears as the following:

18. Again, we add the following style into our code block:

.box_entry .alignleft{

margin:6px 9px 0px 0;

}

19. So, when we look at the first column, it looks like this:

20. Now, it’s time to add a new block into our We add the following HTML code block:

<div class=”column column2″>

<div class=”footer-box”>

<h3>Benefits</h3>

<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</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>

</div>

Our footer contains two blocks and it becomes like the following:

21. We use the following styling for the center column:

.small_block{

padding:5px;

}

So, the list on the center block appears as the following:

And, there will be another block on the footer. Here is the code for that:

<div class=”column column3″>

<div class=”footer-box”>

<h3>Menu</h3>

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

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

</ul>

</div>

</div>

22. With the three columns, our footer now looks like this:

23. For list style, our third block will have the following style:

.column ul li{

color: #333333;

border-bottom: 1px solid #ccc;

display: block;

padding: 5px;

}

24. This changes our list:

25. We apply a hover color to the list But before that we need to remove the following code from the stylesheets.css of admin:

#footer a {

color: #333;

text-decoration: underline;

}

Now, we add our new text style code in the style code:

.column ul li a{

color: #333333;

}

.column ul li a:hover{

color: #9f670e;

}

This changes the font color on hover:

26. When we hover the list, the background needs to be For that we add this code block:

.column ul li:hover{

background-color: #d9dedd;

}

By hovering on the list, the look becomes like this:

27. We add a copyright block in the footer section:

<div class=”copyright”>

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

</div>

28. This appears as the following in the browser:

29. We add a clear div before the copyright block:

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

And also use the following styles:

#footer{

height: 400px;

}

.column {

height: 100%;

}

30. Now, this becomes like the following:

3. How it works…

We have used some column divs for the footer page. There are many different types of footer pages. Also, you can use your imagination to make your own footer page.

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