SPTechCon San Francisco December 2016 Branding with CSS Session Recap

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 a SharePoint publishing site and go one step further and also incorporate a custom page layout:

We are going to take this SharePoint site:

And alter it to look like this Star Wars site:

(Dear Disney, I am only using your site because so many people are super Star Wars fans and it was timely for Rogue One release. This post and CSS demo is for educational use only.)

This rebranding is going to be done with CSS, a tiny bit of JavaScript and a custom page layout.  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.

Our sample SharePoint site is based on the publishing site template.

Here are the key things we are going to do:

  • Change header treatment on scroll.
  • Move  and alter the left navigation to become the footer, which sticks to the bottom of the web page no matter the content length of the page.
  • Add in all the page/sub site specific formatting for the top nav bar.
  • Add the special bedazzled borders for search, navigation item selected state and in the content area.

Last but not least, be sure to bookmark caniuse.com for a browser support reference.

Step 1: Custom Page Layout

To bring in the added content bits for this design, a custom page layout was created that includes three additional, static navigation systems:

  1. Movie selector
  2. Social networking links that show in the header
  3. Social networking links that show in the footer

It also includes a tad bit of jQuery so we can assign a special class of “condensed” on a HTML element in our code. This will allow us to target elements on the page and alter how they look once the end user scrolls down.

<%@ Page language="C#"   Inherits="Microsoft.SharePoint.Publishing.PublishingLayoutPage,Microsoft.SharePoint.Publishing,Version=15.0.0.0,Culture=neutral,PublicKeyToken=71e9bce111e9429c" meta:progid="SharePoint.WebPartPage.Document" meta:webpartpageexpansion="full" %>
<%@ Register Tagprefix="SharePointWebControls" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register Tagprefix="PublishingWebControls" Namespace="Microsoft.SharePoint.Publishing.WebControls" Assembly="Microsoft.SharePoint.Publishing, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register Tagprefix="PublishingNavigation" Namespace="Microsoft.SharePoint.Publishing.Navigation" Assembly="Microsoft.SharePoint.Publishing, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<asp:Content ContentPlaceholderID="PlaceHolderPageTitle" runat="server">
	<SharePointWebControls:FieldValue id="PageTitle" FieldName="Title" runat="server"/>
</asp:Content>

<asp:Content ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">
	<!-- import jQuery -->
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
	    
	<!-- Write script to toggle class on scroll -->
	<script type="text/javascript">
	$(function() { // When the page is done loading...
	    $('#s4-workspace').scroll(function() { // Monitor scrolling
	        if ($(this).scrollTop() > 1) { // And if you have
	            $('#s4-titlerow').addClass("condensed"); // condense!
	        } else {
	            $('#s4-titlerow').removeClass("condensed"); // expand!
	        }
	    });
	});
	</script>
</asp:Content>

<asp:Content ContentPlaceholderID="PlaceHolderMain" runat="server">
	<WebPartPages:SPProxyWebPartManager runat="server" id="spproxywebpartmanager"></WebPartPages:SPProxyWebPartManager>
	
	<nav class="film-selector">
		<p>Star Wars Film Selector:</p>
		<ul>
			<li><a href="">I</a></li>
			<li><a href="">II</a></li>
			<li><a href="">III</a></li>
			<li><a href="">IV</a></li>
			<li><a href="">V</a></li>
			<li><a href="">VI</a></li>
			<li><a href="">VII</a></li>
			<li><a href="http://2013.spe.io/sites/starwars/films/Pages/Rogue-One.aspx">Rogue One</a></li>
		</ul>
	</nav>
	
	<article class="content-block">
		<!-- Page Image -->
		<PublishingWebControls:RichImageField FieldName="3de94b06-4120-41a5-b907-88773e493458" runat="server"></PublishingWebControls:RichImageField>
		
		<!-- Page Content RTE -->
		<PublishingWebControls:RichHtmlField FieldName="f55c4d88-1f2e-4ad9-aaa8-819af4ee7ee8" runat="server"></PublishingWebControls:RichHtmlField>
	</article>
	
	<article class="content-parts">
		<WebPartPages:WebPartZone id="g_A7046AEDA7B34ED8A899F6700A1642C3" runat="server" title="Post Content"><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone>
	</article>
	
	<!-- Header social links -->
	<nav class="social-1">
		<ul>
			<li><a href="https://www.facebook.com/StarWars">Facebook</a></li>
			<li><a href="http://starwars.tumblr.com/">Tumblr</a></li>
			<li><a href="https://twitter.com/starwars">Twitter</a></li>
			<li><a href="http://instagram.com/starwars">Instagram</a></li>
			<li><a href="https://plus.google.com/+StarWars/posts">Google+</a></li>
			<li><a href="http://www.youtube.com/user/starwars">YouTube</a></li>
			<li>Show Disney.com</li>
		</ul>
	</nav>
