Two columns default prestashop template modification

prestashop two columns default template design


In the last article I showed you how to create wide homepage design with only one column. Today i want to show you how to remove one column from the default template and how to adapt content column to display pages well. It's easy to achieve, exactly the same as before - we need to modify only template files footer.tpl - to remove right column, and header.tpl to change grid parameter for center column.


The whole page content box has got 980px width, this kind of width in the grid system is called grid_9, below you can check grid values for other sizes (prestashop uses grid system so it's important to know something about that)


Grid and width values in PrestaShop's grid system:

.grid_1 {width:91px;}
.grid_2 {width:202px;}
.grid_3 {width:313px;}
.grid_4 {width:424px;}
.grid_5 {width:535px;}
.grid_6 {width:646px;}
.grid_7 {width:757px;}
.grid_8 {width:868px;}
.grid_9 {width:980px;}


Center column modification

By default center column has got grid_5 class="" param value, which mean that it has got 535px width. It looks well with two columns in the template. As i said, we want to remove one column which have got grid_2 param, it means that we remove the 202px. We need to add this to the center column. So our center column will have 757px - it's equal to the grid_7 value. We need to change grid_5 to grid_7 in the class="" param, exactly as i show below: (open the header.tpl file located in your theme dir)

<div id="center_column" class="grid_7 omega">

As you probably noticed I'm using "omega" param also. What does it mean? Omea means that margin-right param = 0px;


Remove the right column

Now we have to remove the right column from our template. In this case we have to open the footer.tpl file. We have got there code like this:

<!-- Right -->
<div id="right_column" class="column grid_2 omega">

Now we have two possibilties to remove right column from our template. First one: just remove the code. Second: add comments tags: {* before the code, and *} right after it, exactly as i show below:

<!-- Right -->
 <div id="right_column" class="column grid_2 omega">

Second method in my opinion it's much better, because maybe in the future we will want to use this column once again :). After save - you can refresh your front office. The changes should appear - if not, make sure that you'e got force compilation turned to on.


If you've got any questions related to this article - feel free to continue discussion below.

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