Hi,

Has anyone been able to successfully use the compass sticky-footer mixin in an Omega 4 subtheme using the Simple layout ?

I've tried a few combinations for the selectors but haven't been successful so far...

Thanks !

Comments

webatelier’s picture

i couldn't get it t work either,
but this worked for me ...
The @include breakpoint($tab) is optional of course, i use it so the sticky footer only gets applied at tablet width.

@include breakpoint($tab){
	HTML, BODY {
		height: 100%;
	}
	.l-page {
		min-height: 100%;
		position: relative;
	}
	.l-main {
  		padding-bottom: 3em;/* same as .l-footer height */
	}

	.l-footer {
  		position: absolute;
  		bottom: 0;
  		width: 100%;
  		height: 3em;/* same as .l-main padding-bottom */
	}
}

Credits to http://wentsch.me/snippets/2012/10/sticky-footer-omega-theme-drupal

inkovic’s picture

See this related page:

http://compass-style.org/examples/compass/layout/sticky-footer/

Now, replace #layout with .page which is in Omega 4, #footer<code> with .l-footer and, the tricky one, #layout_footer with a "push" empty (or, not empty if you want) div.

Generally, what you should do is create a zone + region similar to the postscript zone in Omega 3 in your theme, above the footer but still in the main/content zone.

The way I do sticky footers, the same way i did in Omega 3, was to include a Postscript Zone Region that spanned the width of the grid, filled it with an empty block and used the "push" via css.

If you are having trouble, try writing your own mixin after manually applying changes because each layout is unique. There are other cool mixins out there (I quite like this one).

MrPaulDriver’s picture

Issue summary: View changes

@webatelier thanks!