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

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.

.ms-siteicon-a {
  max-height: 280px; /* Height of logo */
  max-width: 720px; /* Width of logo */

#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:

/* 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:

@media screen and (max-width: 940px) {

  /* Stack logo, top nav and search */
  #siteIcon {
    float: none;
    text-align: left;
  .ms-breadcrumb-box ~ {
    display: block;
  #s4-titlerow {
    height: auto
  } {
    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 (<style type=”text/css”>).  You can alternatively insert a CSS LINK tag thus making updates much faster to complete because you only need to update the linked CSS file and not every web page in your site.
      • Follow steps 1-5 above under “Alternate CSS URL setting for Publishing sites”.
      • In the snippet editor, insert a link tag and reference your CSS file: <link rel=”stylesheet” type=”text/css” href=”https://domain/site/SiteAssets/custom.css”>
    10.  Select Insert.
    11. Save the page.
    12. Repeat for every page in the site.
  2. Use an app to provision a CSS file that then injects a custom action that links to your CSS file. Blog post coming soon on how to do this.
  3. Use a sandbox solution to add the file. This works, it just isn’t encouraged by Microsoft.
  4. Use a Composed Look *shudder*. See below.

What about Composed Looks?

It is no secret that I am not a fan of Composed Looks.  Yes, they can help you brand your site without a custom master page.  Their application is also irreversible, customization is a pain and unless you lock down your permissions, users can muck them up pretty quickly. Check out this post about Composed Looks.  Then you can make that call if it is a good solution for your needs.


When I wrote this blog post I didn’t realize Microsoft had announced that they were phasing out public facing sites (my bad).  They will still be around for two years though for customers who already have them.   All of the advice above still stands, especially when you consider extranets.  Sorry folks, I wish I had better news.

73 thoughts on “To brand or not to brand, that is the SharePoint Online Question”

  1. Hey Heater great post and good tips! One part was a little bit confusing as to Publishing Sites and Public Facing sites (which are 2 different things in terms of SharePoint). Since MS is deprecating the Public Facing site in SPO ( and Publishing Sites in SPO are only accessible for authenticated users, I don’t see ANY reason to use Custom branding other then make SPO responsive. This makens generating revenue from a public facing site on SPO pretty much history.

  2. But Heather, Steve Walker gave specific guidance on not using the DOM as an API that would make your “responsive” suggestion not viable. In fact, I’d be more concerned with tying all my styles to OTB DOM structure than using a custom master page.

    1. Steve Walker is talking about using SharePoint’s markup class names / IDs in JavaScript as an “API”. For responsive design it is better to use your own HTML because you have more control, the code can be cleaner and easier to build CSS for and maintain going forward as mobile needs continue to change. To me, we are both saying the same thing. 🙂

  3. “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. ” Please provide a link to the MS documentation that expands upon this statement. Are you saying that zero updates will push out to these sites, or just updates that impact branding?

    1. Any changes that are pushed out that require updates to the master pages will not be picked up by custom master pages. There is no way SPO can push out code changes to your custom master pages, only to the master pages that are available OOTB with SPO. I am pretty sure this is the interview where the ripple roll out model is discussed:

  4. The issue I have is that SharePoint is fussy to brand e.g. if you don’t want a control don’t delete it but hide instead otherwise something will break.

    Add the fact that SP designer 2013 no longer has a design view and branding has become more difficult instead of easier.

    I hope the beyond 2013 release improved in the branding area and I also hope SP designer comes back with a design view!

    1. Thanks for sharing your thoughts. I personally delete controls all of the time and with few issues. ContentPlaceHolders need to stay, but you can set the visibility to false and then the code won’t be rendered down to the user’s browser. I prefer to work in code view vs. design view because it is easier to keep chunks of code together that way. For example to keep the search ContentPlaceHolder wrapped around the search control. In Design view it is easy for these code relationships to get broken apart. At Ignite in May 2015 it was announced that there will be no SharePoint Designer 2016 – so I wouldn’t count on seeing design view come back in future versions. But they have stated that UX is a primary focus area for SharePoint 2016 improvements.

      1. Knowing that 2 years sound like eternity in this rapidly evolving IT-world, I still have hope for us, SP-branders 😉 And I cannot imagine publishing sites without branding, ever.

        kind regards,


  5. Is it in any way possible to find out (or get notified) when Microsoft releases a new MasterPage for SharePoint Online? And can one find out what MasterPage Version a tenant currently uses? Thanks for any answer on this.

  6. What if you want to change the URL to which the logo points to? We have decided not to use master pages anymore but we do have the need to point the logo to the current site collection default page. How would you go about achieving this using only CSS and no master pages?

    Extra information:
    – We have over 100 site collections
    – They all point to the same CSS
    – No Master Pages are used
    – We have a low tolerance level for code (solutions, javascript etc)
    – We use SharePoint Online 2013

    1. The default behavior of the site icon/logo is to link back to the home page of the current site. If you want to change that to make it link back to the home page of the top level site collection, then you will have to use code. With the restrictions that you list, you don’t have other options as the link is not offered as a setting in the SharePoint UI (at least not to point to a custom URL or a parent site several levels up). If you are willing to try out JavaScript, you could possibly use JavaScript injection to capture and rewrite the target URL.

    1. If you have business justification to add CSS via that method, then I say go for it. If you have one site or a handful of sites, I think it is overkill. It is doing something programmatically that you can do manually in a fraction of the time without the overhead of code and code deployment. If you are working with non-publishing sites and don’t want to modify the master page, the custom action may be a good solution – however I am not sure if that solution would work for non-publishing sites. But all it is doing is setting a CSS file for Alternate CSS URL, which is readily available in Site Settings and includes an option to push down the setting to children sites.

      I never suggest adding CSS to a single web page via a web part unless you only need that CSS on that SINGLE web page (and even then I don’t like to do it) and/or it’s your only option based on your environment restrictions. One edict of a CSS file is that it provides a central location for style information storage for many web pages.

      1. Thanks for your reply. We have non-publishing SharePoint Online sites that the business want to heavily customised styling. Assuming that I lose my argument about why this isn’t a great idea, what’s the best way to apply custom/alternative CSS consistently across all pages in a non-publishing SPO site?

        1. Sounds like the want an old B&W TV to pump out HD quality playback. I am not saying non-publishing sites are like an old TV, but non-publishing sites aren’t built for in-depth customizations without editing the master page.

          If they don’t want to modify the master page then they are left with JavaScript injection, Delegate Controls and Custom Actions. Delegate controls aren’t available for Office 365. Custom Actions are… although the sample you pointed out earlier may not work with your site – it would have to be researched and tested. I say this because that particular GitHub project is specifying a CSS file for a property only available for publishing sites. With JavaScript injection you need to do your homework. There are differing views and pros and cons to this approach and you need to know what you are getting into before using it.

          Honestly the most straight forward solution is to use a publishing site. But if that isn’t an option or you are too far down your development road to switch now, then you will have to look at these other options (customize master page, custom action, JavaScript injection) or your management team/client/business needs to get a gentle reality check about what is doable.

          1. Many thanks, Heather. I was thinking along similar lines with regard to the suitability of non-publishing sites however the decision is not mine to take. I will have to look at JavaScript injection as I suspect all other avenues are denied to me due to the add-in policies.
            PS Apologies if this comment appears twice, problems with the Twitter plug-in.

  7. I use custom alternate CSS all the time unless as you say major changes required to master page whereby needs branding. To me it is like having the CSS in a sandbox. Easier to debug.

  8. Hello Heather,

    My site is a publishing site and I used to have the “Master Page” under Look and Feel but it seems to be missing. Do you know if it has changed? I wanted to use the Alternate CSS URL section to make some change. Thanks.


    1. Is it possible you are working in a non-publishing sub site that is child of a parent publishing site? Or is it possible that the publishing features were deactivated for your site?

    1. You can only use that screen to update the assigned master page if the team site is under a publishing site AND if you have disabled the Minimal Download Strategy feature for the Team Site. If MDS is enabled on your team site and you alter the master page via the ChangeSitMasterPage.aspx screen, your site implodes. 🙂

  9. SharePoint newbie here – bear with me.
    I’m editing a page within a Team Site.
    I’m trying to add a link to my own custom css file. Stumbled upon this article via Google search (and so glad I did!)
    I followed your instructions in section, “Using custom CSS for non-publishing sites (such as Team Sites).”
    However — it’s just adding the link tag within a div in the body of my page! Not putting it in the head.
    Needless to say… I need that link element in the head.
    So… what might I be doing wrong? How do I add code to the head my page?
    Many thanks!

    1. Sorry for the delay! I have been out of the office for several weeks. Are you still having issues?

Leave a Reply to autechre11 Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.