Customizing the Suite Bar Theme in your Office 365 Tenant

Part of a good user experience with software is feeling that it is our own. When it comes to SharePoint, which for many people is their Intranet or at least an important work environment, we almost always do some level of branding.

It’s hard to keep up with how we are supposed to brand our Office 365 tenants these days. We have “guidance” from Microsoft that we shouldn’t customize the master pages in our tenants now, and in fact the “modern” “experiences” that are rolling out don’t even use master pages to put together the rendering of the UI.

There are some simple things we can do starting with a vanilla Office 365 tenant to make it feel more like home, though, and they aren’t all that complicated. One of the easiest things to do – and with the widest reach – is to change the theme of the Office 365 suite bar.

By default, the suite bar looks like this:

Suite Bar Default
Making the suite bar your own isn’t that complicated, and this article from Microsoft explains it: Customize your theme in the Office 365 admin center. But I often need to explain these settings to clients, so I figured I’d write up what I tell them.

Here’s what our Sympraxis suite bar looks like:

Sympraxis Suite BarIt’s not fancy or anything, and we don’t mess with any of the components of the suite bar with CSS or JavaScript tricks. We know how to do these things, but it just isn’t worth it. It’s all done by making changes in the Office 365 Admin center.

tip
Note that you need to be a Tenant Administrator to work on these settings. Being a SharePoint Administrator is not enough: you’re changing the suite bar for the entire tenant: SharePoint, Exchange (Mail), OneDrive, even Yammer. I’ve found that the “stickiness” of these changes sometimes varies across these services, but they get there in most cases.

Step by Step Instructions

Navigate to https://portal.office.com/AdminPortal/Home. This is the home page for the admin functions in Office 365. The UI here has been changing frequently, so these screenshots are current in our Sympraxis First Release Tenant as of today. Your “experience” may vary, but hopefully the basic steps will look the same.

Settings / Organization Profile

At the top of the page, you’ll see the information about your organization, such as the name, address, technical contact, etc.

Organization Profile

There is also a section to Manage custom themes for your organization.

Manage themes

Click on the Edit button.

There are a number of things you can change here. I’ll run through them in a little detail.

Select custom logo image

Custom logo imageIf you upload an image here, it will show up in the suite bar in the center.

Custom logo image

You’ll want to make sure the image fits well into the space allotted. The recommended size is “200 x 30 pixels in JPG, PNG, or GIF format, and no larger than 10 KB”. Since this image will load on every page in your Office 365 tenant, you’ll want to make sure the image is the right size and resolution to make it look good and load fast.

If you’d like the image to be a clickable link to something, you can add that in the next field. Since most people use their Office 365 tenant for internal collaboration or as their Intranet, I usually see this link going to the public-facing Internet site for the organization.

Select Background image

Background imageIf you’d like a background image across the entire suite bar, you can upload one here. As above, the image requirements are specific: “1366 x 50 pixels or less in JPG, PNG, or GIF format, and no larger than 15 KB”.

Earlier iterations of this capability came with a set of selectable images. One of the images I’ve seen most often is one with LEGO® tiles. It’s sort of cool, but that sort of image might not be your thing.

Prevent users from overriding custom theming with their own theme

Prevent users

This effectively locks the theme so that no one can override it. Frankly, I’m not sure what this prevents, as we can drop custom CSS into any page which overrides the theme, but here it is…

Set custom colors

Custom colors

Finally, we have a section where we can set custom colors for the suite bar. This is probably the change which will have the biggest impact for your users.

You can change the color from the default Office 365 / Microsoft blue and black to something which is more aligned with your organization’s identity. Even making a little switch like these colors can make your Office 365 tenant feel much more like it belongs to the organization; don’t underestimate the importance of this for the user experience.

You can change three colors here. For Sympraxis, we’ve used our logo’s purple for the Accent color (332F81), white for the Nav bar background color (ffffff), and our logo’s green for the Text and icons (A3A437).

Sympraxis colors

Save your changes

Save changesFinally, save your changes. It will take a few minutes for the changes to take effect across Office 365, but you’ll see them in every application in the suite soon enough.

Note that it’s easy to go back and change these settings or remove them entirely.

Making these changes immediately makes your users feel like the Office 365 belongs to them. They may not even notice the specific changes, but they will feel more at home. Try it out and see!

Dear Microsoft: Please Listen to Us About the New Document Library “Experience”

