SharePoint Branding for Non-Branders

How hard can it be?

A few months ago a colleague and friend of mine asked me to help him out on a project.  He had a customer who wanted some light branding done on their new, soon to be deployed, SP2016 intranet portal.  By ‘light branding’ they basically meant “use any of the OOTB customisation methods but don’t touch the master page”.

TBH, I really didn’t fancy messing about with master pages in any case as I know from experience that that path can lead to a whole lot of hurt.  And, Microsoft no longer peddle this as best practice anyway, even though they still provide the Design Manager as a way to create custom master pages.

In my opinion, the Design Manager never really cut it.  It was supposed to be a tool for graphic designers but these guys are entrenched in their own little worlds of wire frames and Photoshop and really couldn’t be bothered to learn how to use it and it was way too complicated for the rest of us.  My advice to Microsoft is to drop Design Manager, especially if they no longer want us to create custom master pages anyway, mainly because in O365 they can’t guarantee that they won’t change stuff that won’t break your site – the other edge of the ‘continuous update’ sword.  Giving us Designer Manager but telling us not to use it is a bit of a mixed message I feel.

Now, I’ve been around SharePoint for long time but I never really got into this branding lark.  I always saw branding was something steeped in mysticism, the secrets of which would only ever be revealed to the initiated.   So, I thought its maybe time that I got initiated.  After all, how hard can it be?

Well, it turns out that it’s not very hard at all and if you are about to shell out thousands to a consultancy to do your branding then this is the right series of articles for you.  Not only will I help you to understand what they are talking about but you’ll get a better handle on what they will actually be doing and who knows you might actually be able to do it yourself.  Seriously, it’s not that difficult.

In Support of O365 Saturday 2017

I’ve been lucky enough to be doing the rounds again as a speaker at the O365 Saturday community events held all round  Australia and these season my session has the same title as this blog post.  So, the series of articles which link from this covering post are really in support of that session.  I’ve been promising since Sydney in June to write this up and have finally gotten round to doing so.  Apologies for the delay.

The Menu

So on the menu we have:

• Where we are headed and some branding basics – the remainder of this post
• Creating a Custom Composed – using the Microsoft colour palette tool amongst other things
• Some useful Tricks with Alternate CSS
• The Kaboodle Branding Infrastructure – this is a branding accelerator solution package for SharePoint 2013/2016 on-prem deployments and I’m giving it away for free!
• My 10c worth on Image Rotators including KISS, the best free one in the world!

Where we are headed

I suppose is only fair to let you know where we are headed.  In the hour long session I have on O365 Saturdays, I transform a standard and somewhat bland SharePoint site into something that is a little bit more engaging.

I should explain that as a way to demonstrate key branding concepts and ideas I use the scenario of building a company intranet portal.  It’s not that you don’t ever do branding in collaboration sites but it is far more likely that you will do more branding on an intranet portal.

I’m using Adelaide Airport as my customer just because I happen to have a demo that I knocked up as part of a project I recently worked on with them.  I should point out that this is not (nor will it ever be) their real intranet portal, it just seems advantageous here to use a real business context for these articles – aren’t you sick of Contoso?

So the start point looks like this with standard icon, branding text and favicon (all highlighted) using the default Composed Look with a search web part and a few Promoted Link navigation tiles thrown on the homepage:

And at the end of the session the site looks like this:

Not earthshattering I grant you but I think its not bad for an hours worth of work -talking at the same time.  The key difference between before and after are:

• Application of a custom site logo – we’ve got to start with the basics right.
• Activation of the Publishing Infrastructure feature and the opportunities that brings including the ability to apply a custom Alternate CSS and replace the standard SharePoint branding text amongst other things.
• Application of a custom Composed Look – the creation of which is the subject of the next article in this series.
• Favicons, social links (using Fonts Awesome) and social media feeds, together  all of which are delivered by the Kaboodle Branding Infrastructure solution presented in the 3rd article in this series

However, before we get on to all that we need to address some fundamentals first.  Most of this will be familiar ground seasoned SharePointers but it occurs to me that not everyone reading this might fall into that category.

Which Site Template?

So you first decision when building an intranet portal is to decide on which site template to use as your start point – I’m assuming that you’ll be creating the portal in its own new Site Collection.  Although you can use any of the available Site Templates as you start point, it would seem obvious that if we are building an intranet portal that we should start out with the Pub lish Portal template.

Or would it?  I suppose if your concept for the intranet is really as a publishing site where fresh pages get added every day then this is where you would probably start.  The problem is that very few customers that I know of actually use SharePoint as a publishing platform in this way.  Maybe its because most of my customers are a SMEs and for them the priority is low maintenance, which means not adding new pages every day, in fact hardly ever adding new pages at all.  Instead, they want the portal to be quite static in its structure but have the content of those pages be dynamic.

I’m not saying that you shouldn’t start with the Publishing Portal template but there are some pros and cons and when you weigh these up you might (or might not) decide that a better start point is a good old Team Site.

Pros

• With the Publishing Portal the Publishing Infrastructure (PI) Feature is enabled automatically and you will need the PI to access the full OOTB branding potential of SharePoint.  However, it takes just seconds to enable the PI on a Team Site so its not really that big of a plus.
• You can do cross site publishing which means that you can configure things so that pages get authored and approved in one place (the production space) and then published to one or more different site collections (the consumption spaces) for access by consumers.  Honestly though, I have yet to meet a customer who does this!
• You start out with the Oslo master page.  This might be to everyone’s liking because the Oslo master page has no left-navigation area but that’s why I think it is the better start for a portal because it is much cleaner.

Cons

