locked
To add a footer to the v4.master page in Sharepoint designer 2010 RRS feed

  • Question

  • Hi All,

            I want to add a footer to the v4.master(which is the default master page in Sharepoint server 2010). Can anyone please help me out on this. Thank you.

    Friday, April 2, 2010 1:26 PM

Answers

  • There are a few ways you could go when creating a footer that goes with v4.master. One simple method would be to add a div right before the DeveloperDashboard line in v4.master. Add the bolded line below:

    <div class="s4-notdlg" style="clear: both; text-align: right; padding: 10px; background-color: #FCFCFC; border: 1px solid #DBDDDE;">
    &copy; Copyright 2010 AdventureWorks, Inc.
    </div>

    <SharePoint:DeveloperDashboard runat="server"/>

    This would add a footer below the left nav and body that matches the colors in the default left nav. You could of course expand on this by moving the stlye to an external style sheet or changing the look and fee.


    Randy Drisgill - MVP SharePoint Server
    SharePoint911 Branding and Design Services
    My Blog: http://blog.drisgill.com
    Wrox: Professional SharePoint 2010 Branding and UI Design

    • Proposed as answer by KSDN Saturday, April 3, 2010 9:23 AM
    • Marked as answer by SC Vinod Tuesday, April 13, 2010 12:21 PM
    Saturday, April 3, 2010 6:09 AM