One of the latest hubbubs in the Office 365 world is around the new Document Library “experience”. (I refuse to use the word “experience” in this sort of context without a little sarcasm and some air quotes.)

There’s a new “experience” coming to Office 365 that makes Document Libraries look a lot like the OneDrive browser UI that some of you must use. (I prefer to use a synced folder on my devices to interact with OneDrive – when syncing actually works.)

In case you haven’t see the new “experience” yet, here’s how it goes. Here’s a very simple Document Library in our Sympraxis tenant.

2016-06-16_10-12-36

When you go to a Document Library for the first time after the functionality hits your tenant, you can choose to walk through a Motherhood and apple pie set of intro screens that show why the new experience is swell.

New Document Library "Experience" Prompt

2016-06-16_10-08-59

2016-06-16_10-09-15

2016-06-16_10-09-30

2016-06-16_10-09-43

And after clicking on “Let’s get started”, you see the new “experience”…

2016-06-16_10-11-58

 

Note the small link at the bottom left that lets you switch back to the “classic” view – for now.

The issue isn’t so much the new “experience”. I do think since people hate change, it’ll cause a lot of discomfort in many organizations, especially since it’s roaring into all tenants. In fact, the new capabilities are indeed swell. The issues are around existing customizations to the branding of functionality of Document Library views.

If you’d like to see what’s got people upset about it, you can check out the UserVoice item Allow Javascript customization and CSS branding/theming in the new Document Library Experience. There’s also a very long thread at the Office 365 Network in Yammer about it.

I do think the “Working on it” message in the UserVoice entry should give some hope. Microsoft knows there are issues. If they can’t address them and others like them, the flow to Office 365 will reverse back to on premises. What I think sows a lot of Fear, Uncertainty, and Doubt about this is it feels – yet again – like it could be a slippery slope.

Document Library default views are often built into what amounts to applications, or at least launch pads into application. It can be anything from simply adding some explanatory text in a CEWP at the top of the page (which is, after all, a Web Part Page) to full fledged functionality provided by additions of JavaScript using jsLink, DVWPs, JavaScript, CSS, etc. In many cases, the view page ends up looking little like what it started out as.

There simply has to be a way to keep these view pages in the mix, as considerable investment of time and money have gone into them. One would hope “telemetry” will show many people *choosing* to stick with “classic” (in this case meaning “functional” and “useful”) mode pages, even if all the “Working on it” stuff happens.

What I’m asking for in this post (Are these Dear Microsoft posts of mine merely rhetorical? I hope not.) is for a sincere attempt to hear what the concerns are. There are many times where people are feeling like a change to something new risks removing some of the exact reasons why the SharePoint platform has been successful in the past. Running Office 365 as a service can indeed be at odds to the successful methods used in Document Libraries, but understanding how to continue the exact patterns of enhancement that were encouraged in the past – by Microsoft- is critical.  Change can be good, but not if it undoes past investment and successful implementation.

I like the image that Brent Ellis (@Brentless) posted in the Yammer thread:

Do No Harm

Software development isn’t medicine, but still…

News Flash: Wandering Office 365 Waffle, Or “Who Moved My Waffle?”

Call it the waffle or the App Launcher or whatever you want (internally it has the CSS class ms-Icon–waffle2, so I think Randy Drisgill [@drisgill] is right, as usual), but if you use Office 365 or the soon to be available SharePoint 2016, you probably click on it dozens of times a day.

Recent changes to the Suite Bar (CSS classes start with suiteBar) have made it more responsive for different sized screens. This is a good thing, as the Suite Bar can now scale from a wide-screen desktop monitors down to a phone screen. How modern.

The implementation may confuse, though, so be prepared for some quizzical looks from your users.

Desktop Mode

Desktop Mode

Tablet Mode

Tablet Mode

Phone Mode

Phone Mode

As you can see, the waffle is where you’d expect it in desktop mode, and I get to see my Sympraxis Consulting logo as well.

The phone mode also seems to make sense. The logo is gone – there’s not really any room for it – and the icons are all hidden, albeit behind the dread ellipses rather than the hamburger most people are used to.

It’s the tablet mode that will probably throw your users. “Where my waffle?”, you might ask? Well, it hops over to the right, jumping over the Suite Bar title (“Sites”, “Outlook”, etc.) to hang out by the notifications icon (at least for now – the Suite Bar changes frequently).

