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.

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!