Hide/Disable Left and Right Columns on the basis of current page...

[utekaravinash]

Dear All,

 

I am new to prestashop and am trying to customize the default theme of version 1.4.7.3. I want to have the below layout for my home, category and product pages.

 

1. Home Page: Both the left and right columns will be disabled. The center column will occupy all the space between Header and Footer section.

 

2. Category Page: Right column will be disabled. Left column will be as it is. Center column will occupy the space for center and right columns.

 

3. Product Page: Left column will be disabled. Right column will be as it is. Center column will occupy the space for center and left columns.

 

Please let me know what all changes are required to achieve this layout.

 

 

 

 

 

 

 

Regards,

Avinash

 

PS: Please find the attached layouts for your reference.

[jhnstcks]

Disabling columns for certain pages is actually quite easy.

 

For the home page use: (change the center column width to suit your own site)

 

body#index #center_column {width:951px}
body#index #right_column #left_column {display:none}

 

For the category pages use:

body#category #center_column {width:951px}
body#category #right_column {display:none}

 

For the product pages use:

body#product #center_column {width:951px}
body#product #left_column {display:none}

 

This will work fine, aslong as you don't want to move boxes from left to right depending on the page.

[utekaravinash]

Thanks for the quick reply, jhnstcks.

 

Your CSS code is working perfectly fine to hide the left and right columns on the required pages. But what I have to do to disable these columns altogether, so that they won't execute the modules attached to these two hooks (left and right column hooks) unnecessarily on these pages?

[jhnstcks]

Thanks for the quick reply, jhnstcks.

 

Your CSS code is working perfectly fine to hide the left and right columns on the required pages. But what I have to do to disable these columns altogether, so that they won't execute the modules attached to these two hooks (left and right column hooks) unnecessarily on these pages?

 

If you go to back-office>modules>positions then edit the modules you want to hide and add an exception to the pages you want to hide them, index.php, category.php and product.php

[utekaravinash]

It works. Thanks for the help, jhnstcks

[monkeybiz]

which file must be edited to remove the right column from home/index page? I cannot find it anywhere.

Edited September 16, 2012 by monkeybiz (see edit history)

[elena.ant.gr]

which file must be edited to remove the right column from home/index page? I cannot find it anywhere.

The global.css of your current theme

[Cintia]

Hi, I don't know if it's because the version of prestashop I have is a newer one, but this code doesn't seem to be there in my global.css

 

 

body#index

 

how can I do it for the columns? the modules>position thing isn't working neither

 

Sorry to reopen this post, but I thought some of you might be able to help.

 

Thanks!

[utekaravinash]

Hi, I don't know if it's because the version of prestashop I have is a newer one, but this code doesn't seem to be there in my global.css

 

This code is not there is global.css... In fact, you have to add it to be able to hide some columns according to the current page....

 

e.g. The below code will hide both left and right columns on the index page,

 

body#index #center_column {width:951px}
body#index #right_column #left_column {display:none}

 

and this code will hide the right column on the category page,

 

body#category #center_column {width:951px}
body#category #right_column {display:none}

 

and this code will hide the left column on the product page,

 

body#product #center_column {width:951px}
body#product #left_column {display:none}

 

If you want to hide a module on some pages then you can do so by mentioning those page names in Exceptions list...

 

Modules > Positions > Edit > Exceptions

[Cintia]

This code is not there is global.css... In fact, you have to add it to be able to hide some columns according to the current page....

 

e.g. The below code will hide both left and right columns on the index page,

 

body#index #center_column {width:951px}
body#index #right_column #left_column {display:none}

 

and this code will hide the right column on the category page,

 

body#category #center_column {width:951px}
body#category #right_column {display:none}

 

and this code will hide the left column on the product page,

 

body#product #center_column {width:951px}
body#product #left_column {display:none}

 

If you want to hide a module on some pages then you can do so by mentioning those page names in Exceptions list...

 

Modules > Positions > Edit > Exceptions

 

thanks for the fast reply!

 

I added your code, but for some reason the left column keeps showing, I hope I didn't add text where I shouldn't :/

 

also, from te positions panel, I tried this, but it does nothing

[utekaravinash]

