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!

Using the SharePoint Color Palette Tool to Create Customized Composed Looks

At the great SharePoint Evolution Conference last week, someone – I wish I could remember what session it was! – mentioned this great little tool. It helps you to create a very detailed theme for SharePoint 2013. You can save the file into a .spcolor file, which you can upload to the Theme Gallery in your SharePoint Site Collection.

Go to the Microsoft Download Center to grab the SharePoint Color Palette Tool. It’s a quick download and install. Once you have it loaded and launch it, you’ll see this:

The color palette tool provides color palette functionality for use with SharePoint designs.

SharePoint Color Palette Tool

In my example below, you can see an example of a customized theme. I found a photo of the lovely Sonya Koptyev (@SonyaKoptyev) presenting at SPC last year to use as my background and I made one other small color change to the suite bar. Then I saved the file as Sonya.spcolor.

The Sonya Color Palette

The Sonya Color Palette

Next we upload the .spcolor file to the Themes Gallery. (Site Settings -> [Web Designer Galleries] Themes) In this case, I uploaded my .spcolor file to the 15 folder because it’s built for that version (2013) of SharePoint.

Theme Gallery

Theme Gallery

Once you’ve uploaded your new palette file, you can create a new Composed Look with it (Site Settings -> [Web Designer Galleries] Composed looks). The image below shows all of the out-of-the-box Composed Looks.

The Composed Looks Gallery contains all of the looks designed for your Site Collection.

Composed Looks Gallery

When you create a new Composed Look, you specify a Master Page URL, a Theme URL, an Image URL, and a Font Scheme URL. The combination of these components make up a Composed Look.

In the screenshot below, you can see how I’m creating a new Composed Look using my Sonya.spcolor file.

Sonya Composed Look

Sonya Composed Look

Once I’ve saved the new Composed Look, I can apply it to my site ((Site Settings -> [Look and Feel] Change the look). After I select my new Composed Look, voila! A quick new look for my site!

Previewing the Sonya Composed Look

Previewing the Sonya Composed Look

But wait. “Where’s my background image?”, you’ll probably ask. I certainly did.

The background image you select in the SharePoint Color Palette Tool doesn’t automagically get saved in the .spcolor file. That’s what the Image URL is for in the Composed Look. So upload that image (in my case, the lovely Sonya presenting) and add the URL to it in the Image URL for your Composed Look.

Adding the Sonya image to the Composed Look

Adding the Sonya image to the Composed Look

And now: voila for real!

Previewing the Sonya Theme on my Team Site

Previewing the Sonya Theme on my Team Site

The SharePoint Color Palette Tool is just a v1.00 tool, but it seems to work reasonably well. Let’s hope that Microsoft builds something like this right into the UI rather than keeping it a separate tool.

By the way, the reason I still have the image of Sonya presenting is that I love the quote she had in her slide:

 

 

Upgrading Your jQueryUI Custom Theme

jQuery ThemeRollerI have always wondered what would happen if I created a custom theme for jQueryUI using the excellent ThemeRoller tool and then wanted to upgrade my version of jQueryUI. It always seemed like the odds were that the existing CSS and accompanying image files wouldn’t change too much (I’ve found that there’s far less disruption in an upgrade to jQueryUI than there is in an upgrade to jQuery itself), but at a certain point, there were bound to be changes that mattered enough to cause a problem.

I haven’t run into any of those problems, but as I’m carefully upgrading jQueryUI in a client installation, I don’t want to make any egregious mistakes. (The buck stops with me no matter how crappy a tool I’m using works.)

I decided to Bingle to see if there was a converter that some kind soul may have built out there somewhere. Lo and behold, it’s even easier than that. I found a nice little answer over on StackExchange that shows how. Thanks to StackExchange user fbuchinger for that. Gotta love the Internet.

If you open your custom CSS file and scroll down to the second main section, you’ll see something like this:

/*!
 * jQuery UI CSS Framework 1.8.20
 *
 * Copyright 2012, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Theming/API
 *
 * To view and modify this theme, visit http://jqueryui.com/themeroller/?ffDefault=Verdana,Arial,sans-serif&fwDefault=normal&fsDefault=1.1em[...SNIP...]cornerRadiusShadow=5px
 */

Assuming that you haven’t customized your theme manually since downloading it (probably a big assumption, actually) this link in the CSS file allows you to go right back to where you started in the ThemeRoller. Simply copy that link and paste it into a browser window and the ThemeRoller will load up your custom theme just as you created it.

My guess is that this would be a bit more tenuous depending on how many versions removed you are from the current one, but I’ve had no problems today. This is also helpful if you create a theme and realize a few days later that you missed that baby blue hover color that only shows up with one of the widgets or something.

[important]I just realized that the “To view and modify this theme” link may show up in different places in the CSS file depending upon your version. Do a search – it should be there somewhere.[/important]

SharePoint 2010 Theme for WordPress

I got an interesting email today.

I work with a company called Portal Front Hosting, a dedicated SharePoint hosting provider, and we have a new WordPress theme that is free to download and is inspired by SharePoint 2010. The link to a preview and download the theme can be found here: http://wordpress.org/extend/themes/sharepointforwordpress. Since you discuss SharePoint on your blog, would you consider sharing some information about our theme there? If not, any feedback about it would be great as well. Also, feel free to contact me by e-mail if you have any questions or concerns.

I emailed back and assured Heather that I would indeed mention this on my blog. I use hosted WordPress, so I couldn’t use the theme if I wanted to, but I’m sure there are some of you out there who might want to. I would think that most SharePoint people who use WordPress for blogging probably *don’t* want their blogs to look like SharePoint!

image

New Styling for My Blog

If you are visiting for the first time in a while, yes, you are in the right place.  WordPress came out with the new Neutra theme yesterday, and I decided that it was time for a facelift.  I tried changing the theme once before, and ended up backing off on the change. This time, I think I’ll stick with it.

I like this Neutra theme becuase it’s very clean and gets me back to dark text on a white background rather than the white text on dark background that I’ve had for the last year or more.   In all that time, I had one complaint about the color scheme and one atta boy, so there wasn’t a compelling user-driven reason to switch.  However, with all of the posts I do which contain graphics, generally best viewed on a white background, it seemed like this type of theme would work better.

So, welcome to the new look, and let me know what you think!