100% Width Header And Footer

[Timehammer]

Hello,

I am using the default PrestaShop theme to develop a theme from the ground up and I'm already somewhat stuck.

I want to make a 100% width header and footer in a similar style to the header here: http://prestastyle.com/prestashop/theme1/ and here http://www.headict.com/

The basic idea is to keep the three columns beneath at the desired width and in a different colour whilst having a bold 100% width header. I'm played around with global.css for a little while and made no progress.
Any ideas, my friends?

Thanks,

Stuart

[adexa]

http://prestastyle.com/prestashop/theme1/

global.css

html {
background: url(../img/bgMain.png);
}
body {
font: normal .81em/1.6em Trebuchet MS, Helvetica, sans-serif;
width: 100%;
margin: 0 auto;
color: #000;
}
#pageWrapper{
background: url(../img/bgTop.png) repeat-x;
width:100%;
height:100%;

/* global layout */
#pageWrapper{
background: url(../img/bgTop.png) repeat-x;
width:100%;
height:100%;
}
#page {
width: 980px;
margin: 0 auto;
}

[Dmit]

for PS 1.5.3.1????

[[email protected]]

Hope somone will response to this question, been looking for weeks now. Please. Thank you!

[ajensen27]

Not sure about the header but Vekia has a nice tutorial on his site for the footer that worked perfectly on my site (PS 1.5.2)

 

http://mypresta.eu/en/art/basic-tutorials/how-to-create-full-width-footer-in-prestashop-1-5.html

[[email protected]]

Thank you for the response, but I already did the Footer part , I'm now looking for the header. So The footer and my header would be sync.

[vekia]

for header:

 

#page - add width: 100%;

#header - add width: 100%;

 

you can add this in style="" tags (header.tpl) for div blocks that I mentioned above. You can also change values for grid system:

 

grid_prestashop.css

.container_9 .grid_9 {
width: 100%;
}


.container_9 {
margin: 0 auto;
width: 100%;
}

[ajensen27]

Hi Vekia... I tried it both ways that you described above and both didn't work. They pushed my page all the away to the left and removed the background among other things.

[vekia]

weirdy for me works :/ i will check it once again

[SerjLeon]

PS1.5, creating new theme, based on default theme files.

 

OK, guys. I got header and footer width100%, I will share, but I faced new issues and hope you could help.

 

In the beginning I tried what vekia said, but it didn't help in my case.

Then thanks to the link in post #5 by ajensen27 (which totally worked for Footer), I figured out what to do in header:

 

header.tpl

 

1. Just before the comment <!-- Header --> arond line 74, before that comment insert

<div id="page" class="container_9 clearfix" style="width: 100%;">

2. Then after the <!-- Header -->, in the <div id="header" line add style so it looks like that:

<div id="header" class="grid_9 alpha omega" style="width: 100%; clear:both; display:block; overflow:hidden;">

3. The very next line after previous, add next code:

<div style="width: 980px; display:block; margin:auto; clear:both;">

4. Around line 86-88 there should be a new <div id="columns" line , so right after that line add next code:

<div style="width: 980px; display:block; margin:auto; clear:both;">

 

Now you have to have your header and footer 100% wide and all the columns in the center with 980px width.

 

And now, I have next problem - it's the Authentication page (Login) and Your shopping car / checkout pages. They don't want ot be in the center. http://artemida.jp/en/authentication?back=my-account

It looks like they are independent from columns. I tried messing around with authentication.tpl file to do something similar like in header.tpl, but no luck so far.

 

Help?

[Jiten rash (away)]

cut <div id="page" class="container_9 clearfix">

and paste it below

<div id="header_right" class="grid_9 omega">

{$HOOK_TOP}

</div>

</div>

 

<!--here-->

<div id="columns" class="grid_9 alpha omega clearfix">

 

 

 

it will be like this

 

<!-- Header -->

<div id="header" class="grid_9 alpha omega">

<a id="header_logo" href="{$base_dir}" title="{$shop_name|escape:'htmlall':'UTF-8'}">

<img class="logo" src="{$logo_url}" alt="{$shop_name|escape:'htmlall':'UTF-8'}" {if $logo_image_width}width="{$logo_image_width}"{/if} {if $logo_image_height}height="{$logo_image_height}" {/if} />

</a>

<div id="header_right" class="grid_9 omega">

{$HOOK_TOP}

</div>

</div>

<div id="page" class="container_9 clearfix">

<div id="columns" class="grid_9 alpha omega clearfix">

<!-- Left -->

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

{$HOOK_LEFT_COLUMN}

</div>

 

<!-- Center -->

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

{/if}

 

then changed #header: width{100%; background:#any;}

[SerjLeon]