All replies

  • There are a few ways you could go when creating a footer that goes with v4.master. One simple method would be to add a div right before the DeveloperDashboard line in v4.master. Add the bolded line below:

    <div class="s4-notdlg" style="clear: both; text-align: right; padding: 10px; background-color: #FCFCFC; border: 1px solid #DBDDDE;">
    &copy; Copyright 2010 AdventureWorks, Inc.
    </div>

    <SharePoint:DeveloperDashboard runat="server"/>

    This would add a footer below the left nav and body that matches the colors in the default left nav. You could of course expand on this by moving the stlye to an external style sheet or changing the look and fee.


    Randy Drisgill - MVP SharePoint Server
    SharePoint911 Branding and Design Services
    My Blog: http://blog.drisgill.com
    Wrox: Professional SharePoint 2010 Branding and UI Design

    • Proposed as answer by KSDN Saturday, April 3, 2010 9:23 AM
    • Marked as answer by SC Vinod Tuesday, April 13, 2010 12:21 PM
    Saturday, April 3, 2010 6:09 AM
  • Hi Randy,

    This solution is really works. But is there any way that I can fix this footer at the bottom of all page.

    My footer is moving here & there depending on data on my page.

    Pls, help


    Thanks, Sam
    Wednesday, July 21, 2010 3:19 PM
  • That will take some more CSS effort to get the Footer to stick to the bottom of the browser window. If you Google/Bing for "Footer Stick" you'll see a bunch of examples. One that seems nice is:

    http://www.cssstickyfooter.com/using-sticky-footer-code.html

    My one warning to you is that these methods MAY affect how the Ribbon position system works. You may find that the Ribbon scrolling behaves strangely. If that is the case you may need to disable it:

    http://blogs.msdn.com/b/sharepoint/archive/2010/04/06/customizing-ribbon-positioning-in-sharepoint-2010-master-pages.aspx


    Randy Drisgill - MVP SharePoint Server
    SharePoint911 Branding and Design Services
    My Blog: http://blog.drisgill.com
    Wrox: Professional SharePoint 2010 Branding and UI Design
    Wednesday, July 21, 2010 3:32 PM
  • Randy,

    Is there a way to add a header with image banner above the ribbon, banner image is full width of the site?

    Help me out

    Thanks

    Neel

    Monday, August 2, 2010 2:41 PM
  • I have made a blog post for this: http://estruyf.be/blog/v4-master-sticky-footer-with-undocked-ribbon/

    The footer stays at the bottom of the page, except when the page content is longer then it will be pushed down.

    EStruyf
    Thursday, August 26, 2010 2:30 PM
  • You can do that by just placing a DIV above the ribbon.

    <!-- Banner -->
    <div id="banner" style="background: #ccc; height: 40px; width: 100%;">This is the banner</div>
    <!-- Start of the ribbon section -->
    <div id="s4-ribbonrow" class="s4-pr s4-ribbonrowhidetitle">

    Then you can add the image to the banner with css or place it in the div section.

    EStruyf


    EStruyf
    Thursday, August 26, 2010 2:36 PM
  • Thanks Randy that worked a treat.  I am just getting into the branding side of SP so could you help me with a quick question. This change works on web part pages but not the wiki pages.  How come the wikis are not showing the footer?

    Thanks

    Shaun

    Thursday, February 24, 2011 1:32 PM
  • Randy's solution is excellent. I was able to add the footer and added to my blog with screen shot.

    http://virtualizesharepoint.com/2011/03/29/custom-footer-for-sharepoint-2010-master-page/

    Tuesday, March 29, 2011 3:17 PM
  • Hi all,

     

    I am looking for further clarification on this - Randy's solution works pretty well, except for in Firefox, where the footer I have created now appears off the top right of the page, essentially doubling the page width. Is there any simple solution to that?

    I have also tried Estruyf's solution, and while this works in Firefox, it breaks the modal dialog behavior when you click on things like "Add new document" - the grey "dimming" of the page has a clear border at the bottom of the page, and the modal dialog doesn't appear in the center of the screen - if you have scrolled down, it will appear off the top of the screen :(

    Is there any way to solve this? I have also seen a post here: http://www.cssstickyfooter.com/using-sticky-footer-code.html but I can't seem to get it to work correctly in a SharePoint Master page (I am not a CSS or HTML expert).

    Please help, as I would think footers ought to be a pretty simple and often requested addition, but they seem to be very difficult to get working in all browsers.


    James
    Thursday, June 2, 2011 10:05 AM
  • Thanks Estruyf,

    I tried that but it didn't work as expected, any chance you could be more specific as to where this needs to be placed.

    I tried inserting header/banner Div above the ribbon <div id="s4-ribbonrow" class="s4-pr s4-ribbonrowhidetitle"> but screwed the page.

    Thanks
    Perry


    Wednesday, July 6, 2011 10:25 AM
  • Hi Perry,

    I was working on a footer for my master page last week and had trouble sticking the footer to the bottom of the page, it always wanted to hover 100-200 pixels above the bottom. Fortunately I found Elio's (EStruyf) master pages and was able to get it to work. Have you tried downloading one of his master pages yet? Very nice master pages Elio (EStruyf)!! I posted the steps I took to use his master page:

    Here are the steps and screenshots I took to add Elio’s master page to my farm:

    1. Downloaded his master page from his web site: V4.Master_Footer_Docked_Ribbon to my desktop
    2. Navigated to the Master Page Gallery in my Site Collection and uploaded the master page
    3. Opened site in SharePoint Designer 2010, and opened new master page for editing
    4. Copied and pasted the CSS from his header to my custom style sheet
    5. Added a line of code in the header to attach my custom style sheet (see Part 2 for instructions)
    6. Saved, Checked-In, Published, Approved Master Page
    7. Refresh browser to view footer (screenshot)!

    Visit this blog post for more details and screenshots. Hope this helps,

    Regards,

    David Andrew Smith
    http://davidandrewsmith.us/



    • Edited by David-Andrew-Smith Monday, July 18, 2011 3:08 PM spelling
    • Proposed as answer by snmegan Wednesday, September 21, 2011 6:09 PM
    Monday, July 18, 2011 3:03 PM
  • Hi all. I just added a footer but it shows only on my page using my account details but on the normal users this is hidden. Even to another user with full control. This happen also on the logo I added on the site. Is there anyone who have solved this problem before, i need soltion ASAP.
    Monday, March 5, 2012 10:54 AM
  • Just thought you can be having solution for below query:

    Hi all. I just added a footer but it shows only on my page using my account details but on the normal users this is hidden. Even to another user with full control. This happen also on the logo I added on the site. Is there anyone who have solved this problem before, i need soltion ASAP.

    Regards,

    Joel Rotich

    Monday, March 5, 2012 10:55 AM
  • @ Joel

    you need to chechin the changes and publish it. That is the reason its not visible for others


    San

    Friday, June 1, 2012 12:37 AM