• The Team Collaboration Lists Feature is not enabled by default.  I’m not sure why this is because you will nearly always want to switch this on or else you’ll not be able to use Promoted Links or any other of the really useful list types that get shipped as standard.  Again, this is no biggy really as you just enable the Feature after provisioning the site.
• The Publishing Portal absolutely drives me mad with the its default position of enabling major and minor versioning, forced check-in/check-out and content approval everywhere.  This is bonkers because when you first start to flesh out the pages of a portal no users are accessing it because you are in build mode and so having these settings applied as the default position does nothing but cause friction and annoyance.  When your finished the initial build then by all means switch these governance controls on then but we really don’t need then switch on up front.  I promise you that if you don’t switch this stuff off it will bite you.  I have lost track of the number of times I have added up a beautiful new site logo when no one else can see because I’ve forgotten to check in to the site assets library – rant over!
• You can’t create child Team Sites from a publishing portal (at least not using the web UI).  Personally, I don’t recommend creating child sites that hang beneath a portal in any case but I suppose if you had a really small organisation you might considered doing this.

Which Master Page?

So I hope I have made it clear that the objective here is to brand SharePoint, either on-prem or in O365, without creating custom master pages or without hacking the existing ones.

What is a Master Page?

The concept of a master page is quite simple really.  A page consist of 2 main parts:

• The Chrome:  The Chrome amount to the coachwork of the page, including the layout for navigation elements, text and graphics, which are intended to provide a consistent look and feel for all pages in the site.  The Chrome is the bit around the edge of a page and is the same, in terms of style and layout for all pages that use the same master page.
• Page Content:  That part of the page given over to site designers and users to provide page specific content.  Page Content is the bit that goes in the middle of a page and will be unique for each page

It is the Chrome that is delivered by the master page i.e. everything outside of highlighted area shown in the screenshot below.

What are the options?

Actually we only really only have the choice of 2 master pages to work with:

• Seattle:  The default master page for Team Sites
• Oslo:  The default master page for Publishing Sites

Back in the day when Microsoft supported the public facing web site in O365 (see my Death of a Salesman post) the did have a few more options Berlin and Lyon, if memory serves but nowadays our choices are limited to just these 2.  Actually, I reckon that this is a good thing as it means we don’t have to think too hard about which one to pick.

The key differences between the 2 are:

• With Seattle you get both a top and left navigation area, whereas in Oslo you only get a top navigation bar
• Oslo has some enhanced support for anonymous users
• They use slightly different CSS classes and files
• Their layout is obviously different

You can find a more detailed account of the differences here.

Personally, I prefer Oslo for an intranet portal, mainly because I think that too much text and too many links makes the page look too busy.  I guess its like the difference between Google and MSN and some people are fans of one approach over the other.  For the rest of this article I shall be using Oslo and if you started out using the Publishing Portal template then that will be the one that was configured by default.

You can switch master pages directly from the Site Setting page by clicking the ‘Master page’ link the Look and Feel section.  Note that this link is only added to the page when the PI Feature is activated.

As you can see form the above screenshot the site actually uses 2 master pages, one for standard user pages and potentially a different one for when accessing system manage pages such as Site Settings.  Mostly you’ll want to set these to use the same master page.

You can also change the master page by selecting a different Composed Look.  This is because a Composed Look is really nothing more than a packaged collection of configuration settings and one of those settings is the master page.  I explain how to create a custom Composed Look in the 2nd article in this series.

The Publishing Infrastructure Feature

Actually, the PI is delivered by 2 Features, one scoped at the Site Collection and so activated from the root web site and the other scoped at the individual web site level.  If you start point has been from using the Publishing Portal template then the PI will have already been enabled and so you’re all set.  If however, you started with a Team Site template then you’ll need to activate the PI.

The reason that you need the PI enabled is that it gives you a UI to so many more branding options like the Master Page configuration page mentioned above which allows you to not only set the master page but also specify an Alternate CSS and hove changes pushed down to child sites should we have any.

The PI also gives you more options with site navigation and allow you to create pages with Page Layouts rather than the much simply Text Layouts that you are stuck with when using the wiki page library that comes as standard with Team Sites.

Site Title, Description and Logo

Of course, one thing that you will want to do with every site is make sure it has a meaningful title, description and uses an appropriate site logo.  This probably doesn’t require a walk through but for the sake of completeness I’ll do one anyway.

Click on the ‘Title, description and logo’ link in the Look and Feel section of Site Settings to access the configuration page.

Setting the site title speaks for itself but setting the description is a little bit pointless because it is not actually used anywhere in the standard UI except in this page.  There are ways to get the description displayed, including modifying the master page but that’s what we are trying to avoid.  I suspect that it might be used be used be the search engine to improve relevancy but that’s just a hunch.

The page allows you pick an existing logo or upload one from the file system. Once you pick a graphic the UI will show your selection prior to actually saving the setting as can be seen below.

Note that SharePoint decides to save the logo in the Site Assets library which is probably as good a place as any.  Make sure that the file is published as a major version and checked in or else you users won’t be able to access it.  As mentioned earlier, this is why the first thing I do is go through the site libraries and galleries and switch off these very restrictive settings as we can always choke things up again when we let this baby loose on users.

For completeness and to improve accessibility you should set a value in the alternate picture text box.  I’m always tempted to set this property to “The reason you can’t see this icon is because your idiot of a site admin didn’t publish or check in the logo file” but I don’t.

Next Up

So that’s the start of our branding journey.  Nothing very exciting so far, all we’ve done is select a site template to start from and set the logo.  Hang in there because in the next post I’ll shows you how to create a custom Composed Look to jazz up your site.