Thursday, August 2, 2018

To brand or not to brand, that is the SharePoint Online Question

Copyright: blog.sharepointexperience.com

There has been quite the chatter happening on the ole’ interweb lately surrounding the topic of branding and site customization for SharePoint Online (SPO). The overall message people keep hearing is “don’t use custom master pages for SharePoint Online.” Since branding is my schtick, this makes me die a little on the inside each time I hear it. But please hear me when I say this… blanket statements are rarely applicable to everyone involved and should by no means be considered as a rule for life. Yes, you can use custom master pages with SharePoint Online. Yes, it will involve work. But there is no such thing as custom branding without work.  The issue is lack of control, and that is a scary thing to face. So let’s recap what has been happening and then I will chime in with my two cents since that is what blog posts are for anyways.

What happened?

Through conference presentations, podcasts, documentation and more, an overall theme or message has emerged that if possible, you should avoid using custom master pages (among other things) in your SPO sites.  Note this is not an absolute “don’t use” – it is a suggestion that you don’t use them needlessly.

But why?

SPO has a ripple feature roll out model.  New features, changes and bug fixes are pushed out in small bits frequently as opposed to large chunks infrequently.  In theory some of these new features or changes could be affecting the master page (again, among other things) used by the site.  SPO  can’t reach in and touch your custom master pages, so only sites still using the OOTB master pages will get the updates.  This will potentially leave you missing out on features or other goodies.  This is where you insert the fear of lack of control, and the close cousin of “how am I supposed to plan for changes when I don’t know when they are coming and if they will break my site?”  No one wants to get the call that the site just exploded as they are sipping a Mai Tai on the beach.

How often are they REALLY pushing out changes?

You can make that call and keep track on your own by visiting the Office 365 Roadmap.  I will say they have been quite busy making frequent updates to the Suite Bar, as some people (at the time of this blog post writing) have witnessed as the changes are gradually rolled out to customers in waves.   And more changes are planned based on a podcast back in October.  And I think it is safe to say even more changes will be pushed out after those.  It will be an endless cycle.

So what should you do?

There are lots of articles and advice out there on what to do, what this means and some options that you have.  I am not looking to state the same thing these articles do, so please check them out when you have some time:

When to use custom master pages

Lots of folks tend to focus on the message that you can use custom branding for publishing sites and probably shouldn’t use custom branding for non-publishing sites, most commonly referred to as Team Sites (which are actually just one type of non-publishing site). My problem with this advice is lots of people aren’t aware of the differences, don’t use publishing sites (when they should be) or have been forbidden to use publishing sites by IT departments that maybe don’t recognize the benefits that publishing sites can bring to the table and how they should be used.

Set SharePoint aside for a moment

As small business owners, Dustin and I use lots of client-side tools to manage and run our business. They are usually subscription based, require only a web browser and allow us to take care of company functions.  Sound familiar?
Most of these tools provide minimal to no customization of the user interface.  Maybe you can add your own logo in the corner. Perhaps even change a color or two.  But by and large you get what you get and you don’t throw a fit.   Think about your online banking site or even a retail site like Amazon.  You use the tool, you get a service, you get things done but you don’t have the option to brand the tool.  It will be a cold day in hell when you can add a unicorn graphic and dancing gerbils to your Amazon UI shopping experience.
SPO is just a tool. It is no different than the multitude of options out there that help you live your life or run your business. If SPO is being used internally by your organization, you can skip branding.  Why shouldn’t it be held to the same standards and expectations as other tools that also frequently push out updates for the benefit of their users? What makes SPO so special that it should allow custom branding?

Say it ain’t so!

Shocking, I know, for this to come from someone who meets her bills from branding SharePoint.  But hear me out.
You opt to not go on-premises for SharePoint and instead take SharePoint “to the cloud!” – and that includes some downsides.  You have to weigh them against the upsides.  Downside: Potential branding issues that break your lovingly hand-crafted UI masterpiece. Upside: You don’t have to manage servers, scalability, backups, etc.  SPO is a business tool.  It helps my business, it doesn’t generate revenue.

But I want to change my logo

No worries, there is a solution for that.

But I want to change some colors

There is also a solution for that  – a couple in fact and one that doesn’t make me cringe.  More to come below.

But I don’t want it to look like SharePoint

Man, can we get a t-shirt for that?  I get it, and understand, and have a solution for that as well.

But I want a responsive design

Believe it or not, even this is doable without a custom master page.

But I do use my web site to generate revenue

Ding ding ding!  Now that is where publishing sites come in!   And total and complete justification for custom master pages and anything else you want to brand or customize in your SPO site. Some things to consider:
  • With public facing, business generating sites you really need to have your branding applied… nothing screams lackey like a OOTB site design.  This same concept can be applied to client extranet sites where everyone has a login, but you do what your branding and not the default look and feel.
  • Most of your content is brochureware… talking about how awesome you are and the cool stuff you provide.  These are not functionality rich web pages.
  • Most of the features getting rolled out to SPO are not useful to your site visitors or will  be even shown or utilized, for example, the Suite Bar.
  • You most definitely want a responsive design and while you can do it with OOTB SPO, it is cleaner and easier to have your own HTML in place.  Plus you can utilize frameworks if that is what you desire.
