In the early 2010s I branded SharePoint 2010 and 2013 intranets for about 25 Australian organisations, and put the fixes I kept reusing in GitHub gists. Most of them work around the browser, the master page or SharePoint itself. None are needed now: modern SharePoint ignores custom master pages and alternate CSS, and the menus, footers and fonts are settings.
I built a branding pack to help the partner I worked for win intranet deals. It was Sass, and turned out a SharePoint solution file (.wsp) in a client’s brand in under four hours. Most of our intranets started from it. Some of these gists came out of that work.
Navigation
- Two-level dynamic menus, September 2011. The top bar only did one level of drop-downs. Type a submenu item with a leading dash and space, like
- Forms, and a few lines of jQuery move it under the item above. - The Foundation version, October 2011, did the same on Foundation’s flat top bar with
-- Forms. Fussy: one commenter only got it working once he noticed it had to be dash, dash, space. - Full breadcrumb, October 2011. An ASP.NET
SiteMapPathshowing the whole path to the root, keeping SharePoint’s list view drop-down on the last crumb.
Now: communication and hub sites have cascading and mega menus, and hub sites share navigation. The providers my breadcrumb used aren’t available in modern sites.
Internet Explorer
SharePoint 2010 was built for IE8, and some of its scripts broke in IE9 standards mode. Master pages carried <meta http-equiv="X-UA-Compatible" content="IE=8"/> to hold IE9 back, and lost CSS3 and media queries with it. Kyle Schaeffer’s v5 master page was the clean HTML5 starting point.
- My v5 variant, January 2012, kept the IE8 tag and swapped media queries for script, an idea from head.js: an
lt-800class on<html>below 800 pixels, with Kyle’s mobile rules prefixed.lt-800. A proof of concept, “not adequately tested”, that “may suffer from 2AMitis”. - On-demand IE9 rendering, February 2012, put the IE8 tag in a content placeholder, so one page could opt out.
- Font loader, November 2011. IE couldn’t load the same WOFF twice, and dialogs reload the page in an iframe with
IsDlg, which broke the font. The script loaded fonts in IE only outside dialogs. - The theming engine couldn’t parse the
backgroundshorthand, so themable colours had to bebackground-color.
Now: SharePoint 2010 leaves support on 13 October 2020. Modern sites have no custom fonts: a theme sets the colours, and the font is Segoe UI.
Chrome
Every so often in Chrome and Safari the page start-up script didn’t run, and the ribbon and scrolling died. My December 2012 scrolling fix, adapted from a WithinSharePoint post, checks every 30 milliseconds whether _spBodyOnLoadWrapper has run and calls it if not.
The same month: Chrome quick-search for SharePoint, an OpenSearch file and one <link> so Tab in the address bar searched the intranet.
Footer
A sticky footer took script: the ribbon, body container and window all had to be summed. In March 2013 I adapted Randy Drisgill’s jQuery approach: mine added #s4-mainarea to the sum and hid the footer in dialogs.
Now: communication sites have a footer setting, and SharePoint Framework extensions add more.
What carried over
There was a lot of wailing and gnashing of teeth. The advice I gave in 2015: learn CSS, Sass and JavaScript, read Randy Drisgill and the other branding MVPs, and be good at apologising and making as few customisations as possible. Only the last part still matters. Custom master pages had to go. Even for classic sites Microsoft says keep master page changes small, because updates don’t flow into yours. Modern SharePoint took the choice away: brand is a theme, logo, header and footer, and code goes in SPFx with defined places on the page.