CSS Reference: SharePoint Online & 2013 Branding for IT Pros

Written by Consulting, Technical

While there are plenty of reasons not to apply heavy branding to collaboration-focused SharePoint sites, sometimes you (or your customers) want to apply just enough branding to make the site feel at home in your environment. The following sections provide examples of some of the CSS classes & elements that control the feel of many of the “big ticket” items in an out-of-the-box SharePoint Online or SharePoint 2013 site.

Plain-English, IT Pro-oriented guidance was hard enough to find that I figured this would make a worthwhile “Consultant Toolbox” post.

For background purposes, everything listed below was implemented recently to an intranet built on SharePoint Online (Office 365) by applying a custom CSS to the root site collection (Site Settings > Master Page > Alternate CSS URL). The site utilizes the default masterpage (Seattle.master). Not wanting to take away from the billable time of purpose-built SharePoint devs or designers, my intent was get something in place as quickly as possible and carry on with the mission of the day.

Specifically, I will address the following:

  • Office 365 Suite Bar
  • CUI Bar
  • Title Area & Site Logo
  • Top (Global) Navigation
  • Side (Current) Navigation
  • Generic links
  • List & Library controls
  • List/Library “View” name
  • Alternating color scheme for “banded” styled lists
  • Link section headers (i.e. in Site Settings)

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 affected.

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
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 is addressed later in this post.
o365Bar-SettingsArea
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.

SuiteBar Link Color
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.
SuiteBar Arrow
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.
SuiteBar Link Color
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
Last in this section was removing 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:

[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]

CUI Top Bar

This section contains elements found within the CUI Bar (.ms-cui-topBar2), found between the Office 365 Suite Bar and the Title area. Aside from changing the colors of specific elements, I also removed the “Focus on Content” button.

While I appreciate that the “Focus on Content” feature might make content “slightly” more this consumable on a tablet, I can only imagine how many support shops out there are fielding tickets from their users complaining that their navigation has disappeared. I disagree with its inclusion in the stock UI and certainly didn’t want to retain it here. [grumble]

Original CUI Top Bar, prior to modification:

CUI Top Bar - Before

After:

CUI Top Bar - After

For reference purposes, here’s a quick overview of the classes / elements that were affected.

Class / Element Description
.ms-cui-topBar2 Defines the properties of the CUI Top Bar
.ms-qatbutton Defines the properties of the Focus on Content button on the far right side of the CUI Top Bar
.ms-cui-cg.ms-cui-cg-db Defines the properties of the Files/Library tabs in the CUI Bar (used here to affect their top border)
.ms-cui-cg.ms-cui-cg-lb Defines the properties of the Items/List tabs in the CUI Bar (used here to affect their top border)
ms-cui-cg-db .ms-cui-tt-a Defines the properties of the Files/Library tabs in the CUI Bar (used here to affect their side borders)
.ms-cui-cg-db .ms-cui-tt-a:hover Defines the properties of the Files/Library tabs in the CUI Bar on mouse-over (used here to affect their side borders)
.ms-cui-cg-lb .ms-cui-ct-first > .ms-cui-tt-a Defines the properties of the the Items tab in the CUI Bar (used here to affect it’s side borders)
.ms-cui-cg-lb .ms-cui-ct-first > .ms-cui-tt-a:hover Defines the properties of the the Items tab in the CUI Bar on mouse-over(used here to affect it’s side borders)
.ms-cui-cg-lb .ms-cui-ct-last > .ms-cui-tt-a Defines the properties of the List tab in the CUI Bar (used here to affect it’s side borders)
.ms-cui-cg-lb .ms-cui-ct-last > .ms-cui-tt-a:hover Defines the properties of the List tab in the CUI Bar on mouse-over(used here to affect it’s side borders)
.ms-cui-tt-a > .ms-cui-tt-span Defines the properties of the “Page” link/button in the CUI bar
.ms-cui-tt-s.ms-browseTab > .ms-cui-tt-a:link > .ms-cui-tt-span Defines the properties of the “Browse” link/button in the CUI bar
.ms-cui-topBar2 .ms-promotedActionButton:link .ms-promotedActionButton-text Defines the properties of the Share, Follow and Edit links in the CUI bar
.ms-browseTabContainer.ms-cui-topBar2 Defines the properties of the CUI bar after the Browse or Page buttons are clicked.
CUI Top Bar Background
The first order of business in this section was to change the background color of this bar and its lower border. While I went with flat colors, you can (if you’re feeling fancy) go with something like a custom image or even a CSS defined gradient.

