How to create full width footer in prestashop 1.5?

In this tutorial I will show you how to create full width footer in Prestashop 1.5.  We will edit only one file. No global.css file modification, no javascript , no php scripts  - just some simple changes in footer.tpl template file. Maybe some of you dont know what exactly the "footer" term mean and what exactly what it is. Well, this world has many uses in the computer world. However, I talk about "webpage footer" - the bottom section of your e-shop. This section is an area which typically contains most important informations about your company, copyright informations etc. In the default free prestashop template you can also find there links to the terms of service, contact, help, about us section etc.

 

By default, this section has got about 980px width and hasn't got full-width. I want to show you how to change it, just take a look below, on the picture I show you what i exactly expect.

 

full width footer prestashop 1.5

 

 

How to create full width footer.

As I said - all steps in this tutorial are related to the default template. So, go to the themes/default/ directory and open footer.tpl file. You have got there something like:

 

  {if !$content_only}
    </div>
    <!-- Right -->
      <div id="right_column" class="column grid_2 omega">
        {$HOOK_RIGHT_COLUMN}
      </div>
    </div>
    <!-- Footer -->
    <div id="footer" class="grid_9 alpha omega clearfix">
      {$HOOK_FOOTER}
      {if $PS_ALLOW_MOBILE_DEVICE}
        <p class="center clearBoth"><a href="{$link->getPageLink('index', true)}?mobile_theme_ok">{l s='Browse the mobile site'}</a></p>
      {/if}
    </div>
</div>
{/if}
</body>
</html>

 

All you need to do is to change code above, just copy code i attached below and paste it into footer.tpl file. Save changes and now you can refresh your website. Remember that sometimes it is necessary to turn force compilation on. Sometimes without this feature changes in .tpl files doesnt appear.

 

Code to paste into footer.tpl file

{if !$content_only}
</div>
<!-- Right -->
  <div id="right_column" class="column grid_2 omega">
    {$HOOK_RIGHT_COLUMN}
  </div>
</div>
<!-- Footer -->
</div>
<div id="footer" style="width:100%; clear:both; display:block; overflow:hidden;">
  <div style="width:980px; display:block; margin:auto; clear:both;">
    {$HOOK_FOOTER}
    {if $PS_ALLOW_MOBILE_DEVICE}
      <p class="center clearBoth"><a href="{$link->getPageLink('index', true)}?mobile_theme_ok">{l s='Browse the mobile site'}</a></p>
    {/if}
  </div>
</div>
{/if}
</body>
</html>

 

Some questions?

if you've got questions related to this article, feel free to write comment.

 

Maybe you will be interested in Advanced footer - module which gives you an ability to create web 2.0 footer. Check it!

author milos myszczuk
Article by Milosz Myszczuk PrestaShop expert, official PrestaShop community moderator. PHP developer, specialist in relative and spatial databases management, GIS Analyst, CEO & founder of VEKIA interactive agency. Read more about VEKIA company
If you like my articles and want much more valuable tips, feel free to send me donation
1.4 version 1.4.11 1.6 404 addon admin advertise ahref ajax alpha animation api app application authentication back office backup badge banner basics block bootstrap button cache carrier cart catalog category certificate changelog chat class clear client clip cms code colors columns comments configuration contact container content controller cookie counter country coupon css csv currency customer dashboard database debug default delete delivery desktop developer device disable discount displayNav displayTop download dynamic editor effect empty encrypt engine error exchange exclude export facebook faceshop fade fancoupon fancybox fanpage fatal feature feed field file fix fixed font footer free friendly url front ftp full gallery generate gift global godaddy google google+ gray grid groupon header help hide highlight homefeatured homepage hook hosting hover howto htaccess html html5 ID image import include input instagram installation integration iPhone issue javascript jquery kgb knowhow languages law left likebox link list livingsocial loading log login logo loyality mail mailing maintenance manufacturer marketing marquee mcrypt menu meta mobile modification module movie moving multilanguage multiupload must have mysql news newsletter notification number open graph order override page password performance PHP phpmyadmin picture pinterest plugin popup post prestashop prestashop 1.0 prestashop 1.1 prestashop 1.2 prestashop 1.3 prestashop 1.4 prestashop 1.5 price rules problem product profile promotion proslider purifier quantity query quick tip random rates register reinsurance release reporting reset responsive restore results ribbon rich text right sales search security seo service shadow share shipping shop shopmania slider smarty social networks SQL SSL statistics stock store style subcategory superuser support switcher tab tablet tag tax template text theme tinyMCE tips and tricks tpl tracking translations tree trends trigger tumblr tutorial twitter update upgrade upload variables video visits voucher vulnerability web2print wide widget width window wishlist wysiwyg youtube zip zopim