Customizing the SharePoint Online App Launcher

The waffle, the grid, the thingie in the left corner of your Suite Bar… the SharePoint Online (SPO) app launcher has many descriptions and is one of the latest changes made to SPO.  It gives the user fast access to apps and even allows you to customize what is listed and the order. It is a pretty nifty thing.  But what if you want to brand it? Or take away an option because you don’t want all of your users accessing it?

The big disclaimer

As of the writing of this blog post, you can only do the following customizations in your SPO sites and not in your full Office 365 experience.  As of right now customization options in Office 365 are highly limited and you can’t add your own custom CSS.  That may change one day (or likely not) but if you want your SharePoint sites to stand out from the rest of Office 365, the following may be helpful.

***UPDATE October 5, 2015***

The screenshots in this post are from when this post was originally written (January 2015) and reflect what was available in Office 365 at that time. As more options have been added, the ID chart below has been updated. If there are additional launcher apps that you don’t see reflected in the chart below, please leave a comment so I can update this post accordingly. Thanks!

Remove options from the SPO app launcher

You can personally customize the app launcher by selecting the waffle/grid icon and then selecting the My apps link in the lower right corner of the app launcher navigation system that pops up. You can also click-hold-drag apps around to change the order.  But what if you want to make a change globally for all of your users  – as best as I can tell there is no global app launcher settings to show or hide apps. However, this is easy to do with a little CSS.

Any item in the app launcher can be hidden from view.  For example, check out the following before and after screenshots for removing the “Outlook” option in the app launcher:

SharePoint Online App Launcher

“Outlook” was removed by adding the following CSS style statement to a custom CSS file reference by the SharePoint site:

#O365_AppTile_Mail {
  display: none;
}

This same style statement can be used to hide any of the apps within the launcher. The following chart outlines the necessary selectors:

Link CSS Selector
Mail (Outlook) #O365_AppTile_Mail
Calendar #O365_AppTile_Calendar
People #O365_AppTile_People
Newsfeed #O365_AppTile_Newsfeed
OneDrive #O365_AppTile_Documents
Sites #O365_AppTile_Sites
Tasks #O365_AppTile_Tasks
Word Online #O365_AppTile_WordOnline
Excel Online #O365_AppTile_ExcelOnline
PowerPoint Online #O365_AppTile_PowerPointOnline
OneNote Online #O365_AppTile_OneNoteOnline
Admin #O365_AppTile_Admin
Delve #O365_AppTile_OfficeGraph
Video #O365_AppTile_Video
Office 365 Store #O365_AppTile_OfficeStore
Sway #O365_AppTile_Sway

Reduce the size of the apps

Maybe you wish the apps weren’t so chunky and want something more streamlined.

.o365cs-nav-appItem .o365cs-nav-appTileMedium,
.o365cs-nav-appItem .o365cs-nav-navMenuMyApps {
  height: 40px;
}
.o365cs-nav-appItem .o365cs-nav-appTileIcon {
  display: none;
}

Here is the result:

Streamlined SharePoint Online App Launcher

Or you can go the other way and only show icons:

.o365cs-nav-appItem .o365cs-nav-appTileMedium,
.o365cs-nav-appItem .o365cs-nav-navMenuMyApps {
  height: 75px;
  width: 75px;
}
.o365cs-nav-appItem .o365cs-nav-appTileTitle {
  display: none;
}
.o365cs-nav-appItem .o365cs-nav-appTileMedium .o365cs-nav-appTileIcon {
  margin-top: 10px
}
/* Optional - restricts the width of the drop down area */
body .o365cs-rsp-off.o365cs-newAL-off.o365cs-nav-navMenu {
  max-width: 600px;
}

SharePoint Online App Launcher no titles

Or if you just want to mess with people:

.o365cs-nav-appItem .o365cs-nav-appTileTitle  {
  transform: rotate(-90deg);
  bottom: 45px;
  left: -28px;
}

SharePoint Online App Launcher goes sideways

Change the app block branding

There are several things you can do for the branding of the app launcher.  Here are a few examples.

Change the background color

To change the color of all apps, use the following:

.o365cs-nav-appTile {
  background: black !important;  /* !important needed to override inline SharePoint style */
}

SharePoint Online App Launcher one color

To change the color of only some apps, you will need to combine the IDs in the chart above with the style statement just provided. Notice there is no space between the ID and the class.

#O365_AppTile_Mail.o365cs-nav-appTile {
  background: black !important;  /* !important needed to override inline SharePoint style */
}

SharePoint Online App Launcher one color for one app

Perhaps you are an Apple fan girl/boy stuck in a Microsoft world. You can do ode to Apple:

body .o365cs-rsp-off.o365cs-newAL-off.o365cs-nav-navMenu  {
  background: #4D4D4D;
}
.o365cs-nav-appItem .o365cs-nav-appTileTitle span {
  text-align: center;
}
.o365cs-nav-appTileMedium {
  background: transparent !important;  /* !important needed to override inline SharePoint style */
}

SharePoint Online App Launcher Apple style

Or get jiggy with it and add stripes:

.o365cs-nav-appItem .o365cs-nav-appTile {
  border-radius: 7px;
  background: repeating-linear-gradient(45deg,rgba(0, 0, 0, 0.2),rgba(0, 0, 0, 0.2) 10px,rgba(0, 0, 0, 0.3) 10px,rgba(0, 0, 0, 0.3) 30px)
}

SharePoint Online App Launcher with stripes

Add commonly seen UI effects

Use this CSS to round the corners of the app blocks:

.o365cs-nav-appTile {
  border-radius: 7px;
}

Or this to add the inset shadow look:

.o365cs-nav-appTile {
  box-shadow: inset 0 0 0 1px #27496d,inset 0 0px 20px #193047;
}

The following will get rid of the slight pop-out hover effect the app launcher has by default and switches back to a more traditional background color change.

.o365cs-nav-appItem .o365cs-nav-appTileHovered,
.o365cs-nav-appItem .o365cs-nav-appTile:focus{
  outline-width: 0;
  background: black !important; /* !important needed to override inline SharePoint style */
}

Here is a screenshot of all three of the above changes in place:

SharePoint Online App Launcher common UI effects

 Manipulate the “My apps” text

There are several things you can do with the My apps text in the lower right corner.

Hide “My apps”

.o365cs-nav-navMenuMyApps {
  display: none;
}

Change the text to say something else

.o365cs-nav-navMenuMyApps a span {
  display: none;
}

.o365cs-nav-navMenuMyApps a:before {
  content: "Customize my apps";
}

SharePoint Online App Launcher change text

Make it look like a button

.o365cs-nav-navMenuMyApps a {
  display: block;
  background: #fff;
  padding: 5px 15px 7px;
  border-radius: 7px;
  box-shadow: 0 1px 7px rgba(0, 0, 0, 0.4)
}

.o365cs-nav-navMenuMyApps a:hover {
  background: #0059BD;
}

.o365cs-nav-navMenuMyAppsLink.ms-fcl-b.ms-fcl-tp-h.o365button {
  color: #fff;
}

SharePoint Online App Launcher make button