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

25 thoughts on “Customizing the SharePoint Online App Launcher”

  1. Great post. Could you tell me how you can access this css file that you can apply the changes to, or how do you reference a custom css file in the solution? Thanks!

    1. You can open up your SharePoint site in SharePoint Designer and navigate to the Style Library. From there you can create a new CSS file and add your changes. Or using a mapped network drive or FTP tool you can add a CSS file that way. Or directly upload the file through the browser. Save and publish the file, then link to it from the master page (.master) file, from the HTML master page (.HTML) file if you are using Design Manager or from the Alt CSS URL setting in Site Actions -> Site Settings -> Master Page.

  2. Great post! I was able to create a css file, save it to site assets, and link to it from alternate css from Master Page. When I am logged in as myself (admin) I see the removed apps from the launcher but when someone else goes to the site they still see the apps.

        1. If there is a workflow attached to the file it may be in limbo waiting for an approval or it was rejected. Make sure the file is checked in and that there is no outstanding publishing process already in place where the file needs to be approved.

          1. I was able to get the my apps not to show but I added all the tiles I wanted to hide and Home button in one CSS. Home and my apps are gone but the tiles still show. Is there a conflict in the CSS that I am not seeing?

            style type=”text/css”

            .ms-core-listMenu-horizontalBox li.static > a
            {
            display: none !important;
            }
            .ms-core-listMenu-horizontalBox li.static > ul a
            {
            display: block !important;
            }

            #O365_AppTile_Mail {
            display: none;
            }
            #O365_AppTile_Calendar {
            display: none;
            }
            #O365_AppTile_People {
            display: none;
            }
            #O365_AppTile_Newsfeed {
            display: none;
            }
            #O365_AppTile_Documents {
            display: none;
            }
            #O365_AppTile_Tasks {
            display: none;
            }
            #O365_AppTile_WordOnline {
            display: none;
            }
            #O365_AppTile_ExcelOnline {
            display: none;
            }
            #O365_AppTile_PowerPointOnline {
            display: none;
            }
            #O365_AppTile_OneNoteOnline {
            display: none;
            }
            .o365cs-nav-navMenuMyApps {
            display: none;
            }
            /style

          2. I was using internet explorer to test. But I was using a Surface. But actually now that I look again it appears to have worked. I must not have waited long enough. Thanks for your help!

  3. Sorry to keep bugging you about this. I finally see what is going on. The css styles shows for me as the admin but not the read only users. I made sure the css exists in the style library, published as major version and pointed to it from the alt css style from the master page. I am doing this at one site only not site collection level. I am not referencing it from the master pages and have not made any edits to those. What else should I check that would cause other users not to see the styles? Thanks for your help.

    1. Do the read-only users have access to the top level site? If the CSS file is stored in a site that they don’t have read rights to, their browser won’t be able to download the CSS file.

        1. I am starting to run out of suggestions. Here are some things you can check:

          Is there anything caching files on the server?
          Can you duplicate this bug in a new site collection?
          Can you duplicate this bug if you create a new read only account and test it out yourself on the same computer that you see the CSS just fine as an admin?
          Is the bug present both inside and outside of your network?
          Is the CSS file referencing anything that is outside of SharePoint (Office 365 SPO sites don’t like linking to external files)?
          If you make a change to the CSS file, do you see the changes?
          If you add other CSS to the file that has nothing to do with what you have done so far, do you see the changes and do the read-only users see the changes?
          If you look at the source code for a read-only view, do you see that the browser is loading the CSS file?

          1. Is there anything caching files on the server? I will check
            Can you duplicate this bug in a new site collection? I will check
            Can you duplicate this bug if you create a new read only account and test it out yourself on the same computer that you see the CSS just fine as an admin? yes, the new test user still sees the default app launcher
            Is the bug present both inside and outside of your network? yes
            Is the CSS file referencing anything that is outside of SharePoint (Office 365 SPO sites don’t like linking to external files)? no
            If you make a change to the CSS file, do you see the changes? yes
            If you add other CSS to the file that has nothing to do with what you have done so far, do you see the changes and do the read-only users see the changes? yes they see “Home” being hidden on the site but not the app launcher changes
            If you look at the source code for a read-only view, do you see that the browser is loading the CSS file? yes

            I really appreciate your help. I will stop bugging you. It must be something specific to our environment. Thanks again!

          2. Double check the CSS selectors. I just made some updates to the code in the post because since I wrote this there have been changes and not all of the CSS statements were working as is anymore. I had to add to the selectors to get them working again. 🙂

  4. We have multiple sites and would like to hide some tiles in all these sites. Is there a way to add the css to a location that will be inherited by all existing sites and when a new site is created or do we need to do this in every site?

    1. If you are using a publishing site there is an option in the Master Page settings (Site Actions -> Site Settings -> Master Page) to link to an Alt CSS URL. You can set your CSS file here and select the option for all subsites to inherit the setting (“Reset all subsites to inherit this alternate CSS URL”).

  5. Can you rename the existing tiles ? for example “OneDrive” tile to “OneDrive for Business” or “Video” to “Video (Self Service)” or “Sway” to “Sway, no IT Support/self service” etc….

    1. Yes you can but you have to limit your text to two lines unless you want to have to use more CSS to modify the size of the tiles. For example “OneDrive for Business” fits fine but “Sway, no IT support/self service” cuts off the word “service”. You would need to trim it down to “Sway (Self Service)”. Here is the code for the three examples you cited:

      #O365_AppTile_Documents span span:after {
      content: ” for Business”;
      }

      #O365_AppTile_Video span span:after,
      #O365_AppTile_Sway span span:after {
      content: ” (Self Service)”;
      }

      1. Great Article. article ! I was fascinated by the info – Does anyone know where my business might be able to find a blank CT JD-CV-3a document to fill in ?

Leave a 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.