When creating an spcolor-file (and a composed look bound to this file) we see an error in the rendering in our Office 365 tenant.

I think the issue is related to the new SuiteBarin Office 365 (App Launcher). The problem is that the App Launcher icon turns to the same color as the whole SuiteBar and hence there is no indication that there is an icon there to be clicked.

To clarify, this is how the icon should look:

enter image description here

But as soon as we apply a custom theme, the grey color surrounding the nine dots turns to the same color as the background of the suite bar.

Can this be fixed with CSS, or is there an even better solution?

  • This 9 dots is a icon that have transparency, my idea is that, with this image try remove the transparency and set color of according with your preferences. already tried this practice?
    – b1c10
    Commented Dec 16, 2014 at 14:09
  • The thing is that you can change the color of the dots (well the grey background really) from the O365 branding page, but as soon as you apply a custom theme this stops having any effect. So I would wish to not apply any custom Css on top of that Commented Dec 16, 2014 at 14:51
  • What theme you are using to reproduce ? Commented Dec 16, 2014 at 17:15
  • 2
    I'm using a custom theme, built with the custom color palette tool, using the Seattle master so nothing fancy Commented Dec 16, 2014 at 17:53

1 Answer 1


I'm afraid there is no better solution than to use CSS:

To fix the icon in the left corner via CSS is pretty much straight forward because it's no icon is just a character out of the Office 365 icon font.

    color: lime;

The small css will turn the icons into lime. (OK it doesn't look nice but shows perfectly how they are colored).

Suite Bar Icon with modified color

Fonts have a huge benefit over images because they can be customized in any color you like to have without changing the image. The icon fonts also save bandwidth and are widely supported. Microsoft added the font support for custom font in IE 5.5 but the fonts had to be in a Microsoft specific format at this time.

Just in case you have a problem with the gear icon too. Here is the code to change those too: /* Gear icon in suite bar */ #O365_MainLink_Settings{ color: lime; }

 /* Question mark in suite bar */
     color: lime;

This will then look like this:

Gear and Help Icon in Suite Bar

Another option to brand those icons all at once is to assign a color to the specific class.

    color: lime;

This will only align with the buttons. The text won't be affected. Remove the button in front of .o365cs-nav-button and you set the color for the text all elements too.

  • 1
    Thanks for you answer! Maybe you are right, that CSS is the only way to go here. But I still think there must be some sort of bug in the theme engine with the new suite bar, we should not need to apply CSS on top of the spcolor file. It kind of kills many parts of the idea of using a theme. Commented Dec 16, 2014 at 17:56
  • 1
    The themes generated by the so called "Theming engine" are special and in some cases causes more glitches in the design then works well. The suite bar is newly introduced in the last couple of month and evolved. I don't think the involved the theming engine in the same way. Commented Dec 16, 2014 at 18:09

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.