Fluid width footer

[bobo.chammas]

Hello everyone,

 

I have searched the forum for answers about fluid theme and i have also seen that there are alot asking how to make a theme fluid.

 

The thing is i only want to make the footer fluid, so that i can have a bg-image and still have the footer 100% from left to right.

 

I have tried alot of things but none have worked, i´m not a pro at this, just started to work on my first shop in presta so please help.

[NemoPS]

Close the page before the footer, then add a wrapper with your background image. Inside, add the page container again, and finally the actual footer (#footer) div

[bobo.chammas]

thank you for the quick anwser, but where do i make these changes?

[NemoPS]

in the theme folder, footer.tpl, and of course adjust global.css accordingly (look for #footer and add your needed classes)

[bobo.chammas]

i have tried to do what you said and it almost works, what am i doing wrong?

 

In global.css:

 

#page {}

#header {z-index:10}

#columns {z-index:1}

#left_column {}

#center_column {}

#right_column {}

#wrapper {

width: 100%;

background-image: url(http://electricmoto.com/images/header_bg.png);

background-repeat: repeat-x;

margin: 0 auto;

}

#footer {}

 

In footer.tpl:

<!-- Footer wrapper -->

<div id="wrapper">

{$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>

 

<!-- Footer -->

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

</div>

[NemoPS]

Uh... that doesn't make much sens, you have to add the footer inside the container, and this container inside the wrapper. The container should be container_9 as class i believe

[bobo.chammas]

Thank you i finally made it, it works perfectly.