</asp:Content>

<asp:Content ContentPlaceholderID="PlaceHolderQuickLaunchBottom" runat="server">
	<p>Follow Star Wars:</p>
	<!-- Footer social links -->
	<nav class="social-2">
		<ul>
			<li><a href="https://www.facebook.com/StarWars">Facebook</a></li>
			<li><a href="http://starwars.tumblr.com/">Tumblr</a></li>
			<li><a href="https://twitter.com/starwars">Twitter</a></li>
			<li><a href="http://instagram.com/starwars">Instagram</a></li>
			<li><a href="https://plus.google.com/+StarWars/posts">Google+</a></li>
			<li><a href="http://www.youtube.com/user/starwars">YouTube</a></li>
		</ul>
	</nav>
	<p>TM &amp; © Lucasfilm Ltd. All Rights Reserved.</p>
</asp:Content>

Step 2: Fonts and Layout

This design is going to use a an icon font (Font Awesome) as well as a one Google Web Font.  All of these fonts need to be pulled into our CSS file (go here if you need help setting up a CSS file).  I also need to do some general layout and background treatment.  There are some shared font and transition properties. Finally, flexbox is used to create a CSS only sticky footer out of the quick launch a.k.a. current navigation a.k.a. left nav bar.  If you want to learn more about flexbox, check out this awesome post: A Complete Guide to Flexbox by Chris Coyier.

A few other handy font resources are Font Squirrel and Fontello.

/* WEB FONTS
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- */

/* Google Web Fonts are free.  https://www.google.com/fonts  */
@import url('https://fonts.googleapis.com/css?family=Ropa+Sans');

/* Font Awesome is a free font. http://fontawesome.io  */
@import url('http://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');


/* LAYOUT  & OVERALL PAGE
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- */

/* Hide unnecessary page elements */
	#suiteBarLeft,  /*Suite Bar Left (SharePoint text and links) */
	#ms-help,  /* Help icon  */ 
	#fullscreenmodebox,  /* Focus on Content icon */
	#siteIcon img,  /* Image set as SharePoint site logo in Settings */ 
	#s4-workspace .ms-listMenu-editLink, /* Edit links when managed navigation is in use */
	#pageTitle /* Page title */ {
		display: none;
	}
	#RibbonContainer-TabRowRight /* Share, Follow, Edit links */ {
		display: none !important; /* !important needed to override SharePoint inline style */
	}

/* Add background images & color - warning these images will not scroll with the page */
	body.ms-backgroundImage {
		background: 
			url("http://classcdn.s3.amazonaws.com/images/starfield-left.jpg") left 0 repeat-y, 
			url("http://classcdn.s3.amazonaws.com/images/starfield-right.jpg") right 0 repeat-y,
			#151515;  /* Must list background color last */
	}

/* Remove OOTB color overlay added by SharePoint */
	.ms-core-overlay {
		background: transparent;
	}

/* Content area wrap, child of s4-workspace */ 
	#s4-bodyContainer {
		padding-bottom: 0;
		position: relative;
	}

/* Content area wrap, child of s4-bodyContainer */ 
	#contentRow {
		padding-top: 0;
	}

/* Content area wrap, child of contentRow */
	#contentBox {
		margin: 50px auto 0; 
		max-width: 1200px;  /* Fixed width */
	}

/* Quick launch wrap */
	#sideNavBox {
		float: none;
		margin: 50px 0 0;
		width: 100%;
		background: #1A1A1A url('http://classcdn.s3.amazonaws.com/images/vader.jpg') center no-repeat;
		min-height: 272px;
	}

/* ---- Sticky footer effect via flexbox---- */

/* Parent 1 */
	#s4-workspace {
		display: flex;
		flex-direction: column;
	}

/* Child 1 (Parent 1); Parent 2 */
	#s4-bodyContainer {
		display: flex;
		flex-direction: column;
		flex-grow: 1;
	}

/* Child 1 (Parent 2), Parent 3 */
	#contentRow {
		display: flex;
		flex-direction: column;
		flex-grow: 1;
	}

/* Child 1 (Parent 3) */
	#contentBox {
		order: 1;
		flex-grow: 2;
	}

/* Child 2 (Parent 3) */
	#sideNavBox {
		order: 2;
		flex-grow: 1;
	}