It looks like the media query kicks in at 1024px, which may be the width of some of your users’ regular desktop screens, even in this day and age. Even if they have higher resolution monitors, they may not use their browser in full screen mode. (I’m a full screen guy myself.)

All in all, it’s no harm – but some of your users may cry foul. Be prepared for it. I’m seeing it in my own First Release tenant as well as in several non-First Release tenants as well.

Thanks for Stefan Bauer (@StfBauer) for the heads up on why this is happening.

Simple Expand/Collapse for the Quick Launch in SharePoint 2013 or SharePoint Online

Yesterday I helped my pal Marcel Meth (@marcelmeth) with a pretty simple little task, but everything’s simple if you know how to do it! We needed to add simple accordion-like expand/collapse functionality to the Quick Launch on the pages in a Site Collection. Because there were going to be a lot of links in the Quick Launch (mostly links to different views of lists), it was getting pretty cumbersome to wade through. By adding this expand/collapse capability, we could improve the user experience (UX). It’s little stuff like this that makes SharePoint usable. Never underestimate the power of a small tweak like this.

This code works on a Team Site on SharePoint Online in Office365 with its Quick Launch exposed in the normal way. Any other customization you have in place may interfere with this working. (Yadda, yadda, disclaimer, YMMV, etc.) I’m sure it will work for you – possibly with some tweaks – in any SharePoint 2013 or SharePoint Online site. You can add this script to a single page or to the master page if you’d like it to work on all pages in the Site Collection.

// Find all the top level links in the Quick Launch that have children
var topLevelLinks = $("div[id$='QuickLaunchMenu'] > ul > li:has('ul') > a");

// Prepend the little "twiddle" icon to each top level link
topLevelLinks.prepend("<span class='ms-commentexpand-iconouter ql-icon'><img alt='expand' src='/Comm/Comms2/_themes/1/spcommon-B35BB0A9.themedpng?ctag=2' class='ms-commentexpand-icon'></span>");

// We're starting with all of the sections collapsed. If you want them expanded, comment this out.
topLevelLinks.closest("li").find("> ul").hide();

// Set up for the click even of on the top level links
topLevelLinks.click(function(e) {

  // We're going to stop the default behavior
  e.preventDefault();

  // Find the elements we need to work with
  var childUl = $(this).closest("li").find("> ul");
  var isVisible = childUl.is(":visible")

  // If the section is visible, hide it, and vice versa
  if(isVisible) {  

    // Replace the icon with its antitheses
    $(this).find(".ql-icon").replaceWith("<span class='ms-commentexpand-iconouter ql-icon'><img alt='Expand' src='/Comm/Comms2/_themes/1/spcommon-B35BB0A9.themedpng?ctag=2' class='ms-commentexpand-icon'></span>");
    // Hide the child links by sliding up. Note: You could change the effect here.
    childUl.slideUp();

  } else {

    // Replace the icon with its antitheses
    $(this).find(".ql-icon").replaceWith("<span class='ms-commentcollapse-iconouter ql-icon'><img alt='Collapse' src='/Comm/Comms2/_themes/1/spcommon-B35BB0A9.themedpng?ctag=2' class='ms-commentcollapse-icon'></span>");
    // Show the child links by sliding down. Note: You could change the effect here.
    childUl.slideDown();

  }

});

Requesting Your SharePoint “UI Hacks”

I am putting together a presentation talking about UI hacks that we all need to do in order to accomplish everyday UI customizations that our customers – internal  or external – require. For this one I want to limit it to SharePoint 2013 and/or SharePoint Online (Office365). Another way to think of it is how and why we brand SharePoint today on premises and in the cloud; not just things that people want cosmetically, necessarily, but stuff that is hard to do and must be done.

I’d like to collect ideas from all of you out there, which I will collate into some slides (with credit given, of course!). I posted a quick tweet about this and already got a few replies, so I figured a blog post would be a good way to gather information as well.

In thinking about this, I’ve come up with some broad buckets:

  • Inconsistencies
  • Documentation Gaps
  • Document Object Model (DOM) Changes
  • Missing Functionality (Oft Requested)

I’ve already got a few items of my own in each of those categories, but I’d like the presentation to be representative of what we all have to deal with, not just me. If you think I’m missing a bucket, let me know your ideas on that, too.

Let’s use this post’s comments to capture as much as possible. If you’d rather email me directly, you can use the Contact form. When I have a decent amount of content collected, I’ll come up with a way to share it on some level. (The actual purpose of this is classified.)

Thanks for your help on this.