This is a quick reference guide for using CSS to modify the Office 365 Suite Bar that lives at the top of SharePoint Online sites. While fleshing out a larger CSS reference / light branding guide that will be focused on IT Pro’s, it occurred to me that this portion might merit its own post. I will link to the larger post once it is complete.
Given the recent announcements around Office 365 Themes (http://blogs.office.com/2014/09/02/personalize-office-365-experience-selecting-themes/), I’m not yet sure what (if anything) might change, but I will keep an eye out for necessary updates.
Update (9/12/2014): The changes that were implemented to support Office 365 themes do not appear to have an impact on the structure/classes/etc. of the Office 365 Suite bar. However, it did bring my attention to the fact that I had not modified the hover state of the buttons behind Outlook, Calendar, etc. Additional section added below.
This section contains elements found within the Office 365 Suite Bar located at the very top of a SharePoint Online site. For us, there was a desire to minimize the “weight” of this section in the context of the larger UI – while retaining its functional state.
Here is the original Office 365 Suite bar, prior to modification:
The requirement was to remove the Office 365 logo, change the colors the links (Outlook, Calendar, etc.), apply a custom graphic to the background and change the colors of the area to the right of the profile picture. Here’s the same bar after a few additions to the custom CSS.
For reference purposes, here’s a quick overview of the classes / elements that were modified.
Class / Element | Description |
.o365spo.o365cst.o365cs-base .o365cs-spo-topbar | Defines the properties of the area to the right of the profile picture (containing “settings” and “help” buttons in the Office 365 Suite Bar) |
.o365spo.o365cst.o365cs-base .o365cs-topnavBGColor | Defines the properties of the background for the Office 365 Suite Bar |
.o365cs-base .ms-bcl-w, .o365cs-base .ms-bcl-w-h:hover | Defines the properties of the up-facing arrow, pointing to the “Sites” link in the Office 365 Suite Bar. |
.o365spo.o365cst.o365cs-base .o365cs-topnavText, .o365spo.o365cst.o365cs-base .o365cs-topnavText:hover | Defines the properties of the text links found in the Office 365 Suite Bar (Outlook, Calendar, etc.) |
.o365spo.o365cst.o365cs-base .o365cs-o365logo | Defines the properties of the Office 365 logo found in the upper left corner of the Office 365 Suite Bar |
.o365spo.o365cst.o365cs-base .ms-bgc-td-h:hover |
Defines the properties of the square buttons behind the text links upon mouse-over |
Area to the Right of the Profile Picture |
First up was to change the background of the area to the right of the profile picture. Despite living within the suite bar, this area is meant to visually appear as an extension of the CUI bar beneath it. That section will be addressed later in a future post. |
Code here:
[code language=”css”]
.o365spo.o365cst.o365cs-base .o365cs-spo-topbar { background-color: #000000 !important; } [/code] |
Office 365 Suite Bar Background |
Next, I changed the background of the O365 Suite bar. Initially, I had a flat color defined (via the ‘background-color’ reference), but later decided to use a custom graphic as the background.The image that was used is located in “/_catalogs/masterpage/myfolder/Images/” and since my CSS document lives in a peer folder (/_catalogs/masterpage/myfolder/Styles), I was able to reference the image in the format below. In a pinch you can specify the full path URL of your image. |
Code here:
[code language=”css”]
.o365spo.o365cst.o365cs-base .o365cs-topnavBGColor { /*background-color: #000000 !important;*/ background-image:url(../Images/orback.png) !important; } [/code] |
Arrow Indicator |
You’ll notice a small upward-facing arrow point to the “Sites” link in the Suite bar, but its default color wasn’t ideal once the background was changed. Here is the reference to change its color to something more suitable. |
Code here:
[code language=”css”]
.o365cs-base .ms-bcl-w, .o365cs-base .ms-bcl-w-h:hover { border-color: #666666 !important; } [/code] |
Office 365 Suite Bar Links |
Here is how to change the colors of the links contained within the O365 Suite Bar. In this case, I used the RGB + Alpha color format instead of the standard hex. |
Code here:
[code language=”css”]
.o365spo.o365cst.o365cs-base .o365cs-topnavText, .o365spo.o365cst.o365cs-base .o365cs-topnavText:hover { color: rgba(0,0,0,0.25) !important; } [/code] |
Office 365 Suite Bar Links |
Next, we removed the Office 365 logo (and link) from the upper-left corner. In this environment, neither the logo or its link added value to my intranet users. |
Code here:
[code language=”css”]
.o365spo.o365cst.o365cs-base .o365cs-o365logo { display:none !important; } [/code] |
If you want to retain the logo and the link, you can simply change the color to whatever suits your design or replace it with one of you own.
Code here: [code language=”css”] .o365spo.o365cst.o365cs-base .o365cs-o365logo {color: #000000 !important; } [/code] |
Office 365 Suite Bar Buttons – Hover |
Last in this section was changing the color of the buttons in the Office 365 Suite Bar when they are moused over. In this case, I’ve changed the default blue to an orage (#fd8b08). |
Code here:
[code language=”css”]
.o365spo.o365cst.o365cs-base .o365cs-o365logo { display:none !important; } [/code] |
If you want to copy & paste to get a starting point, either grab the individual references above or the whole section here:
[code language=”css”]
.o365spo.o365cst.o365cs-base .o365cs-spo-topbar {
background-color: #000000 !important;
}
.o365spo.o365cst.o365cs-base .o365cs-topnavBGColor {
background-image:url(../Images/orback.png) !important;
}
.o365cs-base .ms-bcl-w, .o365cs-base .ms-bcl-w-h:hover {
border-color: #666666 !important;
}
.o365spo.o365cst.o365cs-base .o365cs-topnavText,
.o365spo.o365cst.o365cs-base .o365cs-topnavText:hover {
color: rgba(0,0,0,0.25) !important;
}
.o365spo.o365cst.o365cs-base .o365cs-o365logo {
display:none !important;
}
.o365spo.o365cst.o365cs-base .ms-bgc-td-h:hover {
background-color: #fd8b08 !important;
}
[/code]