[TIP] Change layout on specific pages

[ruilong]

Recently I have been working on a prestashop theme and the client wanted to use different layouts on different pages,
Mainly the category page and product page should not use the right column, instead it should only have two columns.

Too accomplish this, I had to change some of the "core" files, maybe there is a better way to do this, but anyhow, here is how I did it.

/category.php

In this file I changed the line

include(dirname(__FILE__).'/header.php'); 

to

include(dirname(__FILE__).'/headerwide.php');

and in the bottom

include(dirname(__FILE__).'/footer.php');

to

include(dirname(__FILE__).'/footer_wide.php');

this will override the loading of the original header.php and footer.php on category page.

I created a new file in / called headerwide.php that is a copy of header.php with the difference

$smarty->display(_PS_THEME_DIR_.'headerwide.tpl');

instead of

$smarty->display(_PS_THEME_DIR_.'header.tpl');

headerwide.tpl was now changed to set different id on the center_column so that I could modify the css to make it wider.

footer_wide.php placed under / was also added, this file contains

<?php

if (isset($smarty))
{
   $smarty->assign(array(
       'HOOK_FOOTER' => Module::hookExec('footer')));
   $smarty->display(_PS_THEME_DIR_.'footer_wide.tpl');
}

?>

This will have the effect that the right hook is not loaded

footer_wide.tpl in the theme folder looks like this

<!-- Footer -->
{$HOOK_FOOTER}

   </body>
</html>

now the right column have been removed on the category page.

hope it helps someone

Remember that if you upgrade after this, you will have to change the php files under / again.

[jhnstcks]

You could just use the css file to change the category.tpl div to not show the right column as I have posted in the code example below.

/* category.tpl */
#category #right_column { display: none; }
#category #center_column {
   width: 730px;
   text-align: justify;}

The end result to this would be that the center column would stretch across the right column space.

The product.tpl page would be more complex as you would have to redesign the whole page to use the extra space.

[ruilong]

thanks for the tip, I'm gonna try that next time I need to change to only two columns on separate pages, however, my "tip" can be used if someone wants to modify totaly different designs on different pages, maybe they want to change more than just the number of columns.

[Paul C]

I created different css styles and just used them in the template files, so content and content_wide classes or even a class specific to a particular page.

Paul

[rafy]

this i just what i was looking for!
thanks man!