Check out this handy-dandy flow chart to see what type of site would be best for your needs and where custom branding should come in.
SPO for Pub and Non Pub Sites

Implementing branded elements in a SPO site without custom master pages

Let’s step back through the common branding needs for SPO sites and look at how they can be accomplished without custom master pages.

Customize the logo

If your logo is 180px wide by 64px tall or smaller, you can simply update the logo file used by the site via the Site Settings.
  1. Navigate to your SPO site.
  2. Select the gear icon, then select Site Settings.
  3. Under Look and Feel select Title, description and logo.
  4. Follow the prompts to upload your logo file.
If your logo needs to be larger than 180 x 64px you need to make some modifications to the CSS.  The issue is there are styles in the SPO CSS file that constrain the logo area.  Even if you upload a 2000 x 1000px logo it will still appear as 180 x 64px. As a side note, this issue is present with on-premises sites as well.
To alter the allowed size of the logo, you need to add the following CSS.  Update the height and width values to match the dimensions of your logo file. See below for how to add custom CSS to your SPO site.
1
2
3
4
5
6
7
8
9
10
.ms-siteicon-img,
.ms-siteicon-a {
  max-height: 280px; /* Height of logo */
  max-width: 720px; /* Width of logo */
}
 
#siteIcon,
#s4-titlerow {
  height: 280px; /* Height of logo */
}

Change some site colors all the way to make it not look like SharePoint

CSS to the rescue! You can do A LOT of re-branding using CSS only. Here are a few, quick examples:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/* Add color and padding to the header area */
#s4-titlerow {
  background: #ccc;
  padding: 20px;
}
 
/* Hide the Office 365 branding in the Suite Bar */
#suiteBarTop a:first-child .o365cs-nav-brandingText,
#suiteBarTop a:first-child + .o365cs-nav-appTitleLine{
  display: none;
}
 
/* Alter Suite Bar color */
#suiteBarTop > div,
#suiteBarTop #O365_TopMenu {
  background: purple;
}
 
/* Add color to Quick Launch (side nav bar) */
#sideNavBox {
  background: #ccc;
  margin: 0;
  padding: 0 20px;
}

Create a responsive design

Even more CSS to the rescue! Media queries are very powerful and can nip that responsive design need in the bud. Such as:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
@media screen and (max-width: 940px) {
 
  /* Stack logo, top nav and search */
  #siteIcon {
    float: none;
    text-align: left;
  }
  #siteIcon.ms-tableCell,
  .ms-breadcrumb-box.ms-tableCell,
  .ms-breadcrumb-box ~ div.ms-tableCell {
    display: block;
  }
  #s4-titlerow {
    height: auto
  }
  .ms-mpSearchBox.ms-floatRight {
    float: none;
    margin: 10px 0;
    left: -10px;
    position: relative;
  }
}

Adding custom CSS to SPO sites

Using a publishing site? You are home free. Team sites… not so much.

Alternate CSS URL setting for Publishing Sites

  1. Create your custom CSS file.  It can be stored in the Site Assets library, Style Library library or another location of your choice within your SPO site. Site Assets and Style Library are the most commonly used locations.
  2. Navigate to your SPO site.
  3. Select the gear icon, then select Site Contents.
  4. Select Site Assets or Style Library.
  5. Upload your custom CSS file.
  6. Select the gear icon, then select Site Settings.
  7. Under Look and Feel select Master Page.  Don’t see Master Page?  Then you aren’t working with a publishing site.
  8. Expand the Alternate CSS URL section.
  9. Select the radio button for Specify a CSS file to be used by this site and all sites that inherit from it.
  10. Select Browse and choose your custom CSS file.
  11. Select Insert.
  12. Select OK (back on the main Master Page screen).

Using custom CSS for non-publishing sites (such as Team Sites)

Here is the big nasty when it comes to branding non-publishing sites whether it is SPO or on-premises.   There is no nice Alternate CSS URL setting.  This is what drives people to using a custom master page (where you can link to a custom CSS file), which we are trying to avoid with SPO sites.  You have a few options:
  1. Add the CSS to each page of your web site.  Only have a few pages?  While this is not an ideal solution it is a quick thing to do.  Have a bunch of pages?  Then this can get tedious.
    1. Navigate to your SPO site.
    2. Select the gear icon, then select Edit Page.
    3. In the ribbon, select Insert.  Then select Web Part.
    4. In the web part adder pane, select Media and Content under Categories.
    5. Select the Script Editor under Parts.
    6. Select Add.
    7. Once the web part is added, select the drop down arrow to the right and select Edit Web Part.
    8. Within the web part, select Edit Snippet.
    9. In the dialog box, add your custom CSS making sure you wrap it with style tags (
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)