jitenx, thanks for the help, man, but after I copy-replaced my code with what you wrote above - my header elements, top menu and columns messed up. When I checked login page - login forms were perfectly where it is supposed to be in the center, but now other things were not in the place.

So I reckon the solution for me is somewhere in between those lines, I just need to keep experimenting with different combinations of placing certain strings....

[Jiten rash (away)]

just changed default to this out of prestashop division

 

<!-- Header -->

<div id="tempheadr" class="grid_9 alpha omega">

<div class="head-inner">

<div class="inne-wrapper">

<a id="header_logo" href="{$base_dir}" title="{$shop_name|escape:'htmlall':'UTF-8'}">

<img class="logo" src="{$logo_url}" alt="{$shop_name|escape:'htmlall':'UTF-8'}" {if $logo_image_width}width="{$logo_image_width}"{/if} {if $logo_image_height} height="{$logo_image_height}" {/if} />

</a>

<div id="header_right" class="grid_6 omega">

{$HOOK_TOP}

</div>

{include file="$tpl_dir./breadcrumb.tpl"}

</div>

</div>

</div><!-- end-header -->

#tempheader {background:#000;} at global

.omega {width:100%} at gird

[Jiten rash (away)]

one more important thing add this at gloabl.css

.inne-wrapper { margin: 0px auto;

position: relative;

width: 980px;

}

[chance]

after few tried also not work.

using 1.5.4.1, any 1 can provide complete code

thanks

[vekia]

hello

 

read this tutorial:

1) full width footer in prestashop 1.5.x

2) full width header (this is forum thread but solution is there)

[Jiten rash (away)]

vekia..in 19 in monitor internet explorer and chrome full with footer has some problem.it keeps a space on 20 -30 pixles

[vekia]

i've got 23inch monitor. i can test it

you're talking about unitekhub.com website?

[Jiten rash (away)]

yes !! u remeber

 

my site is getting faster now

[vekia]

weird, please check how it looks for me:

[Jiten rash (away)]

is it chrome ..or explorer..?...actually..client show me via team viewer on 19 inch monitor..i was seeing an empty space on the right

[vekia]

thats right, it was chrome browser i also tested it on IE + firefox

works well

 

what OS / browser version your customer use?

[Jiten rash (away)]

win xp

[Jiten rash (away)]

vekia can u work as a free lancer contact me plz

[vekia]

hello, just write me what you expect please, i will try to help

 

regards

[PrestaShark]

Hi all,

I found a partial solution about this "issue" with 100% width header.

 

Make Your own header graphics with 1920px width and desired height (You can also make a menu background with whis way!)

Here is demo header http://kisweb.pl/pli...stashop/try.jpg

 

In global.css file of default prestashop theme just add in body

background: #fff url(../img/try.jpg) no-repeat center top;

 

In modules/blocktopmenu/css edit superfish-modified.css

and remove background: #383838; in .sf-menu class (line ~15 at 1.5.4.1)

You may also need to position menu label then use .sf-contener class and add margin-top: 105px; to position menu in vertical position in case of use of my try.jpg header file

 

For me works perfect

 

http://kisweb.pl/pliki/prestashop/result.jpg

Edited July 12, 2013 by kisweb (see edit history)

[Jiten rash (away)]

see this feature vekia..can we have it in prestashop http://www.gsmnation.com/operator/compatibility/calculator/

[Jiten rash (away)]

see this feature vekia..can we have it in prestashop http://www.gsmnation...ity/calculator/

[vekia]

hello

 

but what you exactly want?

it is related to the products? categories?

or just simple feature not related to the catalog?

[Jiten rash (away)]

u see like a filter

[PrestaShark]

Hi jitenx,

Vekia show me a nice Prestashop feature. Look at Modules and Block Layered Navigation.

Here is tutorial about it

Its a great filter module! Maybe with some css/php skills could look like this calculator on page You posted.

I will investigate this

Edited July 16, 2013 by vekia (see edit history)

[vekia]

but there is something like this:

 

no products, no urls, just simple info

it's not integrated with shop "catalog" (products)

[Jiten rash (away)]

hummm i know about layered navigation module but that is not enough m think about putting link on home page via html module and create that filter on a cms page

[vekia]

jitenx can you clarify how it is related to the catalog? i don't know, for me it's a simple tool not related to the shop categories / products etc.

[Jiten rash (away)]

ya its not related to shop categories and products did u found the space on footer on i.e and chrome 19inch screen

[vekia]

nope cuz i'm also using chrome browser and i havent got this issue :\

[Jiten rash (away)]

even i checked it on chrome .its in 19 inch monitor

[Jiten rash (away)]

i mean the problem is in 19 inch monitor..

[PrestaShark]

This should help with 100% header and menu width

http://www.prestashop.com/forums/topic/281109-new-way-to-make-a-100-full-width-header-and-menu/

Enjoy