If you want to do a gradient (here or elsewhere), www.colorzilla.com has a pretty handy gradient generator that provides compatibility options for various browsers.

CUI Top Bar - Background Color
Code here:

[code language=”css”] .ms-cui-topBar2 {
background-color:#000000;
border-bottom-color: #454545;
}
[/code]
Focus on Content Button
Per my rant above, I wanted to remove this button from the UI. To get there, a simple “display:none” addition was made and away it goes.

Once it is removed, the Share, Follow and Edit buttons will slide to the right.

CUI Bar - Focus On Content Button
Code here:

[code language=”css”] .ms-qatbutton {
display:none !important;
}
[/code]
Lists and Libraries Tabs
Next, I wanted to change the colors of the borders around the Files, Library, Items and List tabs that appear once you click into a list or library web part. For my purposes, I wanted to affect each of them in the same way. The idea was to have the tabs appear as an extension of the area beneath them.

The default border around these tabs is a blue. Here, I have changed this to a medium grey.

Since I was making the borders the same / uniform, I was able to lump each reference into a single definition. If you want to address them seperately, you can use the table at the beginning of this section to zero in on the individual elements.

CUI Top Bar - List & Library Tabs
Code here:

[code language=”css”] .ms-cui-cg.ms-cui-cg-db,
.ms-cui-cg.ms-cui-cg-lb,
.ms-cui-cg-db .ms-cui-tt-a,
.ms-cui-cg-db .ms-cui-tt-a:hover,
.ms-cui-cg-lb .ms-cui-ct-first > .ms-cui-tt-a,
.ms-cui-cg-lb .ms-cui-ct-first > .ms-cui-tt-a:hover,
.ms-cui-cg-lb .ms-cui-ct-last > .ms-cui-tt-a,
.ms-cui-cg-lb .ms-cui-ct-last > .ms-cui-tt-a:hover {
border-color: #454545 !important;
}
[/code]
Browse and Page Buttons
The next element that I wanted to affect was the Browse and Page buttons in the CUI Top Bar. The default color of the text for these links did not show up well against the black background color that I defined earlier, so here I change the font color of these links to a lighter grey.

For uniformity purposes, I wanted to apply the same font color to the “Share”, “Follow” and “Edit” links found on the right side of the CUI Top Bar. This allowed me to combine the referenced elements into a single definition.

In the example below, the first line was used to address the “Page” link. The second line addresses the “Browse” link and the third line addresses the Share, Follow & Edit links.

CUI Top Bar-Browse-Page-Follow
Code here:

[code language=”css”] .ms-cui-tt-a > .ms-cui-tt-span,
.ms-cui-tt-s.ms-browseTab > .ms-cui-tt-a:link > .ms-cui-tt-span,
.ms-cui-topBar2 .ms-promotedActionButton:link .ms-promotedActionButton-text {
color: #919191 !important;
}
[/code]
CUI Top Bar Bottom Border
The last step in this section was to define the bottom border color for the CUI Top Bar. By default, the only time that you will see this is after the Page/Browse buttons have been clicked.

In the example below, I specify that this should be set to the same color as the Title area beneath it.

Code here:

[code language=”css”] .ms-browseTabContainer.ms-cui-topBar2 {
border-bottom-color:#454545;
}
[/code]

Banner-Back-TitleRow

This section contains elements found within the Title row, found beneath the CUI Top Bar. This area includes the site icon, Site & Page titles, breadcrumbs and the search box.

Even though the top/global navigation lives in this section as well, it will be addressed separately due to the number of elements that are effected.

Here is the original Title Row:

Title Row - Before

After edits:

Title Row - After

For reference purposes, here’s a quick overview of the classes / elements that were affected.

