Adding a sticky footer to your custom master page using SharePoint Designer 2010
Adding a sticky footer to your master page is one of those basic things that takes a lot longer in SharePoint than it should. My first attempt at sticking a footer to the bottom of my page ended unsuccessfully with the footer always being about 100-200 pixels above the bottom of the page. I took a deep breath and asked my good friend Google for help. Google introduced me to Elio Struyf’s most excellent posts straight out of Belgium.
Struyf, Drisgill and other experts note that the javascript used to control scrolling in the Ribbon Positioning System (docked by default at the top of each SharePoint 2010 page) is the main culprit causing all of this footer kerfuffle. They offer advice on how to disable the Ribbon Position System (RPS) so that it is undocked, but I like having it docked. Fortunately, Struyf has a master page for the default docked ribbon (I use this one) as well as the undocked ribbon.
By adding some new div tags to the html of the master page, some new CSS, and tweaking some attributes in the V4.masterpage, Struyf has built a master page that sticks the footer to the bottom of the page while keeping the RPS docked at the top of the page.
Here are the steps and screenshots I took to add his master page to my farm:
- Downloaded his master page from his web site: V4.Master_Footer_Docked_Ribbon to my desktop
- Navigated to the Master Page Gallery in my Site Collection and uploaded the master page
- Opened site in SharePoint Designer 2010, and opened new master page for editing
- Copied and pasted the CSS from his header to my custom style sheet
- Added a line of code in the header to attach my custom style sheet (see Part 2 for instructions)
- Saved, Checked-In, Published, Approved Master Page
- Refresh browser to view footer (screenshot)!
Screenshot 1: V4.master Head (click image for larger view)
Screenshot 2: V4.Master_Footer_Docked_Ribbon Head (click image for larger view)
Screenshot 3: V4.master footer (no footer yet) (click image for larger view)
Screenshot 4: V4.Master_Footer_Docked_Ribbon footer (click image for larger view)
Screenshot 5: CSS from V4.Master_Footer_Docked_Ribbon (I moved this code from Elio’s master page to my custom style sheet)
Featured Series of Posts on Branding Options in SharePoint 2010:
0. SP 2010 Branding Options: Master Pages vs. Themes: Overview
Why I prefer custom master pages over custom themes in SP 2010
1. SP 2010 Branding Options: Master Pages vs. Themes: Part 1
Attaching an alternate style sheet to the master page using the browser’s UI
2. SP 2010 Branding Options: Master Pages vs. Themes: Part 2
Attaching an alternate style sheet to the master page using SPD 2010
2.1 SP 2010 Branding Options: Master Pages vs. Themes: Part 2.1
How to edit the master page to add a custom logo and a favicon with SharePoint Designer 2010
3. SP 2010 Branding Options: Master Pages vs. Themes: Part 3
Adding a footer to your custom master page using SharePoint Designer 2010
4. History of SharePoint Branding: 2007 to 2010
A tribute to Heather Solomon’s legendary blog posts on MOSS 2007 themes and master pages
Any idea on the reason why the footer and header I addded is hidden to other users except my account. Even other users with full control, is this to do withr ights kindly dvise.
I would need a lot more details to help you troubleshoot this, for example, what method did you use to edit the master page, did you use this article? If so, it sounds like you may just need to ‘check-in’ the masterpage and ‘approve’ it, but I don’t know for sure without more details.
i have an article with guide step by step done a master page and page layout from html page:
http://mstechsharing.blogspot.com/2012/02/custom-master-page-and-page-layout.html
Hello …
I’ve got 3 quick questions on this before I try it … hopefully you can help me. 🙂
1. Does this footer ‘stick’ to the bottom of the screen no matter how long the site page is?
2. If I have a SP Web Part on this page with a web-enabled InfoPath form, does that affect the footer?
3. (tough one) Let’s say I want to be able to trigger this footer to contain help information on the items I have within the InfoPath form. So by clicking a little ‘i’ or question mark next to a field in my InfoPath form, I’d like that to feed the fixed footer with user-help info. Would that be possible? Any tips or leads you could send me on … ? 🙂
Thanks! 🙂
Chris.
Hi Chris,
1. Yes, the footer sticks to the bottom of the screen no matter how long the site page is. This is the very definition of a footer ‘sticking’.
2. No, web parts do not affect the footer.
3. I think this question is beyond the scope of this footer post. But my first thought is that footers, in general, across all web sites (sharepoint or not), tend to hold static pieces of information that are relevant to every web page, this is what footers do. Hope that helps!