sticky footer

@luco: great idea :)

It would have better success though if supplied as a patch.

Looking forward to seeing where this goes

I've tried this, and it doesn't work.

any luck with this Luciano?

by doesn't work, i mean the footer simply does not stick! :P

I've attempted to apply the footer css directly to the themes css files as well as move the page.tpl.php code around according to the structure here:

http://www.cssstickyfooter.com/using-sticky-footer-code.html

and the footer still does not stick. Has anyone successfully created a subtheme using these sticky footers? link?

I would most definitely appreciate it if you provided some insight into your solution!

uh yeah, i guessed that and i tried (and failed) doing the same.

i was hoping for your page.tpl.php and your related css, but i guess I will have to pull it out of your site using firebug/webdev

sure thing, much appreciated. If this works it could be re-contributed as a subtheme
email
kris [at] bulman.ca

you can just post the tpl & css files here if it's not too much trouble, thanks!

I was able to create a vanilla subtheme using the sticky footer method, but since Zen1 is going the way of the dogs, I saw no reason to post it.

I have yet to attempt a Zen2 sticky footer.

subscribe

I successfully implemented a sticky footer inside my Zen2 theme (http://www.crosstalks.net/smartfooter).
Method uses CSS from the article by Stever ( http://www.cssstickyfooter.com/ ).

Here's how to proceed:

1. Modify templates/page.tpl.php .
By default, the Zen theme will put #footer inside the #page-wrapper. You need to get it OUT of there.
The footer zone should be the very last element before your tag.

This will make the last lines of page.tpl.php look like this:

    </div></div> <!-- /#main, /#main-wrapper -->

  </div></div> <!-- /#page, /#page-wrapper -->

  <?php print $page_closure; ?>

  <?php print $closure; ?>
  
  <?php if ($footer || $footer_message || $secondary_links): ?> /* this is the footer zone and it should close just before the body tag  */
      <div id="footer"><div class="section">

        <?php print theme(array('links__system_secondary_menu', 'links'), $secondary_links,
          array(
            'id' => 'secondary-menu',
            'class' => 'links clearfix',
          ),
          array(
            'text' => t('Secondary menu'),
            'level' => 'h2',
            'class' => 'element-invisible',
          ));
        ?>

        <?php if ($footer_message): ?>
          <div id="footer-message"><?php print $footer_message; ?></div>
        <?php endif; ?>

        <?php print $footer; ?>

      </div></div> <!-- /.section, /#footer -->
    <?php endif; ?>

</body>
</html>

2. Add the next lines of CSS to one of your main .css files (pages.css for example).
Footer height can be adapted of course, as long as you change it in all 3 elements.

/*sticky footer*/
html, body {height: 100%;}

#page-wrapper {min-height: 100%;}

#page {overflow:auto;
	padding-bottom: 50px;}  /* must be same height as the footer */

#footer {position: relative;
	margin-top: -50px; /* negative value of footer height */
	height: 50px;
	width: 960px;
	margin-left: auto;
	margin-right: auto;
	clear:both;} 

/*sticky footer Opera Fix*/
body:before {
	content:"";
	height:100%;
	float:left;
	width:0;
	margin-top:-32767px;/
}

I've turned the CSS fix from #18 into a patch for zen, and also created a footer.css file. You can use either fix (apply the patch, or add the footer.css file to yoursubtheme.info).

also, i have added it to my zen compass plugin, check it out at https://bitbucket.org/barraponto/compass-drupal-plugin/raw/e269a6ecd566/...

oh, I hope it gets reviewed soon.

btw, I don't actually expect the patch to be applied as is to Zen. Instead, I'd put it into a separate file, and have it declared on STARTERKIT.info, although commented out. See this new patch.

Re-rolling patch with new file.

Thank you so much! It was extremely helpful. (I was "banging my head" on this one.) #29 worked for me (in IE 7, Firefox, Opera, and Google Chrome).

I just tested with IE6, which doesn't work. The following fixes it:

In footer.css, change

#main-wrapper {
  min-height: 100%;
}

to

#main-wrapper {
  min-height: 100%;
  _height: 100%;  /* for IE6 */
}

footer.css is an optional css (it is not enabled by default in the patched .info).
if we add the ie6-only code to a different file, we must add another optional ie-exclusive css file (can't add to default ie6-only file).

Thanks for the info--I really appreciate it.

I just noticed today though that the footer sticks to the bottom but there is now a big whitespace gap between the content area and the footer on shorter content pages. Have you encountered this issue as well and/or have any suggestions/ideas on how to fix it?

Thanks again.

Thanks, luco, for the info & your help.

Just to confirm if we're both on the same "page", as I might have not described the issue properly. When I mean big whitespace gap, there is a lot of whitespace between the content and footer, pushing the footer beyond the visible area on the screen. It introduces a scroll bar requiring the user to scroll down to see the footer. It seems that the footer could be higher up and viewable without scrolling down. Is that a byproduct of the sticky footer code applied?

Thanks again--much appreciated.

In order to remove the vertical scroll bar and white space, I had to put #header div inside of the #main div in page.tpl.php so the height worked correctly. I'm using D7 and 7.x-3.x-dev tho.

@n8tron: i haven't tested this on d7

@new_B: IE? which browser are you using?

@n8tron: Thanks. I moved the #header div as suggested and it worked. I'm using D6 and Zen 6.x-2.0.

@barraponto: I've tested with IE6 and IE7. Thanks.

@luco Sorry, I don't quite get what you mean. Can you please clarify?

Also, is the method that n8tron suggested okay too?

Thanks--much appreciated.

I wanted to let everyone know that #25 above works great on Zen 7.x-3.1 as well. A great addition to the Zen framework.

@theMusician

Any chance you could post your page.tpl.php fix for Zen 7.x-3.1? I can't seem to make this work... Apparently the code changed a lot since nordicmaterials post :)
Thanks!

My footer code is a bit different. I needed three editable sections. I hope this helps. #25 worked great for me.

<div id="footer"><div class="section">
  <?php print render($page['footer_left']); ?>
  <?php print render($page['footer_middle']); ?>
  <?php print render($page['footer_right']); ?>
</div></div><!--/.section, /#footer -->

My CSS or #25 from above

#page-wrapper {
    min-height:100%;
}
 
#page {
    overflow:auto;
    padding-bottom:175px; /*must be the same height as the footer */
}

/*
 * Footer
 */
.region-footer {
}
#footer {
background-color:#5F6062;
position:relative;
margin-top:-175px; /*must be same height as the footer */
height:175px;
width:100%;
clear:both; 
padding-left:24%;
}
/*sticky footer Opera Fix*/
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/
}

#25 seems to work great for FF 9.01 and IE 9 but not Chrome 16.0.912.77

I find that odd. I haven't tested my particular site on any other versions of IE.

The 6.x-2.x branch is in bug-fix only mode.

http://www.drupalcoder.com/blog/cross-browser-sticky-footer-with-fluid-h...

Zen 7.x So far works for me