I have a custom .spcolor file which changes the colour of the suite bar, amongst other things. Yesterday, it worked fine, everything was good.

I loaded up SharePoint this morning (no changes made) and only the suite bar has reverted to the standard O365 theme, the rest is fine. I've gotten used to Microsoft doing strange things and seemingly the ghost in the machine running rampant at times but I've reapplied the theme (change the look etc..) and still nothing. Ideas?

  • I recall reading a tweet that this is intended behavior, and updated recently in SP Online. Only option is to add a custom CSS stylesheet to override the color.
    – Boland
    Commented Aug 25, 2015 at 2:34
  • 1
    Excellent. . . SharePoint does a lot of things well, none of them seem to be geared towards developers lol. Thanks for your help
    – DylanB
    Commented Aug 25, 2015 at 3:11
  • Back in SP2007 there was zero documentation and zero tools. Life is easier now... And we have an awesome library, OfficeDevPNP.
    – Boland
    Commented Aug 25, 2015 at 4:24
  • Definitely on the rise, but there's a still a lot of mixed feelings
    – DylanB
    Commented Aug 25, 2015 at 4:27
  • @Boland, I've been mucking around with the CSS and the changes don't stick without committing... !important(acide...?). Is there a better way without adding ID's to everything (which would be a giant pain in the backside)?
    – DylanB
    Commented Aug 25, 2015 at 5:29

3 Answers 3


I didn't see this coming but at the moment I'm going with this override in my Alternate CSS:

<style type="text/css">
 .o365cs-nav-centerAlign, .o365cs-nav-leftAlign, .o365cs-nav-rightAlign, #O365_TopMenu, #O365_MainLink_NavMenu{
    background-color: #FF0202;

I just had this happen too. The spcolor file uses #suiteBarLeft and #suiteBarRight while it appears O365 changed all the classes and id's in the suite bar so our colors don't get applied anymore.


The resolution to this was to add an additional CSS class to set the suitebar back to its intended colour.

The steps are:

  1. Navigate to Site Content --> Style Library --> desired language

  2. Create a new CSS file (if you already have a custom file you can append to that)

  3. Add the following CSS styles #O365_NavHeader, .o365cs-nav-rightMenus, #O365_MainLink_NavMenu
  4. Change the colour to suit your theme, note because Office365 writes the default values very specifically I had to put !important after every change to make it stick (not ideal)
  5. Save the CSS file
  6. Navigate to your masterpage file
  7. Add the CSS reference <link href="../Style Library/en-us/yourCssFolder/yourStyles.css" rel="stylesheet" type="text/css" /> just above the placeholder with ID PlaceHolderAdditionalPageHead
  8. Save your masterpage and refresh, the styles should be applied

This was a bit of a pain but should work until MS change their mind again.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.