How do i widen the footer?

[OliverEggertsen]

Hello.

 

How do i widen the footer so it is independent from the container width?

 

My footer now looks like this: http://olivereggertsen.dk/

 

I would like i to be widen at maximum like on this site: www.nastygal.com

 

How do i do this?

 

 

 

Thanks in advance.

[PascalVG]

in themes/test/footer.tpl change: (where 'test' is your current theme)

<!-- Footer -->

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

 

 

into: (add red text)

<!-- Footer -->

<div id="footer" class="grid_9 alpha omega clearfix" style="width: 1400px; left: -150px; ">

 

 

change themes/test/css/global.css (line 2071) (where 'test' is your current theme)

#social_block {

padding: 15px 10px 15px 0px;

margin-left: 150px;

}

 

Hope this does the trick.

pascal

[OliverEggertsen]

It worked! thank you very much :-)

[vekia]

you said that you want to use "maxium"

and you use width:1400;

 

what when customer screen will have other resolution? for example 1200 ?

scrollbars? :|

[OliverEggertsen]

I used 1273 width :-)

[vekia]

and you havent got scrollbars?

 

now it looks like that:

 

[OliverEggertsen]

I haven't got scrollbars

[vekia]

ok, sorry to bother you

best regards!

[PascalVG]

Some browsers may indeed show scrollbars (Firefox), others don't (Chrome).

 

Oliver, by using 1273px, you may still have 'problems' when people have a bigger resolution than you (You can 'simulate' this by moving your browser window to the left (out of your screen on the left) and then drag (resize) the right hand side again to the right. You will see that after 1273 pixels wide the footer will show a white gap again). Changing in really to always 100% needs more adjustments on many places (you need to move the footer div out of the page div on more pages) so this sounded as a good compromise...

 

 

N.B. Vekia about your picture:

The Vertical scrollbar is from/for scrolling down the page (as the page is longer than one full screen. If it was too wide, you would see a horizontal scrollbar (Which you actually do see if you narrow the Browser Window in Firefox for example)...

 

pascal

[vekia]

yes i know that, you've got right

 

i just wanted to show, that if he use width as numer, it will be problematic for other devices - for example with higher resolution (white gaps) and scrollbars in resolution smaller than ~1270:

 

[PascalVG]

Yes, you're right. Do you see another solution without having to change many pages by taking out the footer div out of the page div?

[OliverEggertsen]

I am not really sure how i would go with that. can you please tell which files i need to modify and what i would change? :-)

[PascalVG]

I don't recommend to change them all, so that's why I tried the solution I gave. The 'compromise' is then the visual scrollbar in some browers and still possible to get a white gap when the resolution is bigger than yours. No big problems, but if there's a simple way to get it to '100%' all the time that would be nice.

 

So, I don't think you should change many files to solve this. It seems not worth the effort.

[vekia]

Well, i'm using always method that I described in my short tut: full width footer prestashop

as you can see - im using there two divs - one with 100% width, and second with normal width block (980px)

[PascalVG]

Nice Vekia! Does the trick very well. Thanks for this!

[OliverEggertsen]

Well, i'm using always method that I described in my short tut: full width footer prestashop

as you can see - im using there two divs - one with 100% width, and second with normal width block (980px)

 

It doesn't do it for me Vekia and i don't know why. Maybe you can find out?

 

I copied the code into the footer.tpl and i turned force compilation on but the footer is still not widened.

Edited June 17, 2013 by OliverEggertsen (see edit history)

[vekia]

it looks like you forgot about close </div> tag.

 

you need to move footer <div id="footer></div> out of the container div.

 

 

take a look on my website:

 

 

i underlined the closing </div> tag

 

have you got it?

 

sources of your page look like NOT.

[OliverEggertsen]

it looks like you forgot about close </div> tag.

 

you need to move footer <div id="footer></div> out of the container div.

 

 

take a look on my website:

 

 

i underlined the closing </div> tag

 

have you got it?

 

sources of your page look like NOT.

 

I copied this right out of the footer.tpl:

 

<!-- Footer -->

 

</div>

<div id="footer" style="width:100%; clear:both; display:block; overflow:hidden;">

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

{$HOOK_FOOTER}

{if $PS_ALLOW_MOBILE_DEVICE}

<p class="center clearBoth"><a href="{$link->getPageLink('index', true)}?mobile_theme_ok">{l s='Browse the mobile site'}</a></p>

{/if}

</div>

</div>

{/if}

</body>

</html>

 

 

 

I do have it in the file so i don't know why it doesn't apply

[vekia]

you probably modified something in the header.tpl file, so you've got additional div etc.

just add additional </div> to the footer (where i suggested) or roll back changes in the header

[OliverEggertsen]

Oh that was it thank you!

[vekia]

yes ! :-)

 

now it works well