[TUTORIAL] classic 3 columns theme

[vekia]

I've noticed that many merchants asking how to enable / disable columns in new bootstrap template. Many of forum members asking about turning on left and right column like it is in default prestashop 1.5 template.  This is why i decided to create  guide.

 

With this free tutorial you will achieve it easily. Step by step guide with pictures.

 

 

video overview:

 

 

tutorial here:

classic 3 columns template in prestashop 1.6

 

 

another guides:

classic product tabs in prestashop 1.6

[Yngvi]

I have noticed in your tutorial (unless I am missing it) that you have made no mention of removing the exceptions from the dsiplayLeftColumn modules. Some of the modules have exceptions that are blocking modules from being displayed, and this occurs especially if someone is upgrading from a previous version.

[vekia]

i will list all of these modules, but i have analyse them one by one in BO

[Yngvi]

Great, because judging by many of the posts on the forum, people are clicking display left column and display right column and then clicking all the pages where the columns are to appear and then posting that nothing happens. This is because there are exceptions on some of the modules and oddly on some of them by default, pages like 'product' are listed twice in the exceptions list, and both exceptions need to be removed.

[vekia]

in fact right column is just empty (in fresh installation) - when they turn right coumn on it is just empty, so it isn't appearing. It's confusing a little But i wrote about right column and described whole transplantation process

[waldiPL]

this is what i looked for

thanks a million Vekia, personally im fan of you

 

may i ask for something?

i want to move slider to the top, like i moved it in 1.5

any idea?

[vekia]

1) go to modules > positions in your back office

2) go to transplant page

3) from first dropdown select "image slider for your homepage", from second select displayTop position - and just save changes

4) go to themes/default-bootstrap/css/modules/homeslider/homeslider.css and change width:66.6% to width:100%;

 

voila

and don't forget to upload images with new width, because default images are too short.

[rickzmond]

This tutorial sir, save my life. Thanks a lot!

[vekia]

you're welcome

if you've got any other ideas about tutorials (perhaps you're looking for some solutions?) - just let me know

[jcalex22]

Vekia,

 

Hi, in a somewhat related request can you do a tutorial for how to reinstall the original Prestashop modules after updating them to the incompatible ones for version 1.6? I have read all the posts relating to that, uploaded all the original 1.5 modules and still cannot get my URL to launch. I tried to update to version 1.6 and that fixed the launching error, but my purchased template would not display at all, so I reverted to the non-working version. Back office is fine, but I just cannot seem to replace the updated modules with the older ones to get it working, as suggested in the forums.

 

Just thought I would try you, because you have a great understand of the program to say the least. I have been at this for only a couple months and thought I had a good grasp on things until I foolishly performed the update to the modules.

 

Any advice would be appreciated.

 

Best regards,

[vekia]

Vekia,

 

Hi, in a somewhat related request can you do a tutorial for how to reinstall the original Prestashop modules after updating them to the incompatible ones for version 1.6? I have read all the posts relating to that, uploaded all the original 1.5 modules and still cannot get my URL to launch. I tried to update to version 1.6 and that fixed the launching error, but my purchased template would not display at all, so I reverted to the non-working version. Back office is fine, but I just cannot seem to replace the updated modules with the older ones to get it working, as suggested in the forums.

 

Just thought I would try you, because you have a great understand of the program to say the least. I have been at this for only a couple months and thought I had a good grasp on things until I foolishly performed the update to the modules.

 

Any advice would be appreciated.

 

Best regards,

 

as you wish: http://mypresta.eu/en/art/issues/updated-prestashop-modules-not-work.html

 

but i think that it's not enough in your case

[vekia]

i updated article, i added section related to confusing error: "an error occured while updating this meta", with fix of course

[prestamax]

Maybe worth to be pinned at the top of the board?

[vekia]

Nice idea, i will release also my first real video guide today night, or tommorow morning,

waiting for real capacitor microphone  <3 can't wait !

[jcalex22]

Hi Vekia,

 

Here's my website URL that is not working since updating the incompatible modules: http://designsbyjalex.net

 

I had error messages turned on, so you can see what I am getting. I contacted Prestashop and they said my theme I purchased will be updated in a few days to be compatible with version 1.6. Good news, but I'd like to correct these errors before the update.

 

Can you check it out and point me in the right direction?

 

I appreciate your input.

[jcalex22]

Here's my website URL that is not working since updating the incompatible modules: http://designsbyjalex.net

 

One more item: this is the only error I am receiving in my configuration file too. Am I getting closer to a solution?

 

I appreciate your input.

 

Check your configuration

Required parameters: Please fix the following error(s)

• 
  Notice: Undefined index: files in /home/desig349/public_html/cache/smarty/compile/5c/09/d8/5c09d808c666cbfa77e750219160de87c913d678.file.view.tpl.php on line 260

Optional parameters: OK

 