/* SHARED FONT PROPERTIES
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- */

/* Sans-serif */
	.ms-core-listMenu-horizontalBox ul.root li.static > a, /* Nav items */
	.ms-core-listMenu-horizontalBox ul.root li.static > a:link, /* Nav items */
	.ms-core-listMenu-horizontalBox ul.root li.static > a:visited, /* Nav items */
	.ms-srch-sb input, /* Search input */
	#sideNavBox p, /* Quick launch plain text */
	.ms-core-listMenu-verticalBox li.static .ms-core-listMenu-item, /* Quick launch nav items */
	.film-selector, /* In-page nav */
	.ms-webpart-chrome-title .ms-webpart-titleText, /* Web part title text */
	.ms-webpart-chrome-title .ms-webpart-titleText a, /* Web part title text */
	.ms-webpart-chrome-title .ms-webpart-titleText a:link, /* Web part title text */
	.ms-webpart-chrome-title .ms-webpart-titleText a:visited, /* Web part title text */ 
	.r1-tix-promo h1 /* Rogue One promo box */ {
		font-family: 'Ropa Sans',Helvetica,Arial,sans-serif;
	}


/* SHARED TRANSITION PROPERTIES
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- */

/* 8 second ease */
	.ms-siteicon-a, /* Site logo */
	.ms-mpSearchBox.ms-floatRight, /* Search box placement */
	nav[class*="social"] ul li a:before, /* Social networking links */
	.social-1 ul li:last-child /* Last link in top social networking links */ {
		transition: all 0.8s ease;
	}

This is the result in SharePoint. Note that many things have been hidden from the interface and the layered star field background has been implemented.

p-starwars-1-css

Step 3: Ribbon and Suite Bar

This code collapses the Suite Bar components and recolors it.  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 #000;
	} 
	.ms-cui-topBar2,
	.ms-cui-topBar2.ms-browseTabContainer {
		border-bottom: 1px solid #000;
	} 

/* 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;
	}

You can see the result in the next section’s screenshot. One of the nifty tricks above is using the color transparent to clear out any background or border colors that SharePoint has put in.

Step 4: Header

Next I am going to add the large header image and add in CSS that will collapse it once the “condensed” class has been added in after the user scrolls. One reason this code is so long, is there are different images being used for each section of the web site. Using an attribute selector I can target the different sections via the form tag in the page source.

/* HEADER  
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- */

/* Header and nav wrapper */
	#s4-titlerow {
		height: 364px; /* Height of logo area and nav bar */
		background: #151515;
		padding: 0;
		transition: height 0.8s ease;
		z-index: 1;
	}

/* Reduce height of header and nav wrapper on scroll */
	#s4-titlerow.condensed {
		height: 133px;
	}

/* Undo the crazy that SharePoint creates with table display set to DIVs */
/* Reset pointer events from '.condensed #titleAreaBox' style statement */
	#s4-titlerow .ms-table,
	#s4-titlerow .ms-tableRow,
	#s4-titlerow .ms-tableCell {
		display: block;
		pointer-events: all;
	}

/* Wrapper around site logo wrapper */
	#titleAreaBox {
		margin: 0;  /* Remove OOTB margin */
	}

