CTS – Your Technology Partner

SharePoint 2013 – Branding the Top Bar and the Importance of Browser Testing

Written by Craig Butler on March 5, 2013

twitter_trace_thumb

By Trace Armstrong

The SharePoint 2013 upgrades are numerous but the one area that received a huge facelift is branding. The Design Manager as well as the HTML5/CSS3 compatibility gives developers a wide range of design choices in their SharePoint projects. However, one question that has come up with several clients is do they have the ability to change the top bar that helps support the ribbon?

Screen Shot One

clip_image002

Using developer tools in Internet Explorer 9, Firefox, Chrome, and Safari, I quickly discovered by targeting the #suiteBarLeft ID and using the background-color: #012D5C; property using CSS, I could successfully change the color of the top bar to this:

Screen Shot Two

clip_image004

The change worked correctly in the aforementioned browsers, however in Internet Explorer 8 the top bar would load my intended color in Screen Shot Two, then immediately change back to the default color in Screen Shot One. Using IE Developer Tools in Internet Explorer 8 Browser and Document Modes, I discovered an additional class that only Internet Explorer 8 recognizes and uses:

“.ms-core-needIEFilter #suiteBarLeft {
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#ff0072c6,endColorstr=#ff0072c6);
}”.

This line of CSS will override any color changes developers made to the top bar in Internet Explorer 8. To override it, I added this line of CSS to my custom CSS file referenced in the master page:

.ms-core-needIEFilter #suiteBarLeft {
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#ff012D5C,endColorstr=#ff012D5C);
}.

This line of CSS corrects the issue in Internet Explorer 8 and will bring consistency in the branding scheme to all browsers.

This is a classic issue illustrating the importance of performing browser compatibility tests. In this case, Internet Explorer 9, Firefox, Chrome, and Safari all displayed the top bar as intended but Internet Explorer 8 did not. Without a thorough browser check, this error would have gone unnoticed.

Comments

comments