Office 365 SuiteBar ignores spcolor theme

Question

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?

Answer 1

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.

Answer 2

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;
}
</style>

Answer 3

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.