How can we improve WooThemes?

Sticky Footer for Canvas

Sticky Footer option for Full Width layout in Canvas.
Thanks!

67 votes
Vote
Sign in
Check!
(thinking…)
Reset
or sign in with
  • facebook
  • google
    Password icon
    I agree to the terms of service
    Signed in as (Sign out)
    You have left! (?) (thinking…)
    Mark WoodMark Wood shared this idea  ·   ·  Flag idea as inappropriate…  ·  Admin →

    14 comments

    Sign in
    Check!
    (thinking…)
    Reset
    or sign in with
    • facebook
    • google
      Password icon
      I agree to the terms of service
      Signed in as (Sign out)
      Submitting...
      • Brett BlevinsBrett Blevins commented  ·   ·  Flag as inappropriate

        @Magnus (Co-Founder, WooThemes) on October 22, 2013 01:09:
        Have you considered just adding this CSS to set a min-height on your content?

        min-height actually worked for me. Thanks for the suggestion.

      • Brett BlevinsBrett Blevins commented  ·   ·  Flag as inappropriate

        Yes, if you have a home page with no page content because you're using an image background and want that to be what people see, the footer halfway up the page does look completely retarded. Ideally the footer would stick to the bottom, no matter what size the browser is and no matter how little content is on the page. I ended up padding an empty div with a halfway-good amount of space, but it's an ugly temporary non-solution. Of course, with normal long pages, you might or might not want the sticky footer. I've seen non-scrolling sticky headers and footers. For me it's only an issue if I don't have enough content to vertically fill a browser window. An article would suffice.

      • Craig HobsonCraig Hobson commented  ·   ·  Flag as inappropriate

        /*Modified for Canvas: The Sticky Footer from CSS-Tricks, http://css-tricks.com/snippets/css/sticky-footer */

        @media only screen and (min-width: 768px) {

        #inner-wrapper, #wrapper {
        height: 100%;
        }

        #content {
        min-height: 100%;
        /* equal to footer height */
        margin-bottom: -322px;
        }
        #content:after {
        content: "";
        display: block;
        }
        #footer-widgets-container, #content:after {
        /* .push must be the same height as footer */
        height: 322px;
        position: relative;
        }

        }

      • MagnusAdminMagnus (Co-Founder, WooThemes) commented  ·   ·  Flag as inappropriate

        Currently only 11 people have voted on this as an option, out of all Canvas users, which is not a lot of people, so it would be better suited as a KB article. Maybe someone who has already done this with a site could submit the CSS in the community forums?

      • Anonymous commented  ·   ·  Flag as inappropriate

        I also need this feature. Agree with mjingo below... have minimal content on my homepage and the footer looks ridiculous.

      • mjingomjingo commented  ·   ·  Flag as inappropriate

        Desperately need this feature - tried every standard approach I can think of but I am not close enough to the underlying framework and always interferes with other layout elements.

        Having a full width footer sitting half way up a page with minimal content looks retarded to say the least.

        Could we please have either an up to date article or a fix for this?

        Many Thanks!

      • Mark WoodMark Wood commented  ·   ·  Flag as inappropriate

        Yes, an article showing how to customise the footer into a full-width sticky would be great - many thanks

      • ACBACB commented  ·   ·  Flag as inappropriate

        Not easy for the lay person to do - why they're probably opting for Woo Themes in the first place. Seems like a much needed feature....as this is currently a pain in the ass.

      Feedback and Knowledge Base