Jump to content
utekaravinash

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

Recommended Posts

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.

 

post-368570-0-05107500-1338453748_thumb.png

 

 

post-368570-0-89709700-1338453741_thumb.png

 

 

post-368570-0-84842100-1338453749_thumb.png

 

 

Regards,

Avinash

 

PS: Please find the attached layouts for your reference.

  • Like 1

Share this post


Link to post
Share on other sites

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?

  • Like 1

Share this post


Link to post
Share on other sites

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

  • Like 5

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites
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

  • Like 1

Share this post


Link to post
Share on other sites

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

  • Like 1

Share this post


Link to post
Share on other sites
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

  • Like 1

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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}

  • Like 1

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

 

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..

Share this post


Link to post
Share on other sites

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 by Λόχος Ορεινών Καταδρομών (see edit history)

Share this post


Link to post
Share on other sites

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}

post-395609-0-15424800-1358307208_thumb.png

post-395609-0-83514800-1358307221_thumb.png

Edited by mechwr (see edit history)

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 by Mikie (see edit history)

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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 by Mikie (see edit history)

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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...:(

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More