/* Site logo wrapper - shared properties */		
	#siteIcon {
		float: none;  /* Remove OOTB float - this allows title row elements to return to typical block elements along with the table display changes above */
		height: 296px; 
		max-width: 1600px;
		width: 100%;
		margin: 0 auto;
		background: 
			linear-gradient(to right, rgba(0,0,0,0) 92%, #151515 100%),
			linear-gradient(to left, rgba(0,0,0,0) 92%, #151515 100%),
			url('http://classcdn.s3.amazonaws.com/images/bkgd-default.jpg') center no-repeat;
		background-size: cover;
		transition: all 0.8s ease;
	} 

/* Site logo wrapper - unique properties based on sub site */
	form[action*="/news"] #siteIcon {
		background: 
			linear-gradient(to right, rgba(0,0,0,0) 92%, #151515 100%),
			linear-gradient(to left, rgba(0,0,0,0) 92%, #151515 100%),
			url('http://classcdn.s3.amazonaws.com/images/bkgd-news.jpg') center no-repeat;
		background-size: cover;
	}
	form[action*="/video"] #siteIcon {
		background: 
			linear-gradient(to right, rgba(0,0,0,0) 92%, #151515 100%),
			linear-gradient(to left, rgba(0,0,0,0) 92%, #151515 100%),
			url('http://classcdn.s3.amazonaws.com/images/bkgd-video.jpg') center no-repeat;
		background-size: cover;
	}
	form[action*="/events"] #siteIcon {
		background: 
			linear-gradient(to right, rgba(0,0,0,0) 92%, #151515 100%),
			linear-gradient(to left, rgba(0,0,0,0) 92%, #151515 100%),
			url('http://classcdn.s3.amazonaws.com/images/bkgd-events.jpg') center no-repeat;
		background-size: cover;
	}
	form[action*="/films"] #siteIcon {
		background: 
			linear-gradient(to right, rgba(0,0,0,0) 92%, #151515 100%),
			linear-gradient(to left, rgba(0,0,0,0) 92%, #151515 100%),
			url('http://classcdn.s3.amazonaws.com/images/bkgd-films.jpg') center no-repeat;
		background-size: cover;
	}
	form[action*="/Rogue-One"] #siteIcon {
		background: 
			linear-gradient(to right, rgba(0,0,0,0) 92%, #151515 100%),
			linear-gradient(to left, rgba(0,0,0,0) 92%, #151515 100%),
			url('http://classcdn.s3.amazonaws.com/images/bkgd-home-rogue1.jpg') center no-repeat;
		background-size: cover;
	}
	form[action*="/tvshows"] #siteIcon {
		background: 
			linear-gradient(to right, rgba(0,0,0,0) 92%, #151515 100%),
			linear-gradient(to left, rgba(0,0,0,0) 92%, #151515 100%),
			url('http://classcdn.s3.amazonaws.com/images/bkgd-tvshows.jpg') center no-repeat;
		background-size: cover;
	}
	form[action*="/gamesapps"] #siteIcon {
		background: 
			linear-gradient(to right, rgba(0,0,0,0) 92%, #151515 100%),
			linear-gradient(to left, rgba(0,0,0,0) 92%, #151515 100%),
			url('http://classcdn.s3.amazonaws.com/images/bkgd-gamesapps.jpg') center no-repeat;
		background-size: cover;
	}
	form[action*="/community"] #siteIcon {
		background: 
			linear-gradient(to right, rgba(0,0,0,0) 92%, #151515 100%),
			linear-gradient(to left, rgba(0,0,0,0) 92%, #151515 100%),
			url('http://classcdn.s3.amazonaws.com/images/bkgd-community.jpg') center no-repeat;
		background-size: cover;
	}
	form[action*="/databank"] #siteIcon {
		background: 
			linear-gradient(to right, rgba(0,0,0,0) 92%, #151515 100%),
			linear-gradient(to left, rgba(0,0,0,0) 92%, #151515 100%),
			url('http://classcdn.s3.amazonaws.com/images/bkgd-databank.jpg') center no-repeat;
		background-size: cover;
	}

/* Reduce height of site logo wrapper on scroll */
	.condensed #siteIcon {
		height: 60px;
	}

/* Setup for fade on scroll effect for header background image */
	#siteIcon > div {
		height: 364px;
		background-color: transparent;
		transition: all 0.8s ease;
	}

/* Reduce height and fade to color on scroll for header background image */
	.condensed #siteIcon > div {
		background-color: #151515;
		height: 60px;
	}

/* Add new logo image in lieu of SharePoint logo */
	.ms-siteicon-a {
		background: url('http://classcdn.s3.amazonaws.com/images/star-wars-logo-stacked.png') no-repeat; 
		background-position: center bottom;
		width: 293px; 
		max-width: 293px; 
		height: 127px; 
		max-height: 127px;
		margin: 86px auto 0;
		display: inline-block;
		opacity: 1;
	}

/* Replace logo image on scroll */
	.condensed .ms-siteicon-a {
		background: url('http://classcdn.s3.amazonaws.com/images/star-wars-logo.png') center no-repeat;
		background-size: 100% auto;
		width: 350px;
		max-width: 350px;
		height: 60px;
		max-height: 60px;
		margin: 0;
	} 

/* Set header area to be fixed on scroll */
	.condensed #titleAreaBox {
		position: fixed;
		width: 100%;
		border-right: 15px solid transparent;
		box-sizing: border-box;
		pointer-events: none;
	}

And the resulting SharePoint site header is below.

p-starwars-2-css

Step 5: Top Navigation Bar

The navigation has a few different things happening:

  • Highlighted state for where you are in the site that is showed by:
    • Background color of nav item
    • Border under the whole nav bar that is the assigned section color
    • “Bump” on the border under the navigation item text
  • Added icon before navigation item text

The following code seems really long, but it is only because of setting the different colors for each section of the site for the above mentioned items. This is also 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.

/* NAVIGATION (TOP NAV BAR) 
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- */

/* Navigation bar wrapper */
	.ms-breadcrumb-box {
		background: #222222;
		height: 68px;
	}

/* Navigation bar */
	.ms-breadcrumb-top {
		width: 1200px;
		height: 68px;
		margin: 0 auto;
	}

/* Drop in underline effect under full nav bar width based on sub site */
	form[action*="/news"] .ms-breadcrumb-box {
		border-bottom: 3px solid #3273C5;
	}
	form[action*="/video"] .ms-breadcrumb-box {
		border-bottom: 3px solid #D34C20;
	}
	form[action*="/events"] .ms-breadcrumb-box {
		border-bottom: 3px solid #D2872C;
	}
	form[action*="/films"] .ms-breadcrumb-box {
		border-bottom: 3px solid #EDEC51;
	}
	form[action*="/tvshows"] .ms-breadcrumb-box {
		border-bottom: 3px solid #75933D;
	}
	form[action*="/gamesapps"] .ms-breadcrumb-box {
		border-bottom: 3px solid #419A5A;
	}
	form[action*="/community"] .ms-breadcrumb-box {
		border-bottom: 3px solid #358A8D;
	}
	form[action*="/databank"] .ms-breadcrumb-box {
		border-bottom: 3px solid #994D5D;
	}

/* Set parent positioning for child formatting */
	.ms-breadcrumb-top ul li {
		position: relative;
	}

/* Nav item text formatting */
	.ms-core-listMenu-horizontalBox ul.root li.static > a,
	.ms-core-listMenu-horizontalBox ul.root li.static > a:link,
	.ms-core-listMenu-horizontalBox ul.root li.static > a:visited {
		font-size: 1.2em;
		color: #aaa;
		text-transform: uppercase;
		letter-spacing: .05em;
		height: 68px;
		width: 149px;
		margin: 0;
		box-sizing: border-box;
		border-right: 1px solid #333;
		text-align: center;
	}
	.ms-core-listMenu-horizontalBox ul.root li.static:first-child > a,
	.ms-core-listMenu-horizontalBox ul.root li.static:first-child > a:link,
	.ms-core-listMenu-horizontalBox ul.root li.static:first-child > a:visited {
		border-left: 1px solid #333;
	}

/* Nav item hover effect */
	.ms-core-listMenu-horizontalBox ul.root li.static > a:hover {
		background: #151515;
	}

/* 'On state' effect for nav bar items based on sub site */
	form[action*="/news"] .ms-core-listMenu-horizontalBox ul.root li.static > a[href*="/news"] {
		background: #242A32;
	}
	form[action*="/video"] .ms-core-listMenu-horizontalBox ul.root li.static > a[href*="/video"] {
		background: #352722;
	}
	form[action*="/events"] .ms-core-listMenu-horizontalBox ul.root li.static > a[href*="/events"] {
		background: #342C24;
	}
	form[action*="/films"] .ms-core-listMenu-horizontalBox ul.root li.static > a[href*="/films"] {
		background: #373727;
	}
	form[action*="/tvshows"] .ms-core-listMenu-horizontalBox ul.root li.static > a[href*="/tvshows"] {
		background: #2A2D25;
	}
	form[action*="/gamesapps"] .ms-core-listMenu-horizontalBox ul.root li.static > a[href*="/gamesapps"] {
		background: #252E28;
	}
	form[action*="/community"] .ms-core-listMenu-horizontalBox ul.root li.static > a[href*="/community"] {
		background: #242D2D;
	}
	form[action*="/databank"] .ms-core-listMenu-horizontalBox ul.root li.static > a[href*="/databank"] {
		background: #35292B;
	}

/* Drop in small, curved  bottom border effect under individual nav bar item based on sub site - shared properties */
	.ms-core-listMenu-horizontalBox ul.root li.static > a:after {
		content: "";
		display: block;
		border-top: 4px solid transparent;
		width: 40px;
		left: 50%;
		margin-left: -20px;
		bottom: 0px;
		position: absolute;
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;
	}

/* Drop in small, curved  bottom border effect under individual nav bar item based on sub site - unique properties based on page and link target */
	form[action*="/news"] .ms-core-listMenu-horizontalBox ul.root li.static > a[href*="/news"]:after {
		border-top-color: #3273C5;
	}
	form[action*="/video"] .ms-core-listMenu-horizontalBox ul.root li.static > a[href*="/video"]:after {
		border-top-color: #D34C20;
	}
	form[action*="/events"] .ms-core-listMenu-horizontalBox ul.root li.static > a[href*="/events"]:after {
		border-top-color: #D2872C;
	}
	form[action*="/films"] .ms-core-listMenu-horizontalBox ul.root li.static > a[href*="/films"]:after {
		border-top-color: #EDEC51;
	}
	form[action*="/tvshows"] .ms-core-listMenu-horizontalBox ul.root li.static > a[href*="/tvshows"]:after {
		border-top-color: #75933D;
	}
	form[action*="/gamesapps"] .ms-core-listMenu-horizontalBox ul.root li.static > a[href*="/gamesapps"]:after {
		border-top-color: #419A5A;
	}
	form[action*="/community"] .ms-core-listMenu-horizontalBox ul.root li.static > a[href*="/community"]:after {
		border-top-color: #358A8D;
	}
	form[action*="/databank"] .ms-core-listMenu-horizontalBox ul.root li.static > a[href*="/databank"]:after {
		border-top-color: #994D5D;
	}

/* Add icon before each navigation item - shared properties */
	.ms-core-listMenu-horizontalBox ul.root li.static > a:before {
		content: "";
		display: block;
		width: 43px;
		height: 43px;
		background: url('http://classcdn.s3.amazonaws.com/images/sw-nav-icon-sprite.png') -2px 0;
		background-size: 1100% 220%;
		margin: 0 auto;
	}

/* Add icon before each navigation item - unique properties based on link target */
	.ms-core-listMenu-horizontalBox ul.root li.static > a[href*="/video/"]:before {
		background-position: -50px 0;
	}
	.ms-core-listMenu-horizontalBox ul.root li.static > a[href*="/events/"]:before {
		background-position: -98px 0;
	}
	.ms-core-listMenu-horizontalBox ul.root li.static > a[href*="/films/"]:before {
		background-position: -144px 0;
	}
	.ms-core-listMenu-horizontalBox ul.root li.static > a[href*="/tvshows/"]:before {
		background-position: -194px 0;
	}
	.ms-core-listMenu-horizontalBox ul.root li.static > a[href*="/gamesapps/"]:before {
		background-position: -238px 0;
	}
	.ms-core-listMenu-horizontalBox ul.root li.static > a[href*="/community/"]:before {
		background-position: -286px 0;
	}
	.ms-core-listMenu-horizontalBox ul.root li.static > a[href*="/databank/"]:before {
		background-position: -334px 0;
	}

Step 6: Search

With search we first add in a background image to create the stripes, and also add in the “bump” bedazzlement under the search. The following code also hides the default search magnifying glass icon and replaces it with different image.

/* SEARCH  
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- */

/* Search box placement */
	.ms-mpSearchBox.ms-floatRight {
		float: none;
		position: absolute;
		top: 12px;
		right: 50%;
		margin-right: -48%;
	}

/* Adjust placement of search on scroll */
	.condensed .ms-mpSearchBox.ms-floatRight {
		top: 7px;
	}

/* Search background */
	.ms-srch-sb {
		background: rgba(255, 255, 255, 0.7) url('http://classcdn.s3.amazonaws.com/images/sw-search-stripes.png');
		border-radius: 4px;
	}

/* Drop in small, curved bottom border effect for search */
	.ms-srch-sb:after {
		content: "";
		display: block;
		border-top: 4px solid #101115;
		width: 16%;
		right: 35px;
		bottom: 12px;
		position: absolute;
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;
	}

/* Change default border */
	.ms-srch-sb-border,
	.ms-srch-sb-border:hover,
	.ms-srch-sb-borderFocused {
		border-color: transparent;
	}

/* Modify default formatting for input */
	.ms-srch-sb input {
		width: 170px;
		height: 40px;
		padding: 0 10px;
		color: #766F70;
		font-size: 1.2em;
		text-transform: uppercase;
	}

/* Hide default Search icon */
	.ms-srch-sb-searchImg {
		display: none;
	}

/* Set up space for new search icon */
	.ms-srch-sb > .ms-srch-sb-searchLink {
		width: 40px;
		height: 40px;
	}

/* Insert new search icon */
	.ms-srch-sb-searchLink::before {
		content: "";
		background: url('http://classcdn.s3.amazonaws.com/images/sw-search-icon.png') -5px -5px no-repeat;
		background-size: 100% auto;
		width: 50px;
		height: 50px;
		display: inline-block;
		padding: 4px 1px;
	}

/* Hide default hover formatting for search icon */
	.ms-srch-sb-searchLink:hover {
		background: transparent;
	}

Here is the result:

p-starwars-3-css

Step 7: Footer Navigation (repurposing the current navigation/quick launch/left side bar nav)

This block of code is pretty short and mainly just tweaks things around to make the navigation bar look right in the footer area. The first style statement is what converts the navigation from running vertical to instead stack horizontally.

/* NAVIGATION (QUICK LAUNCH)
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- */

/* Convert to horizontal nav bar */
	.ms-core-listMenu-verticalBox ul li {
		margin: 0 3px;
		padding: 0;
		display: inline-block;
	}

/* Plain text added near quick launch */
	#sideNavBox p {
		text-transform: uppercase;
		text-align: center;
		color: #808A8D;
	}

/* Nav alignment */
	#sideNavBox nav {
		text-align: center
	}

/* Nav container placement and alignment */
	#sideNavBox .ms-core-listMenu-verticalBox {
		position: absolute;
		bottom: 35px;
		left: 0;
		right: 0;
		text-align: center;
	}

/* Nav item formatting */
	.ms-core-listMenu-verticalBox li.static .ms-core-listMenu-item {
		color: #808A8D;
		font-size: 1.2em;
		padding: 0 7px;
		border-left: 1px solid #2F2F2F;
	}
	.ms-core-listMenu-verticalBox li.static:first-child .ms-core-listMenu-item {
		border-left: 0;
	}
	.ms-core-listMenu-verticalBox li.static .ms-core-listMenu-item:hover {
		text-decoration: underline;
		background: none;
	}
	.ms-core-listMenu-verticalBox .ms-core-listMenu-selected:link, 
	.ms-core-listMenu-verticalBox .ms-core-listMenu-selected:visited, 
	.ms-core-listMenu-verticalBox .ms-core-listMenu-selected {
		background: transparent;
	}

/* Reset margin */
	.ms-core-listMenu-verticalBox ul li {
		margin: 0;
	}
	.ms-core-sideNavBox-removeLeftMargin {
		margin-left: 0;
	}

/* Space out items in footer area */
	.ms-core-sideNavBox-removeLeftMargin > p:first-of-type {
		padding-top: 68px;
	} 

You can check out the result in the screenshot from the next step.

Step 8:  Social Networking Links

We take the simple lists added to the page layout and format the links to only show icons and no text, plus place them in the right spots.

/* NAVIGATION (SOCIAL MEDIA)
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- */

/* Remove default list formatting for both social networking link sets */
	#contentRow nav ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}
	#contentRow nav ul li {
		display: inline-block;
	}

/* Set positioning of upper social networking link set */
	.social-1 {
		position: fixed;
		top: 45px;
		left: 10px;
		z-index: 2;
	}

/* Link formatting and prep for icon replacement */
	nav[class*="social"] ul li a {
		width: 40px;
		height: 40px;
		display: block;
		overflow: hidden;
		position: relative;
		text-indent: 60px;
		overflow-wrap: normal;
	}

/* Add social icons before links - shared properties */ 
	nav[class*="social"] ul li a:before {
		font-family: FontAwesome;
		font-size: 2em;
		position: absolute;
		top: 7px;
		left: -52px;
		color: #fff;
	}
	div nav[class*="social"] ul li a:hover:before {
		color: #fff;
	}
	nav.social-2 ul li a {
		width: 60px;
	}

/* Alter color of icons on scroll */
	.condensed + div nav[class*="social"] ul li a:before {
		color: #9B9B9B;
	}

/* Icons and placement adjustments per social network */
	nav[class*="social"] ul li a[href*="twitter"]:before {
		content: "\f099";	
	}
	nav[class*="social"] ul li a[href*="facebook"]:before {
		content: "\f082";	
		left: -50px;
	}
	nav[class*="social"] ul li a[href*="tumblr"]:before {
		content: "\f173";	
		left: -49px;
	}
	nav[class*="social"] ul li a[href*="google"]:before {
		content: "\f0d5";	
		left: -55px;
	}
	nav[class*="social"] ul li a[href*="youtube"]:before {
		content: "\f16a";	
		left: -53px;
	}
	nav[class*="social"] ul li a[href*="instagram"]:before {
		content: "\f16d";	
	}

/* Format last nav item in first set of social links */
	.social-1 ul li:last-child {
		color: #fff;
		height: 23px;
		width: 200px;
		position: absolute;
		top: 10px;
		padding-left: 10px;
		margin-left: 10px;
		border-left: 1px solid #fff;
		opacity: 1;
	}

/* Hide last nav option on scroll */
	.condensed + div .social-1 ul li:last-child {
		opacity: 0;
	}

Here is the restyled footer and social networking links:

p-starwars-4-css

Step 9:  Content Page

Finally we add in CSS to format the page content. Flexbox is used to stack the page image and content area horizontally, and CSS is added to convert a simple link wrapped around a header and paragraph tag to be our large ticket promo area with multiple backgrounds.

/* CONTENT AREA
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- */

/* Set page image and content area to flow horizontally instead of stack */
	.content-block {
		display: flex;
		padding-bottom: 30px;
	}

/* Content page image container */
	.content-block > div[id*="RichImageField"] {
		padding-right: 20px;
	}

/* Content page image */
	.content-block > div[id*="RichImageField"] img {
		box-shadow: 2px 2px 4px 0 rgba(0,0,0,.5);
	}

/* Content page content block */
	.content-block > div[id*="RichHtmlField"] p {
		font-family: Helvetica,Arial,sans-serif;
		font-size: 16px;
		color: #aaa;
		font-weight: normal;
	}

/* In-page navigator container */
	.film-selector {
		border: solid #3A3A3A;
		border-width: 2px 0;
		color: #fff;
		font-size: 1.5em;
		text-transform: uppercase;
		padding: 10px 0 10px 10px;
		margin-bottom: 30px;
	}

/* In-page navigator, run content horizontally instead of stacked */
	.film-selector p,
	.film-selector ul{
		display: inline;
	}

/* In-page navigator, links */
	.film-selector ul li a {
		color: #EDEC51;
		padding: 0 10px;
	}

/* Web part title text */
	.ms-webpart-chrome-title .ms-webpart-titleText {
		border: solid #3A3A3A;
		border-width: 2px 0;
	}
	.ms-webpart-chrome-title .ms-webpart-titleText,
	.ms-webpart-chrome-title .ms-webpart-titleText a,
	.ms-webpart-chrome-title .ms-webpart-titleText a:link,
	.ms-webpart-chrome-title .ms-webpart-titleText a:visited {
		color: #fff;
		font-size: 1.5em;
		text-transform: uppercase;
		padding: 10px 0 10px 10px;
		margin-bottom: 30px;
	}
	.ms-webpart-chrome-title .ms-webpart-titleText span:first-of-type:after,
	.ms-webpart-chrome-title .ms-webpart-titleText a span:first-of-type:after {
		content: " //";
	}

/* Rogue One Ticket Promo container*/
	.r1-tix-promo {
		display: block;
		height: 250px;
		background: 
			url('http://classcdn.s3.amazonaws.com/images/los-alamos-poster.jpg') no-repeat,
			url('http://classcdn.s3.amazonaws.com/images/sw-hash-top.png') repeat-x,
			#282727;
		background-size: contain, auto;
		border-radius: 7px;
		padding: 10px;
		box-sizing: border-box;
	}

/* Drop in small, curved right border effect for promo box */
	.r1-tix-promo:before {
		content: "";
		display: block;
		border-left: 4px solid #151515;
		height: 80px;
		right: 0px;
		top: 60px;
		position: absolute;
		border-top-left-radius: 5px;
		border-bottom-left-radius: 5px;
	}

/* Add icon to Rogue One promo container */
/* Due to image being a CSS Sprite, have to add separately from background list above */
	.r1-tix-promo:after {
		content: "";
		background: url('http://classcdn.s3.amazonaws.com/images/sw-decal.png') 0 0 no-repeat;
		background-size: 265% 210%;
		display: block;
		width: 50px;
		height: 35px;
		position: absolute;
		right: 20px;
		bottom: 0;
		opacity: .06;
	}

/* Rogue One promo text */
	.r1-tix-promo h1,
	.r1-tix-promo p {
		width: 57%;
		margin-left: 43%
	}
	.r1-tix-promo h1 {
		font-size: 2em;
		color: #fff;
		text-transform: uppercase;
	}
	.r1-tix-promo p {
		font-family: Helvetica,Arial,sans-serif;
		font-size: 1.2em;
		color: #aaa;
	}

/* Remove underline on hover */
	.r1-tix-promo:hover {
		text-decoration: none;
	}

/* Add border between image and text */
	.r1-tix-promo h1:before {
		content: "";
		height: 250px;
		border-left: 3px solid #3675C2;
		display: block;
		position: absolute;
		margin: -10px 0 0 -18px;
	}

Here is the restyled content page:

p-starwars-5-css

p-starwars-6-css

Final Code

With everything together, here is the final SharePoint CSS code file.

Download the complete CSS code file and associated custom page layout

Where to Go Next

Be sure to check out the three previous deliveries of this session where I made SharePoint look like the BBC Sherlock site, the BuzzFeed Travel site and the Smashing Magazine Blog site.

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!