9 replies to this topic

[steck1983]

Hi,

 

Ive seen a couple of threads about a sticky footer. Tried the solutions and so far non of theme have worked... I need to generate a full width fluid layout with a sticky footer. I'm currently using framework 2.4.

 

currently, Ive tried

 

/*Declare zero margin and padding on everything*/
* {margin:0;padding:0;}

html, body { height: 100%; }

#site .fullwidth {
    min-height: 100%;
    position:relative;
}    

#page{
    min-height: 100%;
    margin-bottom: -50px;
    position: relative;
}

#footer {
    height: 50px;
    position: relative;
    background-color:#FFFFFF;
}

 

Whats interesting though is if I make the footer height large enough, say 100px it will stick to the bottom, but If I reduce the height to what i want, around 25px it will move up, Any ideas? I need to get this done ASAP.

 

Cheers

 

 

 

[James B]

Hi there,

 

I'd suggest trying

 

 

Please Login or Register to see this Hidden Content

[steck1983]

No, that doesnt work i tried that also earlier...

 

I found this link

Please Login or Register to see this Hidden Content

 

notice the empty div "push" inside the wrapper. Not sure if this would work but to do this I need a hook to place an empty div below the morefoot area. Pagelines standard hooks dont allow this. Is there an easy way to generate your own hook?

[James B]

Ah, there's a hook at the before the footer starts you could try and add the div to, pagelines_before_footer. I've not seen that process done before though so I couldn't say if that would work.

 

If the footer sticks using your previous css until you edit the height is there something inside the footer which is preventing it from resizing, anything in the code you need to take out for it to snap back?

[steck1983]

Well this is quite odd,  i can get the footer to stick to the bottom with the following without editing the core pagelines code:

 

/*Declare zero margin and padding on everything*/
* {margin:0;padding:0;}

html, body { height: 100%; }

#site .fullwidth {
       width: 100%;
       min-height: 100%;
       position:relative;
}    

#footer {
    Position: absolute;
    Width: 100%;
    Bottom: 0;
    Height: 60px;
    background-color:#FFFFFF;
}

#page-main {
      padding-bottom:60px;
}
 

 

But if I change the height and padding attributes to less then 60px the footer moves up? Odd.

 

Below is an excerpt of the generated source:         </div>
        </div>
    </div>

    <footer id="

Please Login or Register to see this Hidden Content

" class="

Please Login or Register to see this Hidden Content

">
        <div class="

Please Login or Register to see this Hidden Content

">
                </div>
    </footer>
</div>

 

Note this "outline fix". This may be stuffing things up. Ive tried attempting to clear the padding etc.. on this but is there any way to clean the code up and remove it? I have a feeling this may be causing the issue.
 

[James B]

If somethings overriding the padding try adding !important to overrule it. Can you see in firebug where this padding is applying? Is the site live or on a local host?

 

Unfortunately as the footer isn't a section, its a core area of the template, I can't think of a way you could edit that and remove that content.

[steck1983]

Nah in firebug theres no padding applied so its definitely odd whats going on. I just started putting the site together thismorning so its running locally. 

 

Do you have an example of a site using pagelines framework 2.4 featuring a sticky footer? Perhaps I can look at its code if you could post the link...

 

The other alternative is to force it with jquery but thats more of a patch and probably not a good way of doing things.

[James B]

No we don't keep a log of the sites clients have worked on unfortunately, but I've managed to find some posts below in which clients have provided urls.

 

Most clients will create this affect by setting a static height to the page like in the post below.

 

Please Login or Register to see this Hidden Content

 

Another client who states they've done this using bottom:0 -

Please Login or Register to see this Hidden Content

 

Check out RJmedia's response in this one, looks like he's got this to work using a neg margin on the bottom -

Please Login or Register to see this Hidden Content

[steck1983]

Hi, He has the same issue as me, where it only works if it has a substantial height, so doesnt really work fully.

 

I found this online:

Please Login or Register to see this Hidden Content

notice the hooks. Unfortunately though I need to place the hook after the footer closing tag. The pagelines_after_footer hook places your content before it. If it is possible to encompass both the morefoot area and the footer area with a wrapper container this method should work. But how can I hook into an area below the footer? Is there a way to write your own hooks for a pagelines child theme?

[James B]

According to actionmap

Please Login or Register to see this Hidden Content

 

Php isn't my strong point there so I wouldn't be able to advise if you'd be able to create and register your own hookable areas inside the child theme, that type of customization is outside of our support spectrum unfortunately. I also don't think it will be possible for you to add a div containing both the morefooter and footer without making some larger edits to the core files.

 

If you're looking to do that you're probably best looking into hiring one of the Pagelines Pros (www.pagelines.com/pros/) to achieve that level of customization.