SharePoint Branding Best Bets (SPSRIC2013)

Diving into the world of SharePoint branding can be a real headache. What is the best practice for deploying my branding? How do I select a design firm? What is the impact of mobile devices and how do I ensure cross-browser compatibility? What are the new branding tools available in SharePoint 2013? These are all common questions that must be answered during the course of branding efforts. In this session we’ll look at the various aspects of SharePoint branding, and common pitfalls to look out for during your next branding project.

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.

SharePoint Branding & CSS Specificity

We all know that best practices SharePoint branding avoids the use of !important in your CSS, but how do you correctly control the specificity of your CSS to mitigate the need for it?

The order of operations for your CSS depends on a number of factors, including the loading order of the stylesheet, the order of the styles within that stylesheet, and lastly the specificity of the style. SharePoint allows us to use the <SharePoint:CssRegistration> tag to help provide greater control over the loading order of stylesheets and ensure that your custom style sheet is loaded after all of the core ones. This allows us to easily override the out of the box classes easily, since styles loaded later will override matching properties of identically named styles loaded previously.

I recently ran into a problem when branding SharePoint 2010 MySites for a client. The SharePoint core CSS has classes for branding the "Add New" links on the bottom of list/library web parts (.ms-addnew a:visited, .ms-addnew a:active, .ms-addnew a, etc.). Simple enough, my custom stylesheet that is loaded after all of the core ones overrides the link color to my desired color. But on the MySite, there's another core stylesheet (portal.css) that gets loaded as part of the layout of the MySite. The CSS link is actually rendered inside the main content placeholder, not in the head. These same few styles are redefined in portal.css, and since that is loaded later, it overrides my override of the core style.

Some people might now stand up, voilla... this is one of those cases where "you HAVE to use !important", but this is not the case. Remember that little thing called specificity? A style loaded later will not override a previous style if that previous style has greater specificity. Since .class .class element is more specific than .class element, the browser will always choose a more specific style over a newer one.

This being said, crack open your custom master page, and find the opening <body> tag. If your masterpage has been derived from the default out of the box master, you'll likely see that the body tag has a class attribute with a value of "v4master". Add a second value to the class attribute (ie: class="v4master customBranding"). We can now define more specific styles using the .customBranding selector. Using .customBranding .ms-addnew a will always take precedence over the .ms-addnew a in portal.css purely because it's more specific than any styles already defined in the core stylesheets. No !important here.

Enhancing SharePoint 2010 for the iPad (SPSAusTX 2012)

Despite being marketed as an entertainment device rather than a mobile platform for business, the iPad continues to gain traction as a mobile device for the next generation business user. For some organizations, the rich user interaction and usability afforded by the iPad is a compelling reason to work towards cross-platform capability or iPad specific versions of line-of-business systems. In this session we’ll review custom iPad specific enhancements for SharePoint 2010, including changes to the user interface based on the orientation of the device. Presented at SharePoint Saturday Austin, TX (January 21, 2012).

Enhancing SharePoint 2010 for the iPad (SPSVB 2012)

Despite being marketed as an entertainment device rather than a mobile platform for business, the iPad continues to gain traction as a mobile device for the next generation business user. For some organizations, the rich user interaction and usability afforded by the iPad is a compelling reason to work towards cross-platform capability or iPad specific versions of line-of-business systems. In this session we’ll review custom iPad specific enhancements for SharePoint 2010, including changes to the user interface based on the orientation of the device. Presented at SharePoint Saturday Virginia Beach (January 7, 2012).