CSS

CSS Reference: SharePoint Online & 2013 Branding for IT Pros

Rick Zeleznik

02 Oct 2014 • 18 min read

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)

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

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.

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.

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.

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

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.

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;

}

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:

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.

Code here:

.ms-cui-topBar2 {

background-color:#000000;

border-bottom-color: #454545;

}

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.

Code here:

.ms-qatbutton {

display:none !important;

}

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.

Code here:

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

}

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.

Code here:

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

}

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:

.ms-browseTabContainer.ms-cui-topBar2 {

border-bottom-color:#454545;

}

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:

After edits:

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.

Code here:

#s4-titlerow {

margin-bottom:1px;

height:64px;

background-color:#454545;

padding-bottom:15px;

}

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.

Code here:

.ms-siteicon-img,

.ms-siteicon-a {

max-width: 200px !important;

max-height: 64px !important;

background-image:url(../Images/TSI-Logo-Intranet3.png) !important;

}

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

Code here:

.ms-core-pageTitle,

.ms-core-pageTitle a,

.ms-core-pageTitle a:visited {

color:#ffffff;

}

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:

.ms-srch-sb {

background-color:#ffffff;

}

For the border on mouse-over:

Code here:

.ms-srch-sb-border:hover {

border: 1px solid #F9C572;

}

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

Original Global Navigation:

After Edits:

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.

Code here:

.ms-navedit-editLinksText {

display:none !important;

}

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

Code here:

.ms-core-listMenu-horizontalBox .ms-core-listMenu-selected:link,

.ms-core-listMenu-horizontalBox .ms-core-listMenu-selected:visited {

background-color:transparent;

color:#fd8b08 !important;

}

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.

Code here:

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

}

Navigation Items on Mouse-Over

Use the following snippet to change the text color of global navigation links on mouse-over.

Code here:

.ms-core-listMenu-horizontalBox a.ms-core-listMenu-item:hover {

background-color:transparent;

color:#fd8b08;

}

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.

Code here:

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

}

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

Code here:

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);

}

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

Code here:

li.dynamic {

height: 20px;

width: 100%;

white-space:nowrap;

vertical-align:bottom;

border-bottom: 1px solid #5a5a5a;

}

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

The first side nav properties that are adjusted here are the colors of the navigation elements that are the non-current location.

Code here:

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

}

Next, we address the color of the navigation elements that is the current location.

Code here:

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 );

}

Lastly, we address the font and background color of the navigation elements upon mouse-over

Code here:

.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 );

}

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