Class / Element Description
#s4-titlerow Defines the properties of the Title Row. (used here to affect the background color, height, etc.)
.ms-siteicon-img Defines the properties of the Site Icon on the left-most side of the Title Row. (used here to specifiy a larger size and define a custom logo to be used)
.ms-siteicon-a Defines the properties of the Site Icon Link on the left-most side of the Title Row. (once the Site Icon size is affected, you must also change the size of its link area)
.ms-core-pageTitle Defines the properties of the Location Title in the title row (bread crumbs) when it is NOT a link
.ms-core-pageTitle a Defines the properties of the location title in the title row (bread crumbs) when it is a link
.ms-core-pageTitle a:visited Defines the properties of the location title in the title row (bread crumbs) when it is a visited link
.ms-srch-sb Defines the properties of the Search Box (used here to change its background color.
.ms-srch-sb-border:hover Defines the properties of the border around the Search Box on mouse-over
Title Row
The first item that I wanted to address in the Title Row was the general properties of the row itself.

In the example below, I specify that a new background color should be used, as well as a handful of other properties that I was looking for.

TitleRow - Background
Code here:

[code language=”css”] #s4-titlerow {
margin-bottom:1px;
height:64px;
background-color:#454545;
padding-bottom:15px;
}
[/code]
Site Icon / Logo
For the site icon, I wanted to define a specific logo to be used (site collection-wide) without modifying the masterpage or assigning it on a one-by-one basis as new sites were created.

I also wanted to specify a slightly larger site icon than what is provided out of the box. Once the dimensions of .ms-siteIcon-img are manipulated, you must also change the .ms-siteicon-a properties to match. In this case, you will see that they are both referenced in the same definition.

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.

Title Row - Site Icon
Code here:

[code language=”css”] .ms-siteicon-img,
.ms-siteicon-a {
max-width: 200px !important;
max-height: 64px !important;
background-image:url(../Images/TSI-Logo-Intranet3.png) !important;
}
[/code]
Page Titles / Bread Crumbs
Next, I wanted to change the text color for the title / bread crumbs that appear directly under the top navigation.

There are (3) different states for this text that had to be adjusted:

  • When it is not a link
  • When it is a link
  • When it is a visited link

For this design, I wanted them each to be the same color so I was able to combine the references into a single definition. Obviously, you can split these up to apply different formatting to specific elements

Title Row - Title Text
Code here:

[code language=”css”] .ms-core-pageTitle,
.ms-core-pageTitle a,
.ms-core-pageTitle a:visited {
color:#ffffff;
}
[/code]
Search Box
For the search box, the only things that I needed to adjust were its background color and the perimeter border color on mouse over events.

Background color:

Code here:

[code language=”css”] .ms-srch-sb {
background-color:#ffffff;
}
[/code]
For the border on mouse-over:
Code here:

[code language=”css”] .ms-srch-sb-border:hover {
border: 1px solid #F9C572;
}
[/code]

Top Nav

This section contains elements found within the Top (Global) Navigation bar located in the Title Row.

Original Global Navigation:

Top Nav - Before

After Edits:

Top Nav - After

For reference purposes, here’s a quick overview of the classes / elements that were affected.

Class / Element Description
.ms-navedit-editLinksText Defines the properties of the Edit Links link found to the right of the global navigation (used here to eliminate this link from the UI)
.ms-core-listMenu-horizontalBox .ms-core-listMenu-selected:link Defines the properties of the top nav link for the Current Location (not previously clicked)
.ms-core-listMenu-horizontalBox .ms-core-listMenu-selected:visited Defines the properties of the top nav link for the Current Location (previously clicked)
.ms-core-listMenu-horizontalBox .ms-core-listMenu-item Defines the properties of the top nav items for Non-Current Locations (that are not links, i.e. manually created Header)
.ms-core-listMenu-horizontalBox .ms-core-listMenu-item:link Defines the properties of the top nav links for Non-Current Locations (not previously clicked)
.ms-core-listMenu-horizontalBox .ms-core-listMenu-item:visited Defines the properties of the top nav links for Non-Current Locations (previously clicked)
.ms-core-listMenu-horizontalBox a.ms-core-listMenu-item:hover Defines the properties of the top nav links on Mouse-Over
.ms-core-listMenu-horizontalBox .additional-background.dynamic-children Defines the properties of the down-facing arrow next to top nav items containing a drop down menu
ul.dynamic Defines the properties of the Drop Down Menu that appears when mousing over top-level items containing subordinate links
li.dynamic Defines the properties of the individual Drop Down Items that are subordinate to the top-level items
Edit Links – Link
In this environment, it was appropriate to remove the “Edit Links” link. To do so, a simple “display:none” entry is made.
Top Nav - Edit Links
Code here:

[code language=”css”] .ms-navedit-editLinksText {
display:none !important;
}
[/code]
Current Location
Here, we define the text color of our current location within the global navigation.

In this case, I’m defining both the visited and non-visited states as the same color (a bright orange).

Top Nav - Current Location
Code here:

[code language=”css”] .ms-core-listMenu-horizontalBox .ms-core-listMenu-selected:link,
.ms-core-listMenu-horizontalBox .ms-core-listMenu-selected:visited {
background-color:transparent;
color:#fd8b08 !important;
}
[/code]
Non-Current Locations
Here, we define the text color for all non-current locations within the global navigation.

In this case, I’m defining everything that isn’t the current location as the same color (white), so I am able to combine the references into a single definition.

Top Nav - Non-Current Location
Code here:

[code language=”css”] .ms-core-listMenu-horizontalBox .ms-core-listMenu-item:link,
.ms-core-listMenu-horizontalBox .ms-core-listMenu-item:visited,
.ms-core-listMenu-horizontalBox .ms-core-listMenu-item {
color:white;
text-decoration:none;
}
[/code]
Navigation Items on Mouse-Over
Use the following snippet to change the text color of global navigation links on mouse-over.
Code here:

[code language=”css”] .ms-core-listMenu-horizontalBox a.ms-core-listMenu-item:hover {
background-color:transparent;
color:#fd8b08;
}
[/code]
Down Arrow – Indicating Drop Down Menu
Once the background color of the Title Row was adjusted to a much darker color, the down-facing arrow (indicating a drop down menu) was rendered nearly invisible. That being the case, it seemed like a worthwhile opportunity to inject my own arrow graphic.

While I ended up using an identical (albeit slightly lighter) arrow, I wanted to demonstrate that you can use whatever you want here.

I also wanted to bring the arrow much closer to the Nav element than is defined in the OOTB CSS. For that, you’ll notice the “padding-right” definition.

Top Nav - Down Arrow
Code here:

[code language=”css”] .ms-core-listMenu-horizontalBox .additional-background.dynamic-children {
padding-right: 11px;
background-image:url(../Images/DownArrow.png);
background-repeat: no-repeat;
background-position: right center;
cursor: pointer;
}
[/code]
Drop Down Menu
To modify the drop down menus for nav elements, there were several properties that I wanted to adjust.

First, was to prevent the drop down items from wrapping due to length. To accomplish this, you can include the “display:inline-table” property.

To adjust the background color of your drop down menu, include the “background-color” property.

To add a drop shadow to the drop down menu, include the “box-shadow” property. In this case, I used a semi-transparent black shadow by using the RGB +A format.

The remaining properties are included to provide other slight adjustments

Top Nav - Drop Down Menu
Code here:

[code language=”css”] ul.dynamic {
display:inline-table;
background-color: #656565;
white-space: normal;
word-wrap: break-word;
padding: 8px;
width:auto;
border: 1px solid #606060;
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.37);
}
[/code]
Drop Down Menu Items
Some of the modifications to the drop down menu have to be applied to the drop down items specifically. The “li.dynamic” element is used for this purpose.

First, was to provide more vertical breathing room for the drop down items. I this case, I set the height of each item to 20px by using the “height: 20px;” property.

To add a seperator between drop down items, I included the “border-bottom: 1px solid #5a5a5a;” property.

The remaining properties are included to provide other slight adjustments

Top Nav - Drop Down Menu
Code here:

[code language=”css”] li.dynamic {
height: 20px;
width: 100%;
white-space:nowrap;
vertical-align:bottom;
border-bottom: 1px solid #5a5a5a;
}
[/code]

Side Navigation

This section contains elements found within the Side (Current) Navigation panel.

