Branding: Adding a sticky footer to your SharePoint site

 

You will to do the following:

  • Modify the CSS styles applied to your masterpage / sharepoint site.
  • Modify the masterpage to apply the custom footer.
Add the following code to your CSS.

/*

Sticky Footer Solution

by Steve Hatcher

http://stever.ca

http://www.cssstickyfooter.com

*/

* {margin:0;padding:0;}

/* must declare 0 margins on everything, also for main layout components use padding, not vertical margins (top and bottom) to add spacing, else those margins get added to total height and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */

html, body {height: 100%;}

#wrap {min-height: 100%;}

#main {overflow:auto;

padding-bottom: 33px;}  /* must be same height as the footer */

#footer {position: relative;

margin-top: -33px; /* negative value of footer height */

height: 33px;

clear:both;}

/*Opera Fix*/

body:before {/* thanks to Maleika (Kohoutec)*/ content:””; height:100%; float:left; width:0;

margin-top:-32767px;/* thank you Erik J – negate effect of float*/ }

Modify your masterpage:

<body>

<div id=”wrap”>

<div id=”main”>

..code

..code

<SharePoint:DeveloperDashboard ID=”DeveloperDashboard1″ runat=”server”/>

</div>

</div>

<div id=”footer”>

<asp:ContentPlaceHolder ID=”Footer” runat=”server”>

<div style=”clear:both; background-color:#808080; color:#fff; padding:10px;”>

&copy; Copyright 2011 Your Company

</div>

</asp:ContentPlaceHolder>

</div>

 

Tags:

No comments yet.

Leave a Reply

%d bloggers like this: