92% of Branding SharePoint is CSS, So Why Are You Living in a Master Page?
So much can be done with just CSS, the need for branding doesn’t mean a need for a custom master page. In this SPTechCon session I rebranded this SharePoint site:
To look like this BuzzFeed Travel site:
(Dear BuzzFeed, we are only using your site because so many people can connect with your great content and fun videos! This is for educational use only.)
This rebranding is going to be done with only CSS. Below I am going to step through chunks of code and some of the highlights. I will apologize in advance for the length of this post. A CSS file with all of the code blocks is included at the bottom of the post.
Please note that this particular rebranding has heavy dependency on managed navigation (although it can be accomplished with structured as well) due to the 55+ navigation links in the top nav bar (global navigation) and the quick launch (current navigation). So adding this CSS to your site won’t result in an exact replica unless you have a similar navigation structure set up. In a few days I can post a CSV file of the term store from my SharePoint site that you can use to import into your test SharePoint site.
Also, our sample SharePoint site is a publishing site based on the Publishing template.
Last but not least, be sure to bookmark caniuse.com for a browser support reference.
Step 1: Fonts and Layout
This design is going to use a few icon fonts (Font Awesome and Fontello) as well as a few Google Web Fonts. All of these fonts need to be pulled into our CSS file (go here if you need help setting up a CSS file). We also need to do some general layout and fixes for the OOTB page layout that is being used for the SharePoint web page.
/* WEB FONTS
For SharePoint Online only: Web fonts must be saved locally, for example in a folder within the Style Library. See @font-face code sample below.
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- */
/* Google Web Fonts are free. https://www.google.com/fonts */
@import url(https://fonts.googleapis.com/css?family=Leckerli+One|Lato|Merriweather+Sans:800);
/* Font Awesome is a free font. http://fontawesome.io */
@import "//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css";
@font-face {
font-family: 'fontello';
src: url('http://classcdn.s3.amazonaws.com/fonts/fontello-buzzfeed/fontello.eot?33146282');
src: url('http://classcdn.s3.amazonaws.com/fonts/fontello-buzzfeed/fontello.eot?33146282#iefix') format('embedded-opentype'),
url('http://classcdn.s3.amazonaws.com/fonts/fontello-buzzfeed/fontello.woff?33146282') format('woff'),
url('http://classcdn.s3.amazonaws.com/fonts/fontello-buzzfeed/fontello.ttf?33146282') format('truetype'),
url('http://classcdn.s3.amazonaws.com/fonts/fontello-buzzfeed/fontello.svg?33146282#fontello') format('svg');
font-weight: normal;
font-style: normal;
}
/* LAYOUT & OVERALL PAGE
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- */
/* Hide unnecessary page elements */
.ms-siteicon-img, /* Image set as SharePoint site logo in Settings */
#suiteBarLeft, /*Suite Bar Left (SharePoint text and links) */
#welcomeMenuBox .ms-core-menu-root, /* Welcome menu user's name */
#welcomeMenuBox span img, /* Welcome menu drop down arrow */
#ms-help, /* Help icon */
#fullscreenmodebox, /* Focus on Content icon */
#DeltaPlaceHolderPageDescription, /* Page description icon near title */
.right-wp-zone-col, /* Content area - right column */
.ms-core-listMenu-horizontalBox .ms-listMenu-editLink, /* Global navigation "Edit Links" when managed navigation is in use */
.ms-core-listMenu-verticalBox .ms-listMenu-editLink, /* Current navigation "Edit Links" when managed navigation is in use */
.ms-core-listMenu-verticalBox a[id$="NavLinkViewAll"] /* Site Contents link */ {
display: none;
}
#RibbonContainer-TabRowRight /* Share, Follow, Edit links */ {
display: none !important; /* !important needed to override SharePoint inline style */
}
/* Page content area */
#contentBox {
margin: 190px auto 0;
width: 990px; /* Fixed width */
}
/* ------- Fix layout issues with OOTB page layout ------- */
/* Hide empty heading */
#DeltaPlaceHolderMain .welcome-content {
display: none;
}
/* Remove default padding, widths, table junk */
#DeltaPlaceHolderMain div.welcome {
padding-top: 0;
}
.tableCol-75 {
min-width: 0;
}
.ms-webpart-cell-vertical {
display: block;
}
/* Move right column to top of content area */
.tableCol-25 {
top: 0;
right: 0;
position: absolute;
}
/* Set parent positioning so child elements appear in the right location*/
.ms-table.ms-fullWidth {
position: relative;
}
This is the result in SharePoint. Note that many things have been hidden from the interface and I made some tweaks in the content area in order to show the page content properly.
Step 2: Ribbon and Suite Bar
This code collapses the Suite Bar components and recolors it as well as inserts in the person icon for the welcome menu. For a more in-depth walkthrough for stacking the Suite Bar and ribbon, please see “Stack the SharePoint 2013 Suite Bar on top of Ribbon“.
/* RIBBON & SUITE BAR
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- */
/* Reduce height of area to minimum required */
#suiteBar {
height: auto;
}
/* Ribbon background and border */
.ms-cui-topBar2 {
background: #000;
border-bottom: 1px solid #666;
}
.ms-cui-topBar2,
.ms-cui-topBar2.ms-browseTabContainer {
border-bottom: 1px solid #666;
}
/* Move Suite Bar Right (Sign In/Welcome/Site Actions) back to right side after hiding Suite Bar Left */
#suiteBarRight {
position: absolute;
right: 10px;
background: transparent;
top: 3px;
z-index: 2;
}
/* Move Welcome Menu to right of Site Settings */
#welcomeMenuBox {
float: right;
}
/* Insert person icon before user's name (which is now hidden) */
#welcomeMenuBox > span::before {
content: "\f007";
font-family: FontAwesome;
font-weight: normal;
font-size: 2em;
cursor: pointer;
color: #fff;
background: #DDDDDD;
padding: 3px 5px;
}
/* Remove padding from Welcome menu */
.ms-welcome-root {
padding: 0;
}
/* Welcome menu hover effect */
.ms-welcome-hover {
background: transparent;
border-right-color: transparent
}
Here is the result. One of the nifty tricks above is using the color transparent to clear out any background or border colors that SharePoint has put in. I also used an icon font for the person icon in the upper right corner of the site.
Step 3: Header
Next I am going to add in the BuzzFeed logo (one of only three images used in this design) as well as add the “Life” text and format the page title (“Travel”). This is our first use of the ::before and/or ::after pseudo elements, which should be your new best friend for SharePoint CSS branding. It will allow you to add content, branding elements, icons and all sort of things that are not otherwise represented in the HTML.
/* HEADER
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- */
/* Wrapper around site logo wrapper */
#titleAreaBox {
margin: 0;
}
/* Site logo wrapper */
#siteIcon {
position: absolute;
left: 50%;
margin-left: -495px;
}
/* Add new logo image */
.ms-siteicon-a {
background: url('http://classcdn.s3.amazonaws.com/images/buzzfeed-logo.png') no-repeat right;
width: 283px;
max-width: 283px;
height: 50px;
max-height: 50px;
}
/* Add section title after logo */
#DeltaSiteLogo:after {
content: "Life";
font-family: 'Leckerli One', cursive;
font-size: 65px;
color: #228CE8;
top: -5px;
position: relative;
left: 10px;
}
/* Page title text */
#pageTitle {
position: absolute;
top: 150px;
left: 50%;
margin-left: -495px;
font-family: 'Leckerli One', cursive;
font-size: 85px;
color: #0096D2;
font-weight: normal;
text-shadow: -2.5px 2px #6BD0D7;
}
And the resulting SharePoint site is below. Since the top or left navigation hasn’t been formatted yet, the navigation elements are underneath the header. The beveled “Travel” text was created using a text shadow with no blur or spread, which creates a shadow that looks like an offset replica of the solid color text.
Step 4: Top Navigation (Global)
Time to move the top nav bar and format the navigation items. The last navigation item, “Get Our App!”, needs to look different so we are going to target it using an attribute selector that looks for a particular URL in the HREF property of the link tag.
/* NAVIGATION (TOP NAV BAR)
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- */
/* Top nav bar placement & formatting */
.ms-breadcrumb-top > .ms-core-navigation {
background: #EAEAEA;
display: block;
height: 51px;
position: absolute;
top: 95px;
width: 100%;
text-align: center;
}
.ms-core-listMenu-horizontalBox {
margin-left: -278px;
}
/* Nav item text formatting */
.ms-core-listMenu-horizontalBox li.static > .ms-core-listMenu-item {
height: 51px;
color: #000;
font-family: Lato, sans-serif;
font-size: 1.5em;
margin-right: 0;
padding: 12px 21px;
box-sizing: border-box;
}
.ms-core-listMenu-horizontalBox li.static > .ms-core-listMenu-item:hover {
background: #fff;
}
/* Change formatting for "Get Our App!" link
- Dependent upon presence of top nav bar link with an HREF that includes "mobile-ios" */
.ms-core-listMenu-horizontalBox li.static > a[href$="mobile-ios"] {
color: #0073F2;
font-size: 1.1em;
}
/* Remove default image and formatting for dynamic menu drop downs */
.ms-core-listMenu-horizontalBox .dynamic-children.additional-background {
padding-right: 0;
background: none;
}
/* Insert new icon for dynamic menu drop downs */
.ms-core-listMenu-horizontalBox .dynamic-children.additional-background:after {
content: "\f107";
font-family: FontAwesome;
padding-left: 10px;
font-size: 1em;
font-weight: bold;
}
/* Correct text alignment of dynamic pop up menu nav items */
.ms-core-listMenu-verticalBox .ms-core-listMenu-item, ul.dynamic .ms-core-listMenu-item {
text-align: left;
}
SharePoint top nav now looks like this:
Step 5: Mega-Menu(ish) Drop Down Nav
In the target design, BuzzFeed has a drop down menu for their “More” link:
I say mega menuish because it is a light weight mega menu. Other sites have more complex layouts and not all of it can be done with just CSS. That and I like to make up new words. I am going to take a regular drop down menu from SharePoint and turn it into what we see above. Yes, really.
This code is pretty lengthy so I went ahead and saved it out as a separate file that you can download and look at in a text or code editor. Essentially this post was long enough without another 200 lines of CSS code.
The big thing used in this code block is :nth-child selectors. This type of selector allows you to pinpoint an element based on the numerical order that it appears. For example target the third paragraph tag, target the seventh list item or target every other table row.
Here is the starting SharePoint drop down menu, cut off at a certain point just due to the sheer length of the menu:
One way to tackle this is just to think of what you need to do within the menu:
- The second item needs to look like a button and be to the right of the first item.
- In-between the second and third item there needs to be a “Sections” header.
- The twelfth item needs to start a new column, along with the twenty-first item.
- Starting at the thirtieth item there needs to be a gray background.
- The thirtieth through the thirty-fourth items need to be horizontal instead of vertical.
- The thirty-fourth item needs to look like a button.
- The thirty-fifth item through the end needs to be horizontal instead of vertical.
- A copyright statement and “Made in NY” stamp need to be added at the end.
Now that I know what needs to be done, I can use :nth-child selectors to target the 1st, 2nd, 3rd, 12th, 21st, 30th, 34th and 35th list items in the menu and apply whatever CSS is needed to create the look for that item. Here is the result:
Step 6: Search
Nothing too crazy is happening here. Just moving the search and reformatting the search area a bit including a replacement of the SharePoint magnifying glass image with an icon font.
/* SEARCH
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- */
/* Search box placement */
.ms-mpSearchBox.ms-floatRight {
float: none;
position: absolute;
top: 106px;
right: 50%;
margin-right: -490px;
}
/* Search background */
.ms-srch-sb {
background: #fff;
}
/* Change default border */
.ms-srch-sb-border,
.ms-srch-sb-border:hover {
border-color: #E2E2E2;
}
/* Modify default formatting for input */
.ms-srch-sb input {
width: 170px;
height: 26px;
color: #A9A9A9;
font-family: Lato, sans-serif;
font-size: 1.2em;
}
/* Hide default Search icon */
.ms-srch-sb-searchImg {
display: none;
}
/* Insert new search icon */
.ms-srch-sb-searchLink::before {
content: "\f002";
font-family: FontAwesome;
font-size: 1rem;
display: inline-block;
padding: 4px 1px;
color: #2F373F;
}
/* Hide default hover formatting for search icon */
.ms-srch-sb-searchLink:hover {
background: transparent;
}
Here is the result:
Step 7: Quick Launch (current navigation)
This is a fun one. I am going to take the quick launch and convert it into the row of yellow circle icons you see in the BuzzFeed site. Two key things used here will be creating a circle with a 50% border radius, and tilting the text using a CSS transform. I also hide the navigation item text for “Trending” and replace it with an icon font.
/* NAVIGATION (QUICK LAUNCH)
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- */
/* Quick Launch placement & formatting */
#sideNavBox {
width: 392px;
height: 57px;
box-sizing: border-box;
position: absolute;
top: 15px;
right: 50%;
margin-right: -495px;
}
/* Reset margin */
.ms-core-sideNavBox-removeLeftMargin {
margin-left: 0;
}
/* Convert to horizontal nav bar */
.ms-core-listMenu-verticalBox ul li {
float: left;
margin: 0 3px;
padding: 0;
}
/* Create circles for nav items */
.ms-core-listMenu-verticalBox ul li a.static.menu-item,
.ms-core-listMenu-verticalBox ul li a.static.menu-item:link,
.ms-core-listMenu-verticalBox ul li a.static.menu-item:visited {
margin: 0;
padding: 0;
text-align: center;
position: relative;
left: -1px;
top: 12px;
background: #FFF000;
border-radius: 50%;
width: 50px;
height: 50px;
box-shadow: 2px 2px 1px 0px #E2E2E2;
}
/* Alter positioning for hover */
.ms-core-listMenu-verticalBox ul li a.static.menu-item:hover {
top: 9px;
}
/* Nav item formatting and rotation */
.ms-core-listMenu-verticalBox ul li a.static.menu-item span {
color: #000;
font-size: 1.2em;
transform: rotate(-15deg);
font-family: 'Merriweather Sans', sans-serif;
position: relative;
left: 0px;
top: 6.5px;
display: inline-block;
}
/* Alter background for Trending nav item */
.ms-core-listMenu-verticalBox ul li a.static.menu-item[href$="trending"] {
background: #F13111;
}
/* Hide "Trending" nav item text */
.ms-core-listMenu-verticalBox ul li a.static.menu-item[href$="trending"] span.menu-item-text {
display: none;
}
/* Add icon for trending nav item */
.ms-core-listMenu-verticalBox ul li a.static.menu-item[href$="trending"] span::before {
content: "\e800";
font-family: fontello;
font-size: 2em;
display: block;
color: #fff;
overflow: hidden;
}
This is what we get in SharePoint:
Step 8: Social Networking Links List
Using a simple links web part, I added the social networking links to the SharePoint page. I can use CSS to format the links as large buttons and add a preceding icon using the ::before pseudo element. I can even alter the web part title to mimic the BuzzFeed site, just falling short of creating the red “BuzzFeed” logo in the middle of the title. I can’t do this last item because there is nothing special added to the “BuzzFeed” text in the web part header source code. If there is nothing to target, CSS can’t step in and do any styling.
/* SOCIAL LINKS WEB PART
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- */
/* Web part container */
.ms-wpContentDivSpace table {
width: 330px;
}
/* Add lines around header */
.ms-webpart-titleText span:first-child::before,
.ms-webpart-titleText span:first-child::after {
content: "";
background: #979797;
display: block;
width: 40px;
height: 1px;
position: absolute;
top: 10px;
}
.ms-webpart-titleText span:first-child::before {
left: 7px;
}
.ms-webpart-titleText span:first-child::after {
right: 11px;
}
/* Hide web part column header */
.ms-listviewtable thead {
display: none;
}
/* Link formatting */
.ms-webpart-titleText a,
.ms-webpart-titleText a:link,
.ms-webpart-titleText a:visited {
font-size: .85em;
text-align: center;
width: 330px;
display: block;
margin-left: 5px;
}
.ms-vb a:hover, .ms-vb2 a:hover {
text-decoration: none;
}
.ms-itmHoverEnabled:hover td {
background: transparent;
}
/* Convert links to buttons */
.ms-cellstyle a,
.ms-cellstyle a:link,
.ms-cellstyle a:visited {
width: 330px;
display: block;
padding: 10px 10px 10px 45px;
box-sizing: border-box;
border-radius: 3px;
color: #fff;
font-size: 1.2em;
font-family: Lato,sans-serif;
position: relative;
}
/* Add social icons before links - shared properties */
.ms-cellstyle a::before {
font-family: FontAwesome;
left: 15px;
display: inline-block;
position: absolute;
font-size: 1.2em;
}
/* Social icons and backgrounds for each network */
.ms-cellstyle a[href*="facebook"] {
background: #39579A;
}
.ms-cellstyle a[href*="facebook"]:hover {
background: #1e2e4f;
}
.ms-cellstyle a[href*="facebook"]::before {
content: "\f230";
}
.ms-cellstyle a[href*="twitter"] {
background: #00ABF0;
}
.ms-cellstyle a[href*="twitter"]:hover {
background: #006287 ;
}
.ms-cellstyle a[href*="twitter"]::before {
content: "\f099";
}
.ms-cellstyle a[href*="apple"] {
background: #222222;
position: relative;
}
.ms-cellstyle a[href*="apple"]:hover {
background: #000;
}
.ms-cellstyle a[href*="apple"]::before {
content: "";
background: url("http://classcdn.s3.amazonaws.com/images/apple-news.png") no-repeat;
width: 15px;
height: 15px;
display: block;
position: absolute;
top: 12px;
left: 15px;
}
Here is the restyled web part:
The Whole Enchilada
With everything together, here is the final SharePoint CSS code and web site screenshots:
Download the complete CSS code (includes mega menu)
Where to Go Next
If you love what CSS can do for SharePoint and want to learn even more, we spend two whole days making SharePoint awesome with only CSS in our SharePoint CSS Experience course. This is an online course and in addition to being taught live, all sessions are recorded and provided to you after class. Go ahead and check out our course schedule for the next delivery dates. 
Thanks!