SharePoint Branding Best Bets (ATLSPUG January 2014)
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 2013 Suite Bar HTML
I recently started looking to replace the default "SharePoint" text on the top of the SharePoint 2013 Suite Bar. What I expected would be a masterpage change actually turned out to be much more simple; enter the big hammer (PowerShell). If you dig through the changes to the SharePoint 2013 Object Model, you'll find an SPWebApplication property called SuiteBarBrandingElementHtml, that does just what it implies... stores the HTML that gets put in the Suite Bar.
We can use some simple PowerShell to grab the SPWebApplication object, set that value to be whatever we want, and update the object; No masterpage or branding/UX changes required.
$webApp = Get-SPWebApplication http://path/to/webapp $webApp.SuiteBarBrandingElementHtml = "Company Name" $webApp.Update()
Coincidentally, after I figured this out and searched to see if it had been blogged before, I found this post. Shout out to Mat for documenting it first... that'll teach me to search first.
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 2010 Ribbon Visibility
When working on a public facing or anonymous SharePoint site, you typically want to hide the ribbon from users who are not authenticated to the SharePoint server. There's a bunch of options out there to control the ribbon visibility (some better than others), but they all seem to be "heavier" than they need to be. Many of the approaches require changes to the #s4-workspace element, since SharePoint scrolling will break if you completely hide the #s4-ribbonrow element. Other approaches use JavaScript fired every time the page is rendered in order to determine if the ribbon should be displayed, and appropriately handle its' status.
I was surprised, that in all of my research, nobody posted a simple, pure CSS approach to this, and it's easy enough to leverage SharePoint's native security trimming with some CSS to create a solution that has minimal impact to page performance, and a negligible impact on other page functionality (as you typically see when you start mucking with #s4-workspace and the scripts tied to it).
To start, create a custom class to handle our ribbon visibility. We'll create this in our custom style sheet that's loaded after all of the core styles.
body .ribbonVisibility {
display: none;
}
Next, we want to apply that class to the existing #s4-ribbonrow element on our masterpage.
<div id="s4-ribbonrow" class="s4-pr s4-ribbonrowhidetitle ribbonVisibility">
Finally, we want to add a SharePoint security trimming control to determine if a user is authenticated, and if they have a specific permissions level. If they meet the criteria, the control will output the markup within. In this case, we want an authenticated user with a "ManageLists" permission. If the current user meets that requirement, we're going to output some CSS to override our "display: none;" to show the ribbon.
<SharePoint:SPSecurityTrimmedControl ID="ribbonVisibility" PermissionString="ManageLists" runat="server">
<style type="text/css">
body .ribbonVisibility {
display: none;
}
</style>
</SharePoint:SPSecurityTrimmedControl>
This control can be placed anywhere after your custom CSS as been called.
There are other approaches out there that use a security trimmed control to trim the entire #s4-ribbonrow element, but if you wish to leave the #s4-workspace element and all of the scrolling and window sizing scripts that are tied to it unchanged, hiding the entire element will result in misplaced scroll bars and broken functionality. This is the lightest weight approach I've found to this issue.