Home Page Layout

[nocturnal]

Good morning Prestashop Team,

 

I'm new to Prestashop and downloaded it for the first time last week. My version is 1.6.

So far I've had no problems with anything except the layout of the home page.

 

A very rough image of my ideal layout is attached to this message.

1) a left column with a Categories list over a Best Sellers list,

2) a central panel with a slider at the top and about six to eight Featured Products underneath it, in rows of 3 to 4,

3) no right column

4) a standard footer.

 

I've tried every tutorial I could find, I've followed the documentation, I've uninstalled and reinstalled Prestashop a dozen times on my local server. And still I cannot get my ideal layout to happen.

 

Any tips would be greatly appreciated.

 

Cheers,

Jack.

 

[ozcad2]

Hi

 

I am no expert but start by going into the back office>preferences>themes

 

there you can edit the theme.

 

you may also need to go to modules>positions and scroll down to find displayhome and also displayleftcolumn and move the modules up or down, transplant modules etc. Please also refer to the online help at http://doc.prestashop.com/display/PS15/Designer+Guide

 

Also, there are good themes you can buy here - http://themeforest.net/category/ecommerce/prestashop that might have exactly what you want out of the box. 

 

Good luck

Craig

[nocturnal]

Thanks Craig!

 

I don't expect you to answer my next questions - it's probably something for the gurus.

 

I've managed to get this far. (See attachment).

 

I've completed the tutorial on making the image slider full-sized, and I've also followed all the instructions in the forum post on the topic, beginning with disabling the homebanners in the theme configuration block.

 

I've changed the width of the image slider to 1170 in BOTH homeslider.js files, (although I did not change the wireframe column width from 8 to 12 because presumably the left column needs to occupy 4 wireframe columns).

 

I've deleted all the default images in the homeslider and replaced them with images 1170px wide.

 

Problem 1: Every module I add into the DisplayHome Content hook ends up to the RIGHT of the image slider. As if there's a right-hand column there. But there isn't, because I've checked the BO and there is NO right column, and there are also no modules hooked to DisplayRightColumn.

 

Problem 2: The image slider's width doesn't extend to the right hand margin of the layout.

 

Seriously,I have spent a lot of time on this and I still can't figure it out. Any suggestions, anyone?

Edited May 2, 2014 by nocturnal (see edit history)

[nocturnal]

Here's an update, after much trial and error. The slider is wider but  it still doesn't reach the right hand margin, and simply crushes the modules that ought to be underneath it.

Edited May 2, 2014 by nocturnal (see edit history)

[nocturnal]

EUREKA!!!!!

I've just adjusted the maximum width in homeslider.css and it works!

 

#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; }

 

Probably this was blatantly obvious to everyone else but I've never had any formal training in any codiing, and it wasn't obvious to me.

[dioniz]

Try to change column to 9 because left column is set to 3

[ozcad2]

Hi

 

Here is a pic of my homepage using left column only.

 

 

Also look at using Interent Explorer 11 and press the F12 button.

This gets you the ability to use the DOM Explorer to click on the elements and adjust them on the page as a test. Also shows where the elements are located (css files / modules etc). You can then use FTP or other means to make adjustments to the css files or modules as required.  

 

See pic 2 - 

 

Regards

Craig

[dioniz]

You can use developers tools in Chrome or Firebug in FF.

F12 to open.

[nocturnal]

Great stuff!  Thanks for the tips Dioniz and Craig.

 

PS Nice layout Craig. Hope I can get mine to look that good.

Edited May 2, 2014 by nocturnal (see edit history)

[ozcad2]

Great stuff!  Thanks for the tips Dioniz and Craig.

 

PS Nice layout Craig. Hope I can get mine to look that good.

Thanks - I bought a theme from ThemeForest - $65. Some issues but a good start. It is the London Theme: http://themeforest.net/item/london-premium-prestashop-theme-blog-15-16/6818284. He also does Tokyo theme (more recent) which might be what you are after with the left column already there by default - http://themeforest.net/item/tokyo-responsive-prestashop-theme-with-blog-16/7191880

 

 

I am also looking at this one as well when he finishes adding the mega menu  - http://themeforest.net/item/zensation-responsive-prestashop-15-16-theme/6466123

Craig

[nocturnal]

$65 is a way better price than the themes I was looking at from another seller. I see that 'London' has parallax scrolling, too, which I'd overlooked on your screen cap, and which I'm a big fan of. I've checked out those other themes, too, pretty impressive! 

[Puriom]

@Ozcad2 hi! Id' like to ask you (on any help would be appreciated) how did you manage add the mega menu at London them. Thank you.

[ozcad2]

@Ozcad2 hi! Id' like to ask you (on any help would be appreciated) how did you manage add the mega menu at London them. Thank you.

The London Theme came with the mega menu as part of the theme. It does not automatically populate the menu across the top with the categories from the list of categories you have in the back office - you have to build it up with hyperlinks. However, this makes it very flexible as you can add other links, images, subcategories etc and choose various layout options.

 

The Category Block on the left hand side works like normal from the default theme.

 

Craig