I added your code, but for some reason the left column keeps showing, I hope I didn't add text where I shouldn't :/

 

You may need to clear your browser's cache if the modified CSS is not taking effect... You may also want to disable Smarty cache and enable force compile option for template cache as follows...

 

Advanced Parameters > Performance > Smarty section > Template Cache > select Force Compile option

 

Advanced Parameters > Performance > Smarty section > Cache > select 'No'

 

 

 

also, from te positions panel, I tried this, but it does nothing

 

There should not be any issues with positions configuration... You may want to refer to prestashop user guide for configuring module positions...

http://doc.prestashop.com/display/PS15/Managing+Modules+and+Themes#ManagingModulesandThemes-Attachingamoduletoahook%3ATransplanting

[Cintia]

You may need to clear your browser's cache if the modified CSS is not taking effect... You may also want to disable Smarty cache and enable force compile option for template cache as follows...

 

Advanced Parameters > Performance > Smarty section > Template Cache > select Force Compile option

 

Advanced Parameters > Performance > Smarty section > Cache > select 'No'

 

 

 

still the same :·/ I'll keep trying

[naykel]

Hi There,

 

The information you provided works great on a page by page basis but I am setting up several pages with a two or three column layout and several pages with a single column layout.

 

With this you have to alter each line for each page

 

body#index #center_column {width:951px}

body#index #right_column #left_column {display:none}

 

body#category #center_column {width:951px}

body#category #right_column {display:none}

 

body#product #center_column {width:951px}

body#product #left_column {display:none}

 

 

is it possible to have one lot of css and call if for each page rather than manually having to modify each pages css

 

#only_center #center_column

body#index #center_column {width:951px}

body#index #right_column #left_column {display:none}

 

 

 

Regards

Nathan

[Adrobotoaeimarian]

thanks for the fast reply!

 

I added your code, but for some reason the left column keeps showing, I hope I didn't add text where I shouldn't :/

 

also, from te positions panel, I tried this, but it does nothing

 

Try this ... it should work

 

 

body#index #center_column {width:951px}

body#index #right_column, body#index #left_column {display:none}

[shulle]

Hey guys. Great easy-to-follow-tips.

 

Sorry for a dumb question - but how do I upload the global.css through the backoffice of prestashop? So the changes will take effect on the web shop?

 

Thanks!

[[email protected]]

