Branding the suiteBar in SP 2013

Question

I need to rebrand default look of sharepoint suiteBar. I have no problems with logo or custom links but I need something more. I need to change whole look of suiteBar - background color, height, different placement of elements etc. - basically suiteBar can't look like sharepoint suiteBar :) and I have to do this for all site collections. What is more this solution need to be flexible - when I need another link or different color I will just change it and then all site collections get new masterpage with changes.

Is such thing possible? Not only add links to suiteBar but rework it completely using default sharepoint controls and functions which are located in suiteBar

Answer 1

If you're on on-prem environment, you can customize the SuiteBar, there's a delegate control for the SuiteBar which you can override.

For SP2013 online environment, you'd need to use jQuery to add links to it and CSS for changing color, font and styles.

Answer 2

The steps for changing the colour in SharePoint Online 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 just above the placeholder with ID PlaceHolderAdditionalPageHead

8. Save your masterpage and refresh, the styles should be applied

Microsoft have changed the CSS classes recently but these are valid currently.