Two columns default prestashop template modification

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">
    {$HOOK_RIGHT_COLUMN}
</div>

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">
    {$HOOK_RIGHT_COLUMN}
</div>
}* 

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.