List of changed files

Changed/missing files have been detected.

Missing files (1)

• admin1234/autoupgrade/index.php

[vekia]

hello

have you recompiled entire theme after overwriting modules?

[Karlitus]

hello,

 

I want to do the same but with only 2 columns, left and center. It´s possible ?

I did all the steps of the tutorial, except turn on right column, and everything seems fine except the image (slider). Slider does not fill the full width of the center column, has a blank space on the right side, already tried with a larger picture but it's the same.

 

I appreciate your help

[vekia]

yes it is

just disable right column for each page on theme preferences page.

change width of the slider to 100%, will work then (now it uses 66.6%)

[jahyax]

I have not starting 1.6 yet, but tutorials like this will certainly help me a lot in the future.. Thanks mate.

[jayne514]

hello,

 

I want to do the same but with only 2 columns, left and center. It´s possible ?

I did all the steps of the tutorial, except turn on right column, and everything seems fine except the image (slider). Slider does not fill the full width of the center column, has a blank space on the right side, already tried with a larger picture but it's the same.

 

I appreciate your help

This did not work for me - image only fills center column not where the 2 top images originally were as though its waiting for the images to be reinserted. Any help appreciated

[alex_ta]

Great guide Vekia.

worked perfect to me.

[vekia]

This did not work for me - image only fills center column not where the 2 top images originally were as though its waiting for the images to be reinserted. Any help appreciated

 

sorry for late reply, i was offline over the weekend.

is there any chance to see what you've got right now?

it's a little hard to imagine this problem

[vekia]

Great guide Vekia.

worked perfect to me.

you're very welcome :-) glad to hear that my guide helped you a little

[jayne514]

sorry for late reply, i was offline over the weekend.

is there any chance to see what you've got right now?

it's a little hard to imagine this problem

my website www.chicplus.com.au and www.pppjs.com.au - I had to put the slide images in so it looked ok

[vekia]

change: max-width: 779px; to: max-width: 1170px; in

#homepage-slider {
padding-left: 0;
padding-right: 0;
margin-bottom: 14px;
width: 100%;
max-width: 1170px;
max-height: 448px;
overflow: hidden;
position: relative;
z-index: 1;
float: left;
}

and of course upload slides with new resolution (width:1170px)

[jayne514]

change: max-width: 779px; to: max-width: 1170px; in

#homepage-slider {
padding-left: 0;
padding-right: 0;
margin-bottom: 14px;
width: 100%;
max-width: 1170px;
max-height: 448px;
overflow: hidden;
position: relative;
z-index: 1;
float: left;
}

and of course upload slides with new resolution (width:1170px)

Hi

I want the slider to fit next to the left column not be across the full top. Is this possible ?

[vekia]

and you wan to display it on each page? or only on homepage?

[HETPE3B]

Did the update by the tutorial mentioned. Seems to work, but have couple questions.

 

1) Something did happen with the Categories. Even selected category is e.g. "B", the highlighted category remains e.g. "a" (it is circled in the attachment). I also do not see the word "Categories", even when I'm in the "home" category. Instead of the word "Categories" I see the name of one of the categories. But, when I'm in the Positions Live Mode - Categories list works just fine.

2) Add to cart button seem to be oversized. Shipping rate button (from presta-changeo module) as well.

 

Any ideas what could be wrong?

Edited March 31, 2014 by HETPE3B (see edit history)

[jayne514]

and you wan to display it on each page? or only on homepage?

Home page only

[chemicalmtl]

hi, this is not working in version 1.6.0.5 , the slider show as static images. I tried a lotès of thing and cant make it work. please help...all slide image are show one the content page, there is no slider at all....

[dename]

1) Something did happen with the Categories. Even selected category is e.g. "B", the highlighted category remains e.g. "a" (it is circled in the attachment).

Hi, you probably have the same problem with categories described here http://www.prestashop.com/forums/topic/319267-categories-block-looks-like-one-category-is-selected-on-everywhere/?do=findComment&comment=1615431 , Forge issue here http://forge.prestashop.com/browse/PSCSX-1484

[waldiPL]

VEKIA you're my hero again

thank you!

any idea how to hook to center column bloc knew products module?

[vekia]

you mean that you want to transplant module to the displayHome hook?

[Gunship]

This tutorial is fantastic vekia. Thank You!

But i have exactly the same problem with "Add to Cart" button as HETPE3B . It's oversized.

http://store.smwarehouse.co.uk/index.php?id_product=8&controller=product

Are there any options to reduce its size and/or remove cart icon? 

Edited April 7, 2014 by Gunship (see edit history)

[ronpfid]

Got the 3 columns now, just my image slider is HUGE. Look at this screen shot? Any ideas?

 

Edited April 8, 2014 by ronpfid (see edit history)

[Gunship]

ronpfid - "Image slider for your homepage" module should be locked on "display Home" positon. 

