CSS Reference: Branding the Office 365 Suite Bar

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.

Office 365 Suite Bar

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:

Office 365 Suite Bar - Before

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.

Office 365 Suite Bar - After

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.
o365Bar-SettingsArea
Code here:

          .o365spo.o365cst.o365cs-base .o365cs-spo-topbar {
          background-color: #000000 !important;
          }
      
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.
SuiteBar Link Color
Code here:

.o365spo.o365cst.o365cs-base .o365cs-topnavBGColor {
    /*background-color: #000000 !important;*/
    background-image:url(../Images/orback.png) !important;
}
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.
SuiteBar Arrow
Code here:

.o365cs-base .ms-bcl-w, .o365cs-base .ms-bcl-w-h:hover {
    border-color: #666666 !important;
}
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.
SuiteBar Link Color
Code here:

.o365spo.o365cst.o365cs-base .o365cs-topnavText,
.o365spo.o365cst.o365cs-base .o365cs-topnavText:hover {
    color: rgba(0,0,0,0.25) !important;
}
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.
SuiteBar Remove Logo
Code here:

.o365spo.o365cst.o365cs-base .o365cs-o365logo {
	display:none !important;
}
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:

.o365spo.o365cst.o365cs-base .o365cs-o365logo {
	color: #000000 !important;
}
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).
Office 365 Suite Bar - Buttons on Hover
Code here:

.o365spo.o365cst.o365cs-base .o365cs-o365logo {
	display:none !important;
}

If you want to copy & paste to get a starting point, either grab the individual references above or the whole section here:

.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;
}
Advertisements

1 Comment on CSS Reference: Branding the Office 365 Suite Bar

  1. I have a template that uses o365cs-base o365cst o365cs-contextMenu classes like you mention here. I want to copy the styling to a new file so MS can’t change it on me.
    Where can I find this styles definitions?
    It is not in core15.

    Thank you in advance

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: