When you have a page which is short on content you’ll see that the footer is floating halfway up the page. If you want it to stay at the bottom of the browser window, follow the directions below. You can find many sticky footer methods in Google, this solution is based on the css by Steve Hatcher.
Copy Files
We need to get hold of two Elgg files and if you haven’t already made a plugin for your Elgg modifications, you can grab “myplugin” which is used in previous tutorials. Here we create a new Elgg plugin called Sticky.
In Elgg root go to views/default/page/ and copy default.php and paste it to the same directory location in sticky. And since we want to extend Elgg css, create a directory called myplugin in the default directory and add the file css.php.
Open start.php and add the line below to let Elgg know that we want the main css extended with our own css:
start.php
elgg_register_event_handler('init', 'system', 'sticky_init');
function sticky_init() {
elgg_extend_view('css/elgg', 'sticky/css');
}
Move the Footer
To control the footer and make it stick to the bottom we need to move the footer element outside of the main container div, elgg-page. Open the primary page shell for Elgg, default.php and change it like this:
views/default/page/default.php
...
<div>
<div>
<?php echo $body; ?>
</div>
</div>
</div>
<div>
<div>
<?php echo $footer; ?>
</div>
</div>
<?php echo elgg_view('page/elements/foot'); ?>
</body>
</html>
Extend CSS
Now to the css part where it really happens. We set a negative margin that matches the body padding and the footer height and adjust the inner footer width and horizontal float:
views/default/myplugin/css.php
.elgg-page {
min-height: 100%;
}
.elgg-page-body {
overflow: auto;
padding-bottom: 80px;
}
.elgg-page-footer {
position: relative;
margin-top: -80px;
height: 80px;
background: #FFCC00;
clear: both;
}
/* Opera Fix */
body:before {
content:"";
height: 100%;
float: left;
width: 0;
margin-top: -32767px;/
}
.elgg-page-footer .elgg-inner {
width: 990px;
margin: 0 auto;
padding: 5px 0;
}
We’re done!
That’s it, activate the plugin and you have a sticky footer. If you don’t want to follow the tutorial you can download the sticky plugin below. If you have any comments please leave them in the form below.
2339