[josebon]

This is a nice tutorial, thanks to Vekia. I transplanted the banner for two columns and is working, Now I just need to know how to change position, I want the banner to display on top of the New Products. I was not able to do it using the Live Positions Edit. 

 

Please Help. 

 

my site is http://pelosuave.com/presta/ 

 

Thanks.

[N-Connection]

It worked, but now i wanted to go back to 1 column or no collumns...It seems that i cant change this anymore?  i did everything in reverse but somehow my modules stay in the right colum, cant even unhook them (it says module is unhooked but then they are not) Even live edit wont work...

 

 

--SOLVED--

OK it was a problem with the cashe system, turning them all off made it work again (only emptying was not enoufgh).

 

 

Hans

www.N-Shop.be

Edited April 10, 2014 by N-Connection (see edit history)

[matte986]

This is a nice tutorial, thanks to Vekia. I transplanted the banner for two columns and is working, Now I just need to know how to change position, I want the banner to display on top of the New Products. I was not able to do it using the Live Positions Edit. 

 

Please Help. 

 

my site is http://pelosuave.com/presta/

 

Thanks.

Hi Vekia. Great tutorial, but now i've the same problem of josebon.  I'm not able to see slider before new product block.

Thanks

[ronpfid]

ronpfid - "Image slider for your homepage" module should be locked on "display Home" positon. 

"Thanks, I'll try that

[vekia]

Hi Vekia. Great tutorial, but now i've the same problem of josebon.  I'm not able to see slider before new product block.

Thanks

transplant module to displayHome position

also make sure that menu is at the end of list on "displayHome" modules list on modules > positions page in your back office

[matte986]

transplant module to displayHome position

also make sure that menu is at the end of list on "displayHome" modules list on modules > positions page in your back office

I try to transplant "New Product" in "Display Home" in my back office but it says that is not possible to transplant this module in this point. I only transplant in "Display Home" the "featured product" but not the new product

[vekia]

ok i see this module donesnt support this hook, in this case it's necessary to modify it

add function to handle displayHome hook, like it is in this addon: new products block

you can even try to use this module and then - paste .tpl file from original module from 1.6

it should work.

[alexthorn]

Hello

On my shop and on Your example image in first post in this topic left column is a bit lower then center and right. How can I make them all in one line?

[myselfidem]

I solved this issue adding inside my custom theme on global.css file (line 379 on my file) :

 

Path : .\themes\your_theme\css\global.css

h3 {
  margin-top: 0; /*18px;*/

Friendly

[alexthorn]

Big thanks. This work (I set 9pix how ever to get same line instead of 0).

 

I have also another problem: I did use this solution to get 3 columns with slider betwen them:
https://www.prestashop.com/forums/topic/450576-how-to-put-the-home-slider-on-the-right-side-of-the-homepage/

(is also mentioned somewere in this topic)

------------------

Make a space around line 604 and add the code below, 

 

 public function hookDisplayHomeTab($params)

     {

      return $this->hookdisplayTopColumn($params);

 

     }

 

then transplant to Image slider for your homepage to displayHomeTab (Home Page Tabs)

Now go to displayHomeTab in Modules, Positions and move the Image Slider to top of list

Now go to displayTopColumn and unhook Image slider 

Your Image Slider will now be in the Center column above the Home tabs

You may want to add some space between left column and bottom you can do that here.

Go to themes/default-bootstrap/css/modules/homeslider/homeslider.css and in the first block of css change the Padding-left and the margin bottom to your liking.

---------------------

and another problem I have is that slider is not directly in center. Space betwen slider and left column is much smaller then space betwen slider and right column.

 

Can You also help me solve this?

 

[alexthorn]

solved.

[theodorc]

hi! Is there any way to have the classic three columns theme,  keeping  the same time the homepage tabs? For example, if we want to have two categories, new products and featured products.

[Denkud]

vekia is good in developing and helping of people. kudos to him

[rc183]

Hi,

 

Thank you very much for this awesome tutorial but it seems there is an issue with the 3 columns mode and some pages. (see images)

 

Is there a way to always keep the 3 columns and fix the display issues ?

 

Thanks !

[Coal_Sa]

Much thanks for this tutoriel, just have a question:

i got my three columns and at the end of the displayhome is my themeconfigurator module.

i search a way to have the themeconfigurator hook full width, so out of displayhome.

can't find a way, can you point me in the right direction ?

 

i try to have the themeconfigurator images just on top of footer, full width, not in displayhome

[Coal_Sa]

Much thanks for this tutoriel, just have a question:

i got my three columns and at the end of the displayhome is my themeconfigurator module.

i search a way to have the themeconfigurator hook full width, so out of displayhome.

can't find a way, can you point me in the right direction ?

 

i try to have the themeconfigurator images just on top of footer, full width, not in displayhome

Any chance to find help ? i'm stuck on this