Use an FTP software like FileZilla (it's free) the global CSS is in ../themes/(your theme name)/CSS/

 

All FTP login details will be on your host or with developer

 

Tip: back up old global.css first

 

Hope this helps

[Kogkalidis]

 

This will work fine, aslong as you don't want to move boxes from left to right depending on the page.

 

Is it ok if you want to disable different blocks depending on the page? No move, but I think resize has to change..

[Kogkalidis]

Disabling columns for certain pages is actually quite easy.

 

For the home page use: (change the center column width to suit your own site)

 

body#index #center_column {width:951px}
body#index #right_column #left_column {display:none}

 

For the category pages use:

body#category #center_column {width:951px}
body#category #right_column {display:none}

 

For the product pages use:

body#product #center_column {width:951px}
body#product #left_column {display:none}

 

This will work fine, aslong as you don't want to move boxes from left to right depending on the page.

 

In which file are all these?? [i FOUND IT-I HAD TO READ FURTHER ]

Edited January 15, 2013 by Λόχος Ορεινών Καταδρομών (see edit history)

[mechwr]

I'm using Prestashop 1.5 and I tried adding the codes in various sections of the global.css but it all messes up the layout. Where are the specific areas I need to inject to the code to change it appropriately?

 

For the home page use: (change the center column width to suit your own site)

 

body#index #center_column {width:951px}

body#index #right_column #left_column {display:none}

 

For the category pages use:

body#category #center_column {width:951px}

body#category #right_column {display:none}

 

For the product pages use:

body#product #center_column {width:951px}

body#product #left_column {display:none}

Edited January 16, 2013 by mechwr (see edit history)

[ricky11]

Im no expert, but as utekaravinash said if you just HIDE them in the css, the module and hooks are still being executed, and only the CSS is hiding the style so that your browser does not display them... I dont think this is the right method. what we want is to remove the column from certain pages.

 

I dont know if adding exceptions will do this either, as this still will load the code right?

[dadinan]

Hi - I had a similar problem and I think I solved it today. I just thought I'd post my solution to see if it was useful to anyone else. I have to warn you though, while I am a programmer, I am NOT a web programmer so my solution may not be good, but it seems to have worked for me anyway.

 

I wanted to remove the left hand column for 1 single page. (A page from a module that wasn't working right in 1.5). I then wanted to resize the center column to fill the space freed up. The name of the page I wanted to change was "module-realexredirect-request"

 

I replaced the following code in Header.tpl.

 

<!-- Left -->

<div id="left_column" class="column grid_2 alpha">

{$HOOK_LEFT_COLUMN}

</div>

<!-- Center -->

<div id="center_column" class=" grid_5">

 

 

To...

 

 

{if $page_name != 'module-realexredirect-request'}

<div id="left_column" class="column grid_2 alpha">

{$HOOK_LEFT_COLUMN}

</div>

<div id="center_column" class=" grid_5">

 

{else}

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

{/if}

 

 

You can review the actual Column widths defined by Grid 1 to 9 in the Grid_Prestashop.css file. As I said, I'm not at all experienced so this mightn't be the best idea, but it worked for me anyway.

[Mikie]

Hello,

same problem for me, when loading a certain module I'd like to hide the left column, so in the template of the module I added:

{literal}
<script type="text/javascript">
 $("body").addClass("hide-left-column");
</script>
{/literal}

Maybe a dirty way, but it works without changing the header of the default theme

Edited July 5, 2013 by Mikie (see edit history)

[vekia]

Hello,

same problem for me, when loading a certain module I'd like to hide the left column, so in the template of the module I added:

{literal}
<script type="text/javascript">
 $("body").addClass("hide-left-column");
</script>
{/literal}

Maybe a dirty way, but it works without changing the header of the default theme

 

where you added this code? can you explain please?

[Mikie]

where you added this code? can you explain please?

 

I added in the top of the tpl file of a module before everything

 

in my case, the file was:

modules/gestpay/templates/payment_execution.tpl

 

PS: sorry for delay of my reply, but I'm not always online

Edited July 10, 2013 by Mikie (see edit history)

[vekia]

can you check the browser console log? maybe some jquery errors appear there (which breaking the scripts) ?

[Mikie]

I checked it, using firefox 22 and firebug on prestashop 1.5.4.1 at page step 5 of payment (where the tpl file I changed is loaded): I didn't see any error or alert about jquery or any javascript.

[sendil1211]

Disabling columns for certain pages is actually quite easy.

 

For the home page use: (change the center column width to suit your own site)

 

body#index #center_column {width:951px}
body#index #right_column #left_column {display:none}

For the category pages use:

body#category #center_column {width:951px}
body#category #right_column {display:none}

For the product pages use:

body#product #center_column {width:951px}
body#product #left_column {display:none}

This will work fine, aslong as you don't want to move boxes from left to right depending on the page.

 

Hi where i need past this code please reply me

[vekia]

you have to paste this code to your theme global.css file.

[alin.dorobantu]

Hy,

 

I want show the left column

Yesterday was ok, but today disaprear, becouse i made some modifications, but i dont know where, no into the code.

Seams to be disabled.

 

Thx in advanced

[alin.dorobantu]

the site is http://www.danielafashion.ro/

 

 

[vekia]

your theme looks like .... it just doesn't support left column.

[bretweb]

Hello

 

I just jump on this post ... to display or not display something

 

Does somebody can help me ?

I would like to display a module but just on a category page :

 

module_name=htmlanimaux  be only displayed under  category 3
 module_name=htmlbienetre  be only displayed under  category 4
module_name=htmlmaisonjardin be only displayed under  category 13

 

or hide two of them when we are under a category page

I saw somewhere we can set this with smarty by place some code into header ... but not found

 

Somebody can help ?

Thank you

[Syed Ibadullah Jam]

Hi i want to only categories static in home page but any user click in sub-categories like men's so only men page open not all categories this scenario is only for mobile what can i do plzzz help fast...

[abville]

Can someone help me remove the right column in PHP?