How to change the overall page width of Prestashop Website

[ImperialTrader]

Hello,

 

How to change the overall page width of the default prestashop theme?

 

I need to make it 100%, no need the blank parts at the right and left of the website.

 

[me-and-prestashop]

In global.css try:

 

.container {
    max-width: 98%;
}

in stead of:

.container {
    max-width: 1170px;
}

You will probably want to do some more ajoustments (e.g. for the banners)

[ImperialTrader]

Perfect, thank you

 

What if I need only the banners (Image Slider module) at home page to be 100% width but all the pages in the website to remain 1170px?

[me-and-prestashop]

Google is your friend. I found this searching for "prestashop 1.6 homeslider full width":

https://m.youtube.com/watch?v=qKUzECilPJk

[ImperialTrader]

I know that but this is not my question

 

See the attached picture please to get my idea..

[ImperialTrader]

Hello...

 

Anyone there?

[me-and-prestashop]

I have not tested this on a real installation of Prestashop, but as a start you might try:

.index #columns {
  max-width: 100%;
}
.index #columns .row {
  margin-left: auto;
  margin-right: auto;
  max-width: 1170px;
}
.index #slider_row.row {
  max-width: 100%;
}

In addition to this you will have to change the size of the banner(s). Here is a guide for making the main banner (slider) full width.

 

Remember that your banner is now more than 1170px wide - depending on the user's screen width. (The banner will be much smaller on e.g. a smart-phone.)

 

(Edit: Added .index to target home page only)

Edited November 27, 2014 by me-and-prestashop (see edit history)

[ImperialTrader]

I tried this before...

 

The problem that the body of all the pages/categories/products in the website is became 100% width

 

But I need the slideshow (homeslider) and the menu only to become 100% width and all the other pages in the website remain as it is

[me-and-prestashop]

To ajoust the menu, it is probably easier to place the menu outside the container div and/or row div inside the header - on the home page only (using if-statments). So the menu is in the default place if page is not index {if $page_name !='index'} ... {/if}

The menu is outside the divs mentioned if page is index. Then you can style the #block_top_menu to width: 100%;
(Backup the file before editing a .tpl file in case something goes wrong)

[ImperialTrader]

 

I have not tested this on a real installation of Prestashop, but as a start you might try:

.index #columns {
  max-width: 100%;
}
.index #columns .row {
  margin-left: auto;
  margin-right: auto;
  max-width: 1170px;
}
.index #slider_row.row {
  max-width: 100%;
}

In addition to this you will have to change the size of the banner(s). Here is a guide for making the main banner (slider) full width.

 

Remember that your banner is now more than 1170px wide - depending on the user's screen width. (The banner will be much smaller on e.g. a smart-phone.)

 

(Edit: Added .index to target home page only)

 

 

 

That's great.. thank you

 

I need to do an extra feature in the homeslider too, if you don't mind

 

I need the Slide Show to be full screen at Left, Right and Bottom (not Top because Menu will be displayed normal), also don't want to show any scroll bar.

So, can I use a code like that?

 

<img src="1.jpg" style="top: 0; left: 0; right: 0; bottom: 0; position: absolute; height: 100%; width: 100%;">

 

If you test this code in any html file, you will understand what I mean exactly!

 

Note: I removed the footer completely and also removed everything under SlideShow

So the Slideshow now is the end of home page

Edited December 1, 2014 by ImperialTrader (see edit history)

[me-and-prestashop]

Are your site online?

 

Why not buy what you want? Like this one?

http://smartdatasoft.com/codecanyon/revolution_ps/fullscreen.php

(I don't know how well this one works, but it even plays well in my old Safari 5.0.5)

Edited December 1, 2014 by me-and-prestashop (see edit history)

[ImperialTrader]

Are your site online?

 

Why not buy what you want? Like this one?

http://smartdatasoft.com/codecanyon/revolution_ps/fullscreen.php

(I don't know how well this one works, but it even plays well in my old Safari 5.0.5)

 

Yea online..

 

 

I need to change the menu to be full width like SlideShow

I need it to be full width in all pages not in home only!

Edited December 5, 2014 by ImperialTrader (see edit history)

[me-and-prestashop]

Try:

.columns-container {
  margin: 0px auto;
  max-width: 1170px;  /* ajoust page content max-width */
}
.index columns-container {
  max-width: 100%; /* to not screw up your frontpage slider width */
}
#header .container {
  max-width: 100%; /* menu and header full width */
}
header .row #header_logo {
  padding-left: 3%; /* logo space left */
}

Edited December 2, 2014 by me-and-prestashop (see edit history)

[ImperialTrader]

 

Try:

.columns-container {
  margin: 0px auto;
  max-width: 1170px;  /* ajoust page content max-width */
}
.index columns-container {
  max-width: 100%; /* to not screw up your frontpage slider width */
}
#header .container {
  max-width: 100%; /* menu and header full width */
}
header .row #header_logo {
  padding-left: 3%; /* logo space left */
}

 

 

 

That's great.. and that is the final:

#header .container {
  max-width: 100%; /*Menu and header full width*/
}
header .row #header_logo {
  padding-left: 7%; /*Logo space left*/
}
header .row  .col-sm-4 {
  padding-right: 7%; /*Cart space right*/
}

JFYI

[ImperialTrader]

Last task if you don't mind

 

I need to make the max-height: 100% of the home page only for any screen whatever it's different size

 

So, can we make the images inside the SlideShow responsive?, where the height only of the images could increase/decrease

 

Header (Logo & Menu) + SlideShow = 100% height of the page (No Scroll bar)

Edited December 5, 2014 by ImperialTrader (see edit history)

[me-and-prestashop]

The (Revolution) Slider (full screen) I linked to earlier seem to do just this. But it is cropping the background image quite hard on the right side on narrow screen sizes.

 

Usually I operate with either (width: some value; and height: auto;) or (height: some value; and width: auto;). I guess you could do the latter and make the banners extra wide. 

 

To prevent scrolling I guess you could try some kind of overflow: hidden. 

 

To set the height of the slides is not easy - since the window can be resized. In modern browsers I guess you can use calc. Example:

.your-class {
    height: -moz-calc(100% - 200px);
    height: -webkit-calc(100% - 200px);
    height: calc(100% - 200px);
}​

It probably won't work in older browsers. And also the header height is not fixed.

 

I'am afraid I can't help you more on this. Try asking some of the wizards over at stackoverflow.com

Edited December 2, 2014 by me-and-prestashop (see edit history)

[ImperialTrader]

 

The (Revolution) Slider (full screen) I linked to earlier seem to do just this. But it is cropping the background image quite hard on the right side on narrow screen sizes.

 

Usually I operate with either (width: some value; and height: auto;) or (height: some value; and width: auto;). I guess you could do the latter and make the banners extra wide. 

 

To prevent scrolling I guess you could try some kind of overflow: hidden. 

 

To set the height of the slides is not easy - since the window can be resized. In modern browsers I guess you can use calc. Example:

.your-class {
    height: -moz-calc(100% - 200px);
    height: -webkit-calc(100% - 200px);
    height: calc(100% - 200px);
}​

It probably won't work in older browsers. And also the header height is not fixed.

 

I'am afraid I can't help you more on this. Try asking some of the wizards over at stackoverflow.com

 

 

Yes, you are correct, it's cropping the images in slideshow not re-sizing it

how can I crop the extra space the larger than the user screen?