Class / Element Description
.ms-core-listMenu-verticalBox .ms-core-listMenu-item Defines the properties of the Side Nav Items that are Non-Links and Non-Current locations
.ms-core-listMenu-verticalBox .ms-core-listMenu-item:link Defines the properties of the Side Nav Items that are Links and Non-Current locations
.ms-core-listMenu-verticalBox .ms-core-listMenu-item:visited Defines the properties of the Side Nav Items that are Links and Non-Current locations (previously visited)
li > a.ms-core-listMenu-item:active Defines the properties of the Side Nav Item that is the Current location.
li > a.ms-core-listMenu-item:hover Defines the properties of the Side Nav Item that is the Current location upon mouse-over.
li > a.ms-core-listMenu-item.ms-core-listMenu-selected:hover Defines the properties of the Side Nav Item that is the Current location upon mouse-over.
.ms-core-listMenu-verticalBox a.ms-core-listMenu-item:hover Defines the properties of the Side Nav Item that are not Links and Non-Current locations upon mouse-over.
li > a.ms-core-listMenu-item.ms-core-listMenu-selected:hover Defines the properties of the Side Nav Item that are Links and Non-Current locations upon mouse-over.
li > a.ms-core-listMenu-item:hover Defines the properties of the Side Nav Item that are Links and Non-Current locations upon mouse-over.
li > a.ms-core-listMenu-item:active Defines the properties of the Side Nav Item that is the Current location upon mouse-over.

For reference purposes, here’s a quick overview of the classes / elements that were affected.

Side (Current) Navigation
Side Navigation
The first side nav properties that are adjusted here are the colors of the navigation elements that are the non-current location.
Code here:

[code language=”css”] .ms-core-listMenu-verticalBox .ms-core-listMenu-item:link,
.ms-core-listMenu-verticalBox .ms-core-listMenu-item:visited,
.ms-core-listMenu-verticalBox .ms-core-listMenu-item {
color:#7c7c7c;
text-decoration:none;
}
[/code]
Next, we address the color of the navigation elements that is the current location.
Code here:

[code language=”css”] li > a.ms-core-listMenu-item.ms-core-listMenu-selected:hover,
li > a.ms-core-listMenu-item:hover,
li > a.ms-core-listMenu-item:active {
color:black;
background-color:rgba( 253,139,8,0.5 );
}
[/code]
Lastly, we address the font and background color of the navigation elements upon mouse-over
Code here:

[code language=”css”] .ms-core-listMenu-verticalBox a.ms-core-listMenu-item:hover,
li > a.ms-core-listMenu-item.ms-core-listMenu-selected:hover,
li > a.ms-core-listMenu-item:hover,
li > a.ms-core-listMenu-item:active {
color:black;
background-color:rgba( 253,139,8,0.5 );
}
[/code]

Workspace

This section contains elements found within the workspace and other general items throughout the SharePoint UI.

For reference purposes, here’s a quick overview of the classes / elements that were affected.

Class / Element Description
a Defines the properties of the Side Nav Items that are Non-Links and Non-Current locations
.ms-link Defines the properties of the Side Nav Items that are Links and Non-Current locations
a:visited Defines the properties of the Side Nav Items that are Links and Non-Current locations (previously visited)
.ms-alternatingstrong .ms-vb a:link Defines the properties of the Side Nav Item that is the Current location.
.ms-alternatingstrong .ms-vb2 a:link Defines the properties of the Side Nav Item that is the Current location upon mouse-over.
.ms-alternatingstrong .ms-vb-user a:link Defines the properties of the Side Nav Item that is the Current location upon mouse-over.
.ms-alternatingstrong .ms-vb a:visited Defines the properties of the Side Nav Item that are not Links and Non-Current locations upon mouse-over.
.ms-alternatingstrong .ms-vb2 a:visited Defines the properties of the Side Nav Item that are Links and Non-Current locations upon mouse-over.
.ms-alternatingstrong .ms-vb-user a:visited Defines the properties of the Side Nav Item that are Links and Non-Current locations upon mouse-over.
.ms-alternatingstrong .ms-vb a:hover:visited
.ms-alternatingstrong .ms-vb2 a:hover:visited
.ms-alternatingstrong .ms-vb-user a:hover:visited
.ms-linksection-title
.ms-heroCommandLink
.ms-heroCommandLink:hover
.ms-heroCommandLink:active
.ms-heroCommandLink:link
.ms-pivotControl-surfacedOpt:hover
.ms-pivotControl-overflowDot:hover
.ms-pivotControl-surfacedOpt-selected
.ms-featurestatus
.ms-tileview-tile-content
.ms-storefront-appiconspan

Last modified: May 31, 2018