SharePoint 2010 Footer (CSS Only)
There’s a lot of “solutions” out there to add a footer to SharePoint 2010, be it the out-of-the-box masterpage, or a custom masterpage. Unfortunately, a lot of the solutions offered up require scripting to make the footer “play nicely” with the native SharePoint 2010 scrolling mechanism. This is an adaptation of CSSStickyFooter adjusted for SharePoint 2010. This solution is 100% pure CSS and will place a footer at the bottom of the page without any scripting.
The first step is to locate the s4-bodyContainer div in your masterpage. We’re not going to do anything to this container, but we are going to encapsulate it within a wrapper div. Indent #s4-bodyContainer all of the markup within it, and add a new div with a “wrapper” class.
<div class="wrapper">
<div id="s4-bodyContainer">
{original #s4-bodyContainer markup}
</div>
</div>
After the closing tag for your .wrapper div, add your footer div, with an ID of “footer”.
<div class="wrapper">
<div id="s4-bodyContainer">
{original #s4-bodyContainer markup}
</div>
</div>
<div id="footer">
Copyright or Other Footer Content
</div>
Now we just need to add a little CSS to make everything work. You’ll notice that all of our markup is already inside the #s4-workspace div, so we don’t need any scripts to set heights dynamically. We can set the footer position through CSS and SharePoint’s native sizing scripts will handle the rest.
.wrapper {
min-height: 100%;
height: 100%;
}
#s4-bodyContainer {
padding-bottom: 50px;
}
#footer {
position: relative;
margin-top: -50px;
height: 50px;
clear: both;
}
Note that the footer’s top margin and height, as well as the #s4-bodyContainer’s bottom padding must be set to the same pixel dimension. This ensures that your footer will not float over the page content.
This also assumes that you have left SharePoint’s browser compatibility for IE8 intact. If you’ve modified or removed the “X-UA-Compatible” meta tag from the default value of “IE=8″ then you may have to do some additional work to ensure cross-browser compatibility.
Don’t forget to add the class ‘s4-notdlg’ to prevent the footer turning up in dialogs.
Great point Ali. I didn’t include that here since I had some separate CSS selectors to handle that, but for folks that don’t know it’s definitely needed.
Hi Ali,
Can u tell me where to add “s4-notdlg”.
Something like this in the CSS :
#s4-notdlg{
/* Footer Hide */ something like this ?
}
found it. thanks
Chitra,
You would want to add it to your class attribute of the parent element you want hidden, ie:
Michael,
What is the best way to access my sharepoint’s site master page? Do you have to use sharepoint designer to do this?
Mark,
In an ideal world you would not use SharePoint Designer, your custom masterpage would be deployed using a SharePoint Solution Package (*.wsp) generated within Visual Studio. SharePoint Designer can be used to edit masterpages in SharePoint versions prior to 2013, but it’s generally not a best practice.
Any suggestions on how to add the custom CSS?
All I have access to is SharePoint designer and the site that I’m an administrator of. I read your other post on adding custom CSS and the drawbacks of where to store it, though I’m still unclear your thoughts on where to store it and how to implement this change. Any suggestions you would be willing to offer?
Simon,
If all you can use is SharePoint Designer, then that’s a viable option. If you have to brand multiple site collections it’ll prove to be pretty painful, but if it’s a single site collection you can add your CSS files to the style library and reference them from there in your masterpage.
Note that you never want to change the out of the box v4.master. If you want to start with v4.master as a starting point, make a copy of it and work on the copy.