This is a quick but handy little CSS style statement to increase the width of the SharePoint 2013 top navigation bar drop down, which by default is pretty small.  Now I know ideally the navigation item text should be short and sweet, but I also know how folks love their long department names and the like in the navigation. 

What SharePoint does by default

When you have nested navigation items, the drop down menu will be dynamically assigned a fixed width that you will only see pop up in a browser inspection tool when you hover over the menu.  How the width value is calculated… honestly I have no idea because I have seen these values vary based on the length of the content within.  But it never shows a full width where longer navigation items DON’T have a text wrap, as shown below.

CSS to fix the fixed width

First you need to decide if you want a fixed width drop down (say 300 pixels or so) or if you want the width to stretch to contain whatever length of text is within.

The benefit to a fixed width is you will have consistency across your drop down menus with a uniform width and you don’t have to worry about really, really long navigation item names forcing your drop down to be huge.

The benefit to the automatic width on the other hand is you only create the space you need to take up and minimize what is covered up on the screen by the drop down.

Reset to new fixed width

/* Resize navigation fly-out width */
ul.dynamic {
  width: 300px !important;  /* !important needed to override inline SharePoint style */
}

Update the unit of measurement as needed.

Reset to auto size based on navigation item character length

/* Resize navigation fly-out width */
ul.dynamic {
  width: auto !important;  /* !important needed to override inline SharePoint style */
  white-space: nowrap;
}

The “white-space: nowrap” is what makes this method work, so don’t chop it off!

And in the end…

Here is the result:

Add in a bottom border and a little padding and it will actually start to look respectable!

ul.dynamic li {
  border-top: 1px solid #ddd;
  padding: 10px 0;
}
ul.dynamic li:first-child {
  border-top: 0
}

Whether you are stuck in SharePoint or want to stick it to SharePoint or want to make things stick within SharePoint, sticky stuff in SharePoint is a hot topic.  I am going to focus on the latter.

What is sticky stuff?

More and more on the web you see web page components staying in a set location on the screen independent of how the page is being scrolled, or in the case of a footer, how short the page content is within a web page. Common sticky items are navigation bars, headers, contact us/chat now boxes,  sidebars and footers.

Sometimes the sticky item is “stuck” right away and there is no visual change as you scroll the page. Other sticky items have a starting position and then move and stick based on a page scroll. For example a web site has a 200 pixel tall header with a navigation bar underneath it. As the web page is scrolled the header scrolls away and the nav bar scrolls to the top of the page and remains there while the user continues to scroll down through the page content.

All of these sticky items can be implemented in SharePoint.

Sticky header (with or without navigation)

There is a big divide here for adding in a sticky header… will you be showing the SharePoint ribbon?  If it is an Intranet site the answer is likely yes.  If you are running a public facing brochureware type site, the answer is likely no.

Sticky header WITH the Ribbon

This is the easiest type of sticky element to add to your SharePoint site. This is because you can piggyback on the existing sticky aspect of the SharePoint ribbon.  OOTB, SharePoint is split into two panes – s4-ribbonrow and s4-workspace.  The s4-ribbonrow pane is fixed at the top of the web page and the content within s4-workspace scrolls separate from the ribbon.  Any web page components you add either above or within the s4-ribbonrow container will get the same fixed position treatment.

The following is a series of screenshots showing where content appears based on where you insert new HTML elements in the master page. Note in all of these examples the scroll bar remains connected only with s4-workspace and the size of the top pane changes as content is added to it.

Add HTML elements above or below the Suite Bar, but above and outside of the s4-ribbonrow container: 

Add HTML elements within or under the s4-ribbonrow. Note that added content within or after this container affects other components and creates some UI issues.

(This is a H1 added at the bottom of the s4-ribbonrow)

The best option would be to add your custom HTML elements above the s4-ribbonrow container (not within it or after it).

1. Open your custom master page file.
2. Search for and locate the s4-ribbonrow ID. It is likely attached to a DIV tag.
3. Add your custom HTML somewhere above and outside of the s4-ribbonrow HTML element.

Sticky header WITHOUT the Ribbon

If you have removed the ribbon or have code in place to not show the ribbon to certain levels of users, you can use traditional methods to add a sticky header.

1. Open your custom master page file.
2. Within the s4-workspace container, add your custom HTML header elements, adding a class or ID to the container.

   <div class="sticky-header">
   	<h1>This is a sticky header</h1>
   </div>

3. In your custom CSS file, add the following style statement, making modifications as needed:

   .sticky-header {
     background: #000;
     width: 100%;
     height: 40px;
     position: fixed;
     top: 0;
   }

4. At this point the header is stuck to the top of the web page, but showing on top of the web page content.
   
5. Add another style statement to your custom CSS file that shifts the page content down based on the height of the header.

   #s4-workspace {
     margin-top: 40px;
   }

You can alternatively add any SharePoint component that you want, such as the top nav bar (a.k.a. global navigation). Here is the result:

Sticky box – fixed

What was done above for “Sticky header WITHOUT the Ribbon” can be applied to any HTML element that you want located anywhere on the page.   All you have to do is modify the positioning.

1. Open your custom master page file.
2. Within the master page code, add your custom HTML element(s), adding a class or ID to the container. Because the HTML element will have fixed positioning on the page, it doesn’t  matter where you add the code.

   <div class="sticky-box">
   	<h1>This is a sticky box</h1>
   </div>

3. In your custom CSS file, add the following style statement, making modifications as needed:

   .sticky-box {
     background: #000;
     padding: 8px;
     position: fixed;
     left: 10px;
     bottom: 10px;
   }

Sticky box – scroll then fix

A popular UI element on web pages these days is to have an HTML element nested in the page design, then as you scroll the page the nested item moves to a new location and stays there as you continue scrolling.  For this effect you are going to need to also use some jQuery or JavaScript.

The plan

You will be adding the sticky item to your master page and creating two different CSS classes and style statements for the sticky item. The first one will be for the static view when you first load the page. The second will be modifications that will be used when you start to scroll the page. jQuery can then be used to switch in the scroll class based on page scroll.

The code

1. Open your custom master page file.
2. Within the master page code, add your custom HTML element(s), adding a class or ID to the container. For this example I am adding the code below the Quick Launch (current navigation) but within the sideNavBox HTML element (which is present in seattle.master).

   <div class="sticky-box-static">
   	<h1>This is a sticky box</h1>
   </div>

3. In your custom CSS file, add the following style statements, making modifications as needed:

   .sticky-box {
     background: #000;
     padding: 8px;
     margin-top: 20px;
     width: 130px;
   }
   
   #s4-workspace.scroll .sticky-box {
     position: fixed;
     top: 60px;
   }
   

   This is the result:
   

4. Now that the static version of the sticky box is in place, you can use a little jQuery to add in the other class on page scroll. Thanks to Chris Coyier’s post for the code bits. Add the following script to the BOTTOM of your master page file, before the closing BODY tag.

   <script type="text/javascript">
   	var wrap = $("#s4-workspace");
   
   	wrap.on("scroll", function(e) {
   
   	  if (this.scrollTop > 300 ) {
   	    wrap.addClass("scroll");
   	  } else {
   	    wrap.removeClass("scroll");
   	  }
   
   	});
   </script>
   

   This script watches for the page scroll to move to 300+ pixels from the top of the viewport. Once that happens, another CSS class (scroll) is being added to the s4-workspace container. The scroll class is referenced in our new CSS and adds the fixed positioning and sets a top pixel location for the fixed sticky box. If the page is scrolled back to less than 300 pixels, the added CSS class is removed.

5. This is a jQuery script and in order for it to work you need  a reference to include the jQuery library. Add the following to the HEAD of your master page file. You can grab the latest version of this library path from Google.

   <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Here is the result:

Sticky box – scroll then fix: alternative code

The above technique relies on you knowing the exact position for where the sticky box hits the top on scroll and should start to stick. In this example it is 300 pixels. If your sticky box is in a location that can change based on surrounding content, you can still use this technique but with a slight change to the code.  In our existing example, if you added items to the Quick Launch bar you would need to modify the value (300) in the jQuery script.  This isn’t practical if the Quick Launch bar length is changing all of the time, such as when you navigate from page to page.

1. Return to the jQuery script you added to the bottom of the master page.
2. Replace the script with the following (thanks to Dustin Miller for the code tweaks):

   <script type="text/javascript">
   	var wrap = $("#s4-workspace");
   	var stickytop = $('.sticky-box').offset().top;
   
   	wrap.on("scroll", function(e) {
   
   	  if (this.scrollTop > stickytop ) {
   	    wrap.addClass("scroll");
   	  } else {
   	    wrap.removeClass("scroll");
   	  }
   
   	});
   </script>
   

Here is the result:

The Suite Bar and ribbon make it look a little wonky because the class isn’t kicked in until the sticky box hits the top of the viewport.  If your design doesn’t include these elements, the result is much smoother:

This final version also includes some tweaks to the CSS:

.sticky-box {
  background: #000;
  padding: 8px;
  width: 130px;
}
#s4-workspace.scroll .sticky-box{
  position: fixed;
  top: 0px;
}
.ms-core-navigation {
  margin-bottom: 20px;
}

Spice up your sticky stuff with CSS3 transitions

If the sticky version of an item needs to change in size or some other style, you can create a smoother transition using CSS3.

Using the last technique and code bits as a springboard, all that needs to be done is to modify the existing CSS:

.sticky-box {
  background: #000;
  padding: 8px;
  width: 130px;
  transition: all 1s ease;
}
.sticky-box h1 {
  transition: all 1s ease;	
}
#s4-workspace.scroll .sticky-box{
  position: fixed;
  top: 0px;
  background: blue;
}
#s4-workspace.scroll .sticky-box h1 {
  font-size: 20px;
  color: #fff;
}
.ms-core-navigation {
  margin-bottom: 20px;
}

Here is the result:

Sticky footer

Any pure CSS sticky footer solutions you find on the web will not work in SharePoint due to how it treats the s4-ribbonrow and s4-workspace containers.  The best thing to do is to use script, and Randy Drisgill has a solution posted.

What to do if your sticky stuff is under another element

Depending on where you add a sticky HTML element in your code, it is possible that another HTML element will appear on top of your sticky element. You can correct this easily with the z-index property in CSS. The trick is to understand how z-index works and not just slap in a z-index: 100000 like you see everywhere on the web.

HTML element stack order

As HTML elements are listed in the code, they are put in a stack.  It is like adding sheets of paper to pile one at a time.  The first piece of paper, or HTML element, is set on a table.  Then the second piece of paper, or second HTML element is placed next, and on top of it.  The third piece goes on top of the second, so on and so forth.

“Display” joins the party

When you are working with HTML elements, each one has a default display of inline or block.  A block element like a DIV forces it’s siblings to go on either side of the element.  It would be like spreading the three sheets of paper out on the table.  They are now next to each other, but they were still put down in an order.    If you set a negative margin on the second HTML element, it will slide on top of the first HTML element.  For our paper metaphor, you have just overlapped the second piece of paper partially over the first.

“Position” messes with your stuff

When you set absolute or fixed positioning, you are removing that HTML from the flow of the document so the surrounding HTML elements slide up and take the space the other element previously occupied. But the stack order is still intact. If you set a fixed position to element #1, element #2 is now on top of element #1, thus  potentially obscuring element #1.

Fix it with z-index

The default stack order can be altered in CSS using the z-index property.

.selector {
  z-index: 2;
}

The higher the z-index value, the higher in the stack order the element is.

What gets tricky about the stack order is when you introduce children elements. Each group of elements have their own stack order.  The following nested, numbered list shows the layering of elements and their children.  Note that each child list starts over with #1. For the paper metaphor, you would write on each existing piece of paper it’s respective children elements.

1. Element A (first piece of paper)
   1. First child of element A (written on page 1)
   2. Second child of element A (written on page 1)
2. Element B (second piece of paper)
   1. First child of element B (written on page 2)
   2. Second child of element B (written on page 2)
3. Element C (third piece of paper)
   1. First child of element C (written on page 3)
   2. Second chid of element C (written on page 3)

If you want First child of element A to show on top of Element C, you have to change the layer order of the parent to force Element A to be on top of Element C. If you were to target the child element and alter the stack order, you would only be affecting the stack order of the children elements. Think back to writing the child elements on the pieces of paper – you can’t make the first child listed on page 1 sit on top of the 3rd page without shuffling the pages.

My head hurts

Z-index can be confusing and seemingly complicated on the surface, but if you remember how it works with the parent/child relationships you will be able to fix your stack order by targeting the right element.  Below the z-index property has been added to the .sticky-box class.

.sticky-box {
  background: #000;
  padding: 8px;
  position: fixed;
  left: 10px;
  bottom: 10px;
  z-index: 3;
}

One last thing…

If adding the z-index property to your CSS doesn’t fix the issue, you probably need to specify a position property on the element you are trying to layer your sticky stuff on top of.

.item-under-sticky-box {
  z-index: 2;
  position: relative;
}

What the future holds

Just as a head’s up, as it does not have wide browser support at the time of this writing, the CSS3 spec includes a new “sticky” value for the position property.  The Mozilla Developer Network has the best summary of what the sticky property will do:

“Sticky positioning is a hybrid of relative and fixed positioning.  The element is treated as relative positioned until it crosses a specified threshold, at which point it is treated as fixed positioned.”

In the future you can use sticky positioning to create pure CSS sticky stuff solutions and drop any jQuery or JavaScript you previously used.

This is a bit of an odd one… but I love to show examples of how simple CSS can meet your needs, however different they may be, for SharePoint and SharePoint web parts.  A student needed to convert the Project Summary web part countdown box to a single line above the rest of the web part content.  The following CSS can make this happen.

Project Summary Countdown

Here is how the Project Summary count down (task X due in X days) looks by default:

My student wanted it moved above the web part.  Here is the result:

Here is the CSS to accomplish this task:

/* =SharePoint Experts, Inc. - CSS for converting the Project Summary countdown box to a single line above the web part content. SharePoint 2013. 
-sharepointexperience.com
*/


/* ---- Project Summary Web Part ---- */

/* Add space for countdown line between web part title and web part content */
	div[id^="OuterPanel"] {
		margin-top: 30px;
	}

/* Move countdown area to above web part contents */
	div[id$="CountDown"] {
		position: absolute;
		top: -30px; /* Match or closely mirror margin-top value above */
		width: 100%;
		border-right: 0; 
	}

/* Remove default margin for countdown and main content area */
	.ms-psum-headlines-area {
		margin-left: 0 !important;  /* !important needed to override inline SharePoint style */
	}
	.ms-psum-countdown-contents {
		margin: 0;
	}

/* Collapse countdown text components into one line */
	.ms-psum-heading-task-text,
	.ms-psum-heading-text{
		float: left;
		width: auto;
		line-height: 1.5em;  /* Required to create consistent vertical spacing */
	}

/* Add to sides of center text to create the look of character spaces */
	.ms-psum-heading-text {
		padding: 0 5px;
	}

/* Adjust formatting of actual countdown to match rest of text */
	.ms-psum-countdown-number {
		font-size: 1.5em;  /* Match OOTB SharePoint font size for rest of countdown text */
		line-height: 1.5;   /* Required to create consistent vertical spacing */
	}


/* 
SharePoint Experts, Inc. 
sharepointexperience.com
*/

The niftier bit of this code snippet is the use of attribute selectors (lines 9 and 14) to target a couple of DIVs that have some hairy looking IDs. By using an attribute selector we can create a simpler CSS selector and stay away from things like this:

#OuterPanel_ctl00_ctl39_g_6785cfab_4428_4818_909a_ee39d0563e77  {
	margin-top: 30px;
}

I don’t know about you, but once an ID hits 61 characters, it gives me the heebie jeebies. No human created that ID and I don’t trust auto generated IDs to remain consistent as I move from SharePoint site to SharePoint site or from environment to environment.

SharePoint 2013 switched from using the text “Site Actions” to showing a gear/cog/wagon wheel icon (I like gear so we will go with that for this post). That is all well and good until you need to change the background to a darker tone or if you want to change the color of the gear icon. SharePoint 2013 inserts in the icon image via HTML *cringe* thus making it more difficult to update to match your color scheme. With a little CSS we can knock out the default image and show our own icon instead.

The Problem

You want to alter the background color that happens to run behind the Site Actions gear icon (on-premises). Whether it is updating the Suite Bar background or if you have moved the Site Actions control in the master page or via CSS to a new location, you need to go from light to dark, yet the gear icon is a dark gray color. For example if I added this to my CSS:

#suiteBarRight {
  background: #000;
}

You would end up with this:

Ewww.

The Solution

Using a little bit of CSS and one of two options, you can easily switch in a new icon. This solution only works for on-premises SharePoint and not SharePoint Online. 

Option 1 – My preferred method

Icon fonts are one of the better things to hit the CSS world lately, and can really come in handy, especially in situations like this. The nice thing about icon fonts is you can control the size and color of the icon through CSS.

There are lots of options out there, including building out your own icon font file with only the icons that you need. This may be the best choice if you are doing this for an intranet.

A few icon font options:

• FontAwesome – link to the externally hosted font file and use freely in your CSS.
• Fontello – build and download icon web font files. Add the font files to your SharePoint site and reference it internally.  This may be best for intranets and similar sites if you run into issues with users being prompted to authenticate several times for their SharePoint site.
• Top 50 Free Icon Fonts for Web Design
• The Big List of Flat Icons & Icon Fonts

For this demo we will use FontAwesome, it is quick and easy to use and doesn’t require file generation or implementation.

The code bits

In your custom CSS file, add the following code at the top of your CSS file, above any style statements:

@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css);

FontAwesome updates frequently, so please check to see if you are using the latest version. At the time of this posting, it was 4.4.0. You can check for the latest version and update your code accordingly.

Now add the following CSS style statements.  The provided comments indicate what each declaration does and is not required in your final code.

Hide the default gear icon:

/* Hide Site Actions gear icon */
.ms-siteactions-imgspan {
	display: none;
}

Insert in a new icon using FontAwesome. The unicode character property in the content declaration is what pulls the right icon. You can view all available icons.

/* Insert new Site Actions gear icon - allows for icon color change */
.ms-siteactions-normal > a:before {
	content: "\f013";  /* Unicode character for icon font */
	font-family: FontAwesome;   /* Icon font - requires @import listed at top of file */
	color: #fff;  /* Icon color */
	font-size: 16px;  /* Icon size */
	font-weight: normal; /* Removes default bolding that can occur with icon font */
	padding-top: 7px;  /* Spaces down icon from top */
	display: block;  /* Forces respect of padding */
}

Here is the result:

If you don’t like the single gear (cog) icon provided by FontAwesome, you can alternatively try the following for the unicode character property in line three. Be sure to leave the backslash, it properly escapes the code:

• f085 – multiple gears (cogs)
• f0ad – wrench
• f141 – ellipses
• f040 – pencil

Only thing left to do is clean up some hover effect stuff.

/* Remove OOTB Site Actions hover (appears as underline under icon) */
.ms-siteactions-normal > a:hover {
	text-decoration: none;
}

/* Set gear icon hover color */
.ms-siteactions-normal > a:hover:before {
	color: #7AC7FF;
}

/* Remove OOTB Site Actions hover */
.ms-siteactions-hover {
	background: transparent;
	border-right-color: transparent;
}

You are done! Now I will say I don’t use FontAwesome as described on their site. Their site suggests adding mark-up and in SharePoint, we don’t often have that luxury. The way I use it above via a :before pseudo element is completely supported, and is just another way to do things.

Option 2

Option 2 is similar to option 1 in that we will hide the default gear icon and set something new. Instead of using an icon font, you could use a custom image. All you need is the following code, updating the image URLs on lines 9 and 17.

/* Hide Site Actions gear icon */
.ms-siteactions-imgspan {
	display: none;
}

/* Insert new Site Actions image */
.ms-siteactions-normal > a:before {
	content: "";  /* Required for pseudo element */
	background: url("http://placekitten.com/g/20/20");  /* Image URL */
	height: 20px;  /* Height of image */
	width: 20px;  /* Width of image */
	display: block;  /* Forces respect of width and height */
}

/* Set Site Actions image hover */
.ms-siteactions-normal > a:hover:before {
	background: url("http://placecage.com/20/20");  /* Hover image URL */
}

/* Remove OOTB Site Actions hover */
.ms-siteactions-hover {
	background: transparent;
	border-right-color: transparent;
}

That’s it!

Just over a year ago I wrote a post about stacking the SharePoint 2013 Suite Bar on top of the Ribbon, thus collapsing down the needed real estate for the top area of your SharePoint site.  I was asked this week if it was possible to do it for SharePoint Online / Office 365. As with SharePoint 2013 on-premises, you can accomplish this with CSS – it just takes a few more lines of code to pull it off. 

If you are looking for a solution like this for SharePoint 2013 on-premises, please check out the sister post, Stack the SharePoint 2013 Suite Bar on top of Ribbon.

This post is going to sound a lot like the last one, Stack the SharePoint 2013 Suite Bar on top of Ribbon, because let’s face it, we are doing the same thing, just for a different flavor of SharePoint.

Step 1: Hide unnecessary components in the Suite Bar, if desired

If you look at the Suite Bar, the items on the left (Office Apps Launcher, Office 365 logo and the Sites button) aren’t necessarily required – it depends on your use of SharePoint Online. The right side on the other hand has some pretty vital stuff (most notably Site Actions).

If you look at the Ribbon, items on the right are important but items on the left (sharing, focus on content toggle, etc.) are less so.

These two areas can be collapsed down to reduce the needed space for the Suite Bar and the Ribbon at the top of your site.

If you want to keep the left side Suite Bar tools (Office Apps Launcher, Office 365 logo and the Sites button) you certainly can, just skip this step.

You can hide the unnecessary items with the following CSS:

/* Hide Suite Bar elements */
#O365_MainLink_NavMenu, /*Office 365 App Dashboard link */ 
.o365cs-nav-header16 .o365cs-nav-topItem.o365cs-nav-o365Branding, /* Office 365 Logo */ 
#O365_MainLink_Logo + .o365cs-nav-appTitleLine, /* Divider between Office 365 logo and Sites button */ 
.o365cs-nav-topItem a[aria-label="Go to team sites"], /* Sites button */
#O365_MainLink_Help /* Help button (OPTIONAL) */ {
	display: none;
}

Step 2: Hide unnecessary components in the Ribbon

Use this CSS to hide the right side Ribbon components:

/* Hide right-side Ribbon options */
#RibbonContainer-TabRowRight {
	display: none !important;  /* !important needed to override SharePoint inline style */
}

Step 3: Float the Suite Bar

Next the Suite Bar needs to be removed from the flow of the document so the Ribbon area can slide up to the very top of the page. You can do this with a simple float:

/* Float the Suite Bar to remove from document flow and allow ribbon to move up */
#suiteBarDelta {
	float: right;
}

Works great but the Suite Bar is under the Ribbon area.

Step 4: Stack the Suite Bar to show on top of the Ribbon

The DIV that wraps the Suite Bar is before the DIV that wraps the Ribbon, so their natural stacked order is for the Ribbon to be on top.  Trying to fix this by targeting the Suite Bar and altering the stacking order (z-index) doesn’t work, but you can target the Ribbon and alter the stacking order for that instead.

/* Alter stacking order */
#s4-ribbonrow {
	z-index: -1; /* Allows Suite Bar to show on top of Ribbon */
}

This works, but renders the Ribbon useless because you can no longer click on the Ribbon tabs. Add a little secret sauce in the form of position:static to get this working again:

/* Alter stacking order and set positioning for ribbon */
#s4-ribbonrow {
	z-index: -1;  /* Allows Suite Bar to show on top of Ribbon */
	position: static;  /* Secret sauce - needed to maintain ribbon functionality */
}

And the final result:

Step 5: Match up the height of the Suite Bar and Ribbon

Since the Suite Bar in SharePoint Online is taller than SharePoint 2013 on-premises we need to make some further adjustments to match up the Suite Bar height to the Ribbon or vice versa. Pick the one you want and implement the following code accordingly:

Match Suite Bar to Ribbon height

Add the following CSS to reset the Suite Bar components to match the ribbon height of 33 pixels. You will need to set the width for the first style statement based on what you have opted to show in the Suite Bar.

/* Use one of the following widths based on what is displayed in the Suite Bar: */
#suiteBarDelta {
/* Notifications, Site Actions and Profile Pic only */
	width: 139px; 
/* Notifications, Site Actions, Help and Profile Pic only */
	/* width: 189px; */
/* All Suite Bar options */
	/* width: 430px;  */
}

/* Reset Suite Bar container height */
#suiteBarTop {
	height: 33px !important;  /* !important needed to override SharePoint inline style */
}

/* Change height of nested components in Suite Bar */
#suiteBarDelta .o365cs-nav-header16,
#suiteBarDelta .o365cs-nav-header16 .o365cs-nav-o365Branding,
#suiteBarDelta .o365cs-nav-header16 .o365cs-nav-button,
#suiteBarDelta .o365cs-me-tileview,
#suiteBarDelta .o365cs-me-presence5x50,
#suiteBarDelta .o365cs-me-tileimg-doughboy,
#suiteBarDelta .o365cs-me-tileimg {
	height: 33px;
}

/* Change width of nested components in Suite Bar */
#suiteBarDelta .o365cs-me-tileview,
#suiteBarDelta .o365cs-me-tileimg{
	width: 33px;
}
#suiteBarDelta .o365cs-nav-header16 .o365cs-me-nav-item {
	min-width: 38px;
}

/* Reset Suite Bar Text (if showing Office 356 and Sites) */
#suiteBarDelta .o365cs-nav-header16 .o365cs-nav-brandingText {
	font-size: 16px;
	line-height: 1;
	margin-top: -5px;
}

/* Reset profile pic image size */
#suiteBarDelta .o365cs-me-personaimg {
	height: 33px;
	width: 33px !important;  /* !important needed to override SharePoint inline style */
}

/* Alter location of notification number bubble */
#suiteBarDelta .o365cs-flexPane-unseenCount {
	top: 15px;
	left: 5px;
}

Here is the final result:

Match Ribbon to Suite Bar height

Alternatively use the following code to match the Ribbon to the Suite Bar height of 50 pixels. You will need to set the width for the first style statement based on what you have opted to show in the Suite Bar.

/* Use one of the following widths based on what is displayed in the Suite Bar: */
#suiteBarDelta {
/* Notifications, Site Actions and Profile Pic only */
	width: 156px; 
/* Notifications, Site Actions, Help and Profile Pic only */
	/* width: 206px; */
/* All Suite Bar options */
	/* width: 490px;  */
}

/* Override inline style height to match Suite Bar height */
#s4-ribbonrow {
	height: 50px !important;  /* !important needed to override SharePoint inline style */
}

/* Increase height of nested Ribbon containers */
#globalNavBox,
.ms-cui-topBar2,
.ms-cui-tts, .ms-cui-tts-scale-1, .ms-cui-tts-scale-2,
.ms-cui-tt, .ms-cui-cg {
	height: 50px;
}

/* Space down Ribbon tabs */
.ms-cui-tt-a {
	margin-top: 19px;
}

And the result:

A note about the width property

The width business in this last step is a pain at best. The better solution would be to set the width to auto and let it naturally expand to the amount of space needed for the visible Suite Bar items. Unfortunately the auto value wasn’t working in IE or Chrome in this particular case. So setting an exact width was the alternative.

Final code

Note that the code below has BOTH height solutions. If you use this as is in SharePoint, the Ribbon will increase in height and the Suite Bar will decrease in height. You need to pick one or the other and delete out the unnecessary solution.

/* ---- Common Rules ---- */

	/* Hide Suite Bar elements */
		#O365_MainLink_NavMenu, /*Office 365 App Dashboard link */ 
		.o365cs-nav-header16 .o365cs-nav-topItem.o365cs-nav-o365Branding, /* Office 365 Logo */ 
		#O365_MainLink_Logo + .o365cs-nav-appTitleLine, /* Divider between Office 365 logo and Sites button */ 
		.o365cs-nav-topItem a[aria-label="Go to team sites"], /* Sites button */
		#O365_MainLink_Help /* Help button (OPTIONAL) */ {
			display: none;
		}

	/* Hide right-side Ribbon options */
		#RibbonContainer-TabRowRight {
			display: none !important;  /* !important needed to override SharePoint inline style */
		}

	/* Float the Suite Bar to remove from document flow and allow ribbon to move up */
		#suiteBarDelta {
			float: right;
		}

	/* Alter stacking order and set positioning for ribbon */
		#s4-ribbonrow {
			z-index: -1;  /* Allows Suite Bar to show on top of Ribbon */
			position: static;  /* Secret sauce - needed to maintain ribbon functionality */
		}


/* ----------------------- Correct Height of Bars ----------------------- */

	/* ---- To force Suite Bar to match Ribbon height ---- */

		/* Use one of the following widths based on what is displayed in the Suite Bar: */
			#suiteBarDelta {
			/* Notifications, Site Actions and Profile Pic only */
				width: 139px; 
			/* Notifications, Site Actions, Help and Profile Pic only */
				/* width: 189px; */
			/* All Suite Bar options */
				/* width: 430px;  */
			}

		/* Reset Suite Bar container height */
			#suiteBarTop {
				height: 33px !important;  /* !important needed to override SharePoint inline style */
			}

		/* Change height of nested components in Suite Bar */
			#suiteBarDelta .o365cs-nav-header16,
			#suiteBarDelta .o365cs-nav-header16 .o365cs-nav-o365Branding,
			#suiteBarDelta .o365cs-nav-header16 .o365cs-nav-button,
			#suiteBarDelta .o365cs-me-tileview,
			#suiteBarDelta .o365cs-me-presence5x50,
			#suiteBarDelta .o365cs-me-tileimg-doughboy,
			#suiteBarDelta .o365cs-me-tileimg {
				height: 33px;
			}

		/* Change width of nested components in Suite Bar */
			#suiteBarDelta .o365cs-me-tileview,
			#suiteBarDelta .o365cs-me-tileimg{
				width: 33px;
			}
			#suiteBarDelta .o365cs-nav-header16 .o365cs-me-nav-item {
				min-width: 38px;
			}

		/* Reset Suite Bar Text (if showing Office 356 and Sites) */
			#suiteBarDelta .o365cs-nav-header16 .o365cs-nav-brandingText {
				font-size: 16px;
				line-height: 1;
				margin-top: -5px;
			}

		/* Reset profile pic image size */
			#suiteBarDelta .o365cs-me-personaimg {
				height: 33px;
				width: 33px !important;  /* !important needed to override SharePoint inline style */
			}

		/* Alter location of notification number bubble */
			#suiteBarDelta .o365cs-flexPane-unseenCount {
				top: 15px;
				left: 5px;
			}



/* ----------------------- OR ----------------------- */



	/* ---- To force Ribbon to match Suite Bar height ---- */

		/* Use one of the following widths based on what is displayed in the Suite Bar: */
			#suiteBarDelta {
			/* Notifications, Site Actions and Profile Pic only */
				width: 156px; 
			/* Notifications, Site Actions, Help and Profile Pic only */
				/* width: 206px; */
			/* All Suite Bar options */
				/* width: 490px;  */
			}

		/* Override inline style height to match Suite Bar height */
			#s4-ribbonrow {
				height: 50px !important;  /* !important needed to override SharePoint inline style */
			}

		/* Increase height of nested Ribbon containers */
			#globalNavBox,
			.ms-cui-topBar2,
			.ms-cui-tts, .ms-cui-tts-scale-1, .ms-cui-tts-scale-2,
			.ms-cui-tt, .ms-cui-cg {
				height: 50px;
			}

		/* Space down Ribbon tabs */
			.ms-cui-tt-a {
				margin-top: 19px;
			}

Be it clowns, creepy movies, dark basements with a single dingy light bulb or the next presidential candidate, we all have our fears. What I don’t want anyone to be afraid of is adding some custom CSS to their SharePoint site. With the push to not use custom master pages in SharePoint Online / Office 365, more and more people are looking for alternatives on how to pull off small tweaks (and even big ones) in their SharePoint site user interface that doesn’t involve custom master pages.

CSS isn’t for everybody, but…

I loooooove CSS and would happily pack a picnic for a sunny afternoon leaning against a tree whispering sweet nothings to CSS code – ok that is a bit much but you get my drift. CSS is a great tool to quickly and efficiently make UI modifications that range anywhere from changing out a logo, to completely hiding something from web site users.  But when you aren’t used to it, CSS can be weird and intimidating and flat out just look a little funny.   I don’t want to push anyone to use something that they aren’t comfortable with. However…

There is only so much you can do with SharePoint Site Settings

While it would be nice, there just isn’t a setting available via the browser for everything you may want to change about the SharePoint UI.  Most customizations require custom code.

CSS is a low impact solution

Quick to pull together, implement and apply, CSS is an ideal solution for many UI changes and challenges in SharePoint.  Other code languages can have a steeper learning curve, can be more involved to implement, and can have a farther reaching impact across your SharePoint site. CSS files are small, fast to download and easy to update on the fly. You don’t have to package anything up, deploy anything, redeploy anything, etc. CSS can simply just be easier to manage. Plus while CSS gone awry may make things look funny or seemingly disappear from your user interface, it won’t break your site like other custom code solutions can.

It’s time to take the plunge

You don’t have to learn CSS in order to implement CSS snippets that have been written by other individuals. Any familiarity that you have or gain will certainly help, but it isn’t required. You can know what a car engine looks like without knowing how to put a new one in a vehicle.

Easiest way to implement custom CSS in your SharePoint site

If you are running publishing sites on SharePoint Online/Office 365 or on-premises with SharePoint 2013, you have access to a handy setting that will allow you to link to a CSS file if your choosing.

If you are running top-level non-publishing sites (such as Team Sites), you have to either edit the master page or use JavaScript injection to add a CSS file to your site, UNLESS you are wanting single page changes. In that case you can add custom CSS via the Script Editor web part.

• JavaScript injection – if you aren’t comfy with code, JavaScript injection may not be for you as it is a little bit more advanced.
• Script Editor Web Part – if you have changes on one or maybe a few pages, you can use this web part to add CSS. The problem is the CSS will only be applied to that single SharePoint web page, so this isn’t a good solution for an entire site that needs changes.
• Edit the master page – I know this is what you may want to avoid, but honestly this is the easiest and quickest solution.

Bottom line is that SharePoint non-publishing sites aren’t set up well to handle CSS additions unless you get into customizing your master page – which out of the three options really is the fastest and most efficient.

Child team sites under a publishing site are the exception to this rule. Since they are a child of a publishing site, they can inherit the CSS settings from the parent site.

Are you unsure if you have a publishing site or not? Jump to Step 3.1 and 3.2 below.  If you don’t see “Master page” in the Site Settings, you don’t have a publishing site.

How to add a custom CSS file to your SharePoint site

Step 1: Create the CSS file

1. Create a CSS file. You can use simple tools like Notepad, Notepad++ or TextEdit (first go to Format -> Make Plain Text so you can save a CSS file). You can use more advanced code editors like Sublime Text or SharePoint Designer, or go all out and use something like Dreamweaver. Bottom line is you don’t have to purchase software to create a CSS file. A free text editor like Notepad works just fine. All of the linked tools above are free or have an unlimited free trial (Sublime Text).
2. Create a new file, add the CSS code and save the file, making sure it has the .CSS file extension.

Step 2: Add the CSS file to SharePoint

1. The new CSS file can live anywhere you like within the SharePoint framework. Some suggested locations:
   • Style Library – access via Site actions -> Site content.
   • Site Assets Library – access via Site actions -> Site content.
   • SharePoint Web Server – requires access to the server. One suggested file location is TEMPLATE/LAYOUTS/1033/STYLES/CUSTOM FOLDER YOU CREATE.
2. For Style Library or Site Assets Library, you can upload the file via a mapped network drive, via SharePoint Designer, or via direct upload through the browser.
3. Check in and publish the file.
   • SharePoint Online/Office 365: From the web browser, select the ellipses to the right of the file name, then select the next ellipses, and choose Advanced -> Check In.  Choose the  1.0 Major version (publish) radio button option and select OK.
   • On-premises: From the web browser, select the ellipses to the right of the file name, then select the next ellipses, and choose Publish a Major Version.  Select OK in the modal window.
   • SharePoint Designer: Right click on the file and select Check In. Select the Publish a major version radio button and then select OK.

Step 3: Apply the CSS file

1. Go to Site actions -> Site settings.
2. Select Master page under the Look and Feel column.
3. Expand the Alternate CSS URL section at the bottom of the page.
4. Select the Specify a CSS file to be used by this site and all sites that inherit from it radio button.
5. Select the Browse button. Navigate to the location of your CSS file and select the file.  The modal window will automatically open the Style Library for you.
   If you added the CSS file on the web server, you will need to manually enter in the URL based on where you saved the file. For example if you added the file to the suggested location above, you would enter in /_layouts/1033/styles/CUSTOM FOLDER/FILE_NAME.css.
6. Select Insert.
7. Optionally check to Reset all subsites to inherit this alternate CSS URL (on-premises only).
8. Select OK in the Site Master Page Settings screen.
9. Your custom CSS will be applied to the site.

Step 4: Edit your CSS file moving forward

Any time you need to make changes to the file, go to the location where you saved the file. Check out the file (if in the Style Library or Site Assets Library). Make your changes and save the file. You can do this through a mapped network drive, SharePoint Designer, or by re-uploading an updated copy of the CSS file.  Check in and publish your file (see Step 2.3 above) and your changes will appear to you and all of your site users.

Starting to like CSS some?

Let me convince you even more. Check out my SharePoint CSS Experience course.  One day is spent on learning how to write CSS, and the second day is spent on totally rebranding SharePoint 2010 and 2013 using CSS only. And you won’t once touch JavaScript, master pages or anything outside of glorious CSS.  

As a follow up to the previous post, “CSS scares me!” – How to Move Past the Intimidation and Implement Custom CSS in SharePoint, this second part is going to cover how to add a CSS file reference to your SharePoint master page. 

For an introduction, check out the first post.  We are going to jump right into it for this post.  Steps 1 & 2 have been repeated below for your convenience.  Also, this post is not for Design Manager!

How to add a custom CSS file to your SharePoint site

Step 1: Create the CSS file

1. Create a CSS file. You can use simple tools like Notepad, Notepad++ or TextEdit (first go to Format -> Make Plain Text so you can save a CSS file). You can use more advanced code editors like Sublime Text or SharePoint Designer, or go all out and use something like Dreamweaver. Bottom line is you don’t have to purchase software to create a CSS file. A free text editor like Notepad works just fine. All of the linked tools above are free or have an unlimited free trial (Sublime Text).
2. Create a new file, add the CSS code and save the file, making sure it has the .CSS file extension.

Step 2: Add the CSS file to SharePoint

1. The new CSS file can live anywhere you like within the SharePoint framework. Some suggested locations:
   • Style Library – access via Site actions -> Site content.
   • Site Assets Library – access via Site actions -> Site content.
   • SharePoint Web Server – requires access to the server. One suggested file location is TEMPLATE/LAYOUTS/1033/STYLES/CUSTOM FOLDER YOU CREATE.
2. For Style Library or Site Assets Library, you can upload the file via a mapped network drive, via SharePoint Designer, or via direct upload through the browser.
3. Check in and publish the file.
   • SharePoint Online/Office 365: From the web browser, select the ellipses to the right of the file name, then select the next ellipses, and choose Advanced -> Check In.  Choose the  1.0 Major version (publish) radio button option and select OK.
   • On-premises: From the web browser, select the ellipses to the right of the file name, then select the next ellipses, and choose Publish a Major Version.  Select OK in the modal window.
   • SharePoint Designer: Right click on the file and select Check In. Select the Publish a major version radio button and then select OK.

Step 3: Add a reference to the CSS file from the master page

1. Check out (if needed) and Open the master page file applied to the web site. You can determine which file is applied by doing the following (this first method applies to publishing sites only):
   • Go to Site actions -> Site settings.
   • Select Master page under the Look and Feel column.
   • See what master page is set for Site Master Page. This is the master page being applied to your publishing web pages.
2. Or, if you are in a non-publishing site you can do the following:
   • Open your SharePoint site in SharePoint Designer.
   • In the Site Objects navigation pane on the left, select Master Pages.
   • Right click on a master page file and see if Set as Default Master Page is grayed out. Keep doing this until you find the master page file with Set as Default Master Page already grayed out. Your winner is the same file that is applied as the master page for the site.
3. You can open the master page file via SharePoint Designer, via a mapped network drive, or by downloading the master page file to your desktop (Site Actions -> Site Settings -> Master pages and page layouts -> locate file and select the arrow -> Download a copy) and then opening the file in a code editor of your choice. Refer back to the list in Step 1.1 for application suggestions, although I don’t suggest messing with Dreamweaver in this case.
4. Once you have the file open, run a search/find for DeltaPlaceHolderAdditionalPageHead. You should end up here:

   <SharePoint:AjaxDelta id="DeltaPlaceHolderAdditionalPageHead" Container="false" runat="server">

5. BEFORE that tag you need to add the following:

   <link rel="stylesheet" type="text/css" href="PATH-TO-YOUR-CSS-FILE/FILE-NAME.css" />

6. Update the HREF path to reflect the location of your CSS file.
7. If you added the file to the Style Library, you would enter in /Style Library/CUSTOM FOLDER (optional)/FILE-NAME.css.
   If you added the file to Site Assets, you would enter in /SiteAssets/CUSTOM FOLDER (optional)/FILE-NAME.css.
   If you added the CSS file on the web server, you would enter in /_layouts/1033/styles/CUSTOM FOLDER (optional)/FILE-NAME.css.
8. Save your file.
9. Check in (if needed), upload (if you downloaded a local copy) and/or publish the file (if in a publishing site).
10. Your custom CSS will be applied to the site.

Step 4: Edit your CSS file moving forward

Any time you need to make changes to the CSS file, go to the location where you saved the CSS file. Check out the file (if in the Style Library or Site Assets Library). Make your changes and save the file. You can do this through a mapped network drive, SharePoint Designer, or by re-uploading an updated copy of the CSS file.  Check in and publish your file (see Step 2.3 above) and your changes will appear to you and all of your site users.

Starting to like CSS some?

Let me convince you even more. Check out my SharePoint CSS Experience course.  One day is spent on learning how to write CSS, and the second day is spent on totally rebranding SharePoint 2010 and 2013 using CSS only. And you won’t once touch JavaScript, master pages or anything outside of glorious CSS.  

That is a mouthful of a title but luckily this is a simple fix for an annoying bug in SharePoint 2013.  Between SharePoint 2010 and 2013, the DynamicHorizontalOffset and DynamicVerticalOffset properties in the AspMenu control became useless because of how the drop down menus are styled in CSS by SharePoint.  You can set these properties all day long and nothing comes of it.  So abandon that and just use the following CSS fix.

The Problem

You are utilizing drop down menus (fly out menus) in your SharePoint 2013 site and you want to change the default location of the menu. Maybe the drop down menu overlaps a larger navigation bar or button styling that you have implemented. For example:

There are two properties available for the Menu control, DynamicHorizontalOffset and DynamicVerticalOffset, that allow you to control the placement of the dynamic (their fancy word for drop down) menu.  In SharePoint 2010 these worked great.  SharePoint 2010 also had a table based layout for navigation.

With the move to list based navigation in SharePoint 2013, CSS is used more heavily for navigation design and display.  If you dig around in the CSS you will find the following:

• The drop down menus are hidden from the page using absolute positioning and large, negative top and left values.  If you want proof, add this to your site:

  ul.dynamic {top: 0; left: 0;}

• When you hover over a static (another fancy word they use that means the stuff that is always showing) navigation list item (LI) that has a child drop down menu, the parent list item gets another class added (hover) and the nested drop down menu list container (UL) has inline styles added. OUCH.
• When you move back off the static list item (LI) the hover class is removed and a new class is added, hover-off (but only temporarily).
• These are actual classes that are being added, hover and hover-off, NOT :hover pseudo classes that appear in the CSS file only.

The inline styles are preventing anything the Dynamic Vertical Offset and Dynamic Horizontal Offset values could be doing for you.

The Fix

With a little CSS you can manually set your own positioning for the drop down menu:

.ms-core-listMenu-horizontalBox li.static.dynamic-children.hover > ul.dynamic,
.ms-core-listMenu-horizontalBox li.static.dynamic-children.hover-off > ul.dynamic{
	top: 55px !important;  /* !important added to override inline SharePoint style */
	left: -15px !important;  /* !important added to override inline SharePoint style */
}

And here is the result:

A few notes about the above CSS code:

• You can and may need to alter the opening class in the selector. Right now it is set to .ms-core-listMenu-horizontalBox which will target the top navigation (global nav) in a site using Seattle.master. This may need to be altered if you are using a custom master page or have stripped out the code that generates this class.
• You will need to tweak the top and left values to fit your design.
• The further away you set the physical menu placement, the more you increase your chances of losing the hover menu. The placement change is based on the presence of the hover class, which is only added when you hover over the static menu item. Once you move off the static menu item and the hover class is dropped, the drop down menu will disappear before you can get your cursor over an item and select it.  However you can make changes to get around this issue (see below).
• Including the hover-off as a variation of the selector (line 2 in the above code) helps offset the issue of the menu disappearing too quickly when you hover off the static menu item, but only by a little bit.  However…
• You need to include the hover-off as a variation of the selector (line 2 in the above code). Without it you will get very ugly menu jumping.

Forcing the Drop Down Menu to Continue to Show with Large Spacing

This whole fix depends on the presence of the hover class when you are mousing over the static item. As long as you stay hovered over that item, you won’t lose the placement of your drop down menu. But what if you want a larger space between the bottom of the static item and the drop down menu? You can increase the size of the static menu item on the sly using a bottom margin.

In the below code sample, the drop down menu is set even further away from the static menu item:

.ms-core-listMenu-horizontalBox li.static.dynamic-children.hover > ul.dynamic,
.ms-core-listMenu-horizontalBox li.static.dynamic-children.hover-off > ul.dynamic{
	top: 75px !important;  /* !important added to override inline SharePoint style */
	left: -15px !important;  /* !important added to override inline SharePoint style */
}

But when you mouse off the static nav item, the drop down menu disappears before you can get to it in order to select something.

If I add a larger bottom margin to the navigation items, this problem clears up.

.ms-core-listMenu-horizontalBox ul.static > li > a {
    margin-bottom: 35px;
}

Adding this bottom margin may cause other issues in your design, but they should be rather easy to patch up.

One approach to writing CSS is to use functional CSS, which are selectors (classes) with a singular purpose.  For example, let’s say you need a given item on your web page to be absolute positioned, have a purple background and an enlarged font size. Instead of putting three declarations in a single CSS style statement, you would split up the declarations across three generic CSS style statements and specify three classes for the HTML element. It is a different yet effective way to do things. SharePoint 2013 actually has several functional CSS classes already baked in their CSS files and ready for your use. 

An Example of Functional CSS

Going back to our example before, here is one way we could work the HTML and CSS:

<div class="purple-people-eater">It was a one-eyed, one-horned Flyin' Purple People Eater</div>

.purple-people-eater {
   position: absolute;
   background: purple;
   font-size: 2rem;
}

There is nothing wrong with this approach but what if we want to apply similar but not the exact same declarations on a different HTML element?

<div class="yellow-sub">We all live in a yellow submarine.</div>

We either have to duplicate declarations like so:

.yellow-sub {
   position: absolute;
   background: yellow;
   font-size: 2rem;
}

Or break things out like this:

.purple-people-eater, 
.yellow-sub {
   position: absolute;
   font-size: 2rem;
}

.purple-people-eater {
   background: purple;
}

.yellow-sub {
   background: yellow;
}

A different approach would be to use functional CSS. Our entire approach would change. The HTML would be revised to look like this:

<div class="pos-abs bkg-pur fs-2">It was a one-eyed, one-horned Flyin' Purple People Eater</div>

<div class="pos-abs bkg-yel fs-2">We all live in a yellow submarine.</div>

And this would be the CSS:

.pos-abs {
   position: absolute;
}

.bkg-pur {
   background: purple;
}

.bkg-yel {
   background: yellow;
}

.fs-2 {
   font-size: 2rem;
}

On the surface it doesn’t look like much of a difference code length wise. However this is a small code sample. Where else in the site do we need absolute positioning, colored backgrounds and an enlarged font size? The answer may be “many places”. Over time and as the code base grows, functional CSS can actually save you a lot of lines of code and make your overall approach to styling your site simpler and faster to create.

The naming convention behind the classes is totally up to you. Continuing in the same vein that was started above, the CSS could include:

.pos-abs {
   position: absolute;
}

.pos-rel {
   position: relative;
}

.pos-sta {
   position: static;
}

.bkg-pur {
   background: purple;
}

.bkg-yel {
   background: yellow;
}

.bkg-grn {
   background: green;
}

.fs-1 {
   font-size: 1rem;
}

.fs-1-5 {
   font-size: 1.5rem;
}

.fs-2 {
   font-size: 2rem;
}

.fs-2-5 {
   font-size: 2.5rem;
}

If you want to learn more about Functional CSS, I suggest you check out Building and shipping functional CSS by Cole Peters.

What Can SharePoint Offer?

Most of my work is taking what SharePoint spits out and making it look different.  I live in the world of pre-determined HTML that I can’t modify.  If you are in the same place, this post won’t necessarily help you.

If you are creating HTML for your SharePoint site, be it through master pages, page layouts, site pages, XML, CEWP, CSWP, display templates, custom apps, custom controls, custom code… you get the idea… then here is a list of CSS selectors (in this case they are all classes) that you can reference in your code to start to build out functional CSS for your site.

SharePoint 2013 Functional CSS Classes

• All of the following style statements are from corev15.css since that is the only CSS file that is used consistently across SharePoint.
• All theme (composed look) comments are intact as well so you can see where declarations will be potentially manipulated.
• You don’t have to leave the declarations as is; anything can be expanded or overwritten. For example, by default alternating table rows have a transparent background. That can be changed to a solid color while still keeping the class name intact.
• There is a set of “iffy” selectors located at the very bottom of this post.

More Functional Styles

The following is my “iffy” pile of functional CSS. These style statements are generic, but not nearly as generic as some of the above statements.

This is a quick and simple trick to turn a long SharePoint global/top navigation drop down (a.k.a. fly-out) menu into an easier to read, two or more column display. All you need is a little CSS.

The Challenge

You are using SharePoint’s global/top navigation (managed or structured) and a drop down menu has grown so long it resembles a holiday meal grocery list for 30 people.

The Solution

Add this blob of CSS to your custom CSS file, making width adjustments as necessary to alter the size of the drop down box and to create a two, three, four or more column design. The comments explain what each declaration does and are not required in final code.

ul.dynamic {
  width: 300px !important;  /* !important needed to override generated inline style - update overall width here */
  box-shadow: 0 0;  /* OPTIONAL: Removes default shadow on drop down menu */
}

li.dynamic {
  line-height: 1.5em;  /* OPTIONAL: Adds some leading (space between navigation items) */
  float: left;  /* Magic to make this technique work */
  width: 50%;  /* Use 50% for 2 columns, 33.333% for 3 columns, 25% for 4 columns, etc. */
  padding: 1%;  /* OPTIONAL: Pads out the navigation items */
  box-sizing: border-box;  /* Prevents the width vs. padding math game and alters default box model rendering */
}

The result:

Note: If you have modified the current/left/quick launch navigation to include drop down menus, then you will need to expand the selectors above to include a parent class, such as .ms-core-listMenu-horizontalBox.

Wha, wait! This almost looks like a mega menu

Want more?  This year at SPTechCon Austin I did a demo for a CSS only solution to convert the global/top nav drop down into what I have coined as “mega-menu-ish”. This was done in my conference session, “92% of Branding SharePoint is CSS, So Why Are You Living in a Master Page?” and here is a session recap complete with code.

The (Possible) Drawback

This technique won’t always play well with another “drill down” level of navigation. It really depends on the design.  With most layouts there is no usability-friendly way to show another fly-out from a columnized drop down menu without the use of JavaScript. But for some designs you can make it work.  The conference session recap mentioned above includes one such example.

How to Use this CSS

If you need a hand getting started with custom CSS for SharePoint, please check out these posts:

• “CSS scares me!” – How to Move Past the Intimidation and Implement Custom CSS in SharePoint
• Part 2: “CSS scares me!” – Implement Custom CSS in SharePoint Master Pages

Here is a recap of our sessions from SPTechCon Austin 2016…

“Bootstrap” Responsive SharePoint, the RIGHT Way

Dustin Miller and Heather Solomon

Session Recap

Don’t stick a bunch of arbitrary and non-semantic markup into your SharePoint master page and overload it with gobs of JavaScript files to try to make it responsive.
Optimize not just for devices but also for performance by learning how to streamline your JavaScript and CSS while minimizing changes to SharePoint’s out-of-the-box code files. Using the power of CSS pre-processors (like SASS), Dustin and Heather will show you how to properly “Bootstrap” your responsive SharePoint design.

Level: Advanced; Audience: Developer Essentials

Using Office UI Fabric in Custom List Views

Dustin Miller

Session recap to be released, code is available here

The Office 365 Design Language has become the de-facto standard for so-called “Apps” for SharePoint Online and on-premise. While there are certainly pitfalls to using prescribed CSS frameworks like Office UI Fabric, there are ways to pick and choose the parts you need for your project. In this session, you will:

Learn about Office UI Fabric and how it fits in with other CSS and Web Component frameworks
Discover where CSS frameworks like Office UI Fabric are helpful, and where they’re harmful
See how to create custom list views and look and feel like native SharePoint/Office components, including new date/time pickers, more accessible forms and custom informational pop-overs

Level: Intermediate; Audience: Developer Essentials

92% of Branding SharePoint is CSS, So Why Are You Living in a Master Page?

Heather Solomon

Session Recap and Code Files

Would you causally saunter outside without a stitch of clothing on? CSS is the couture of the web and the stylish heartbeat of your SharePoint site design. So don’t let your site go naked, and stop messing with that master page! It is time to capitalize on the power of CSS and see how much you can alter the design of your site without ever touching a line of HTML.

Utilizing existing classes to craft useful CSS selectors, live in this session Heather will completely rebrand SharePoint with only CSS (yes, seriously – all code provided) AND into something that looks good. She will add content, logos, swap around navigation, place full size background images and all around make SharePoint dapper again. Come join Heather Solomon in this popular session as she ousts that master page straight out of your life and sweeps in a new wardrobe with CSS.

Level: Intermediate; Audience: Developer Essentials

Data (and text) Mining SharePoint for Fun and Profit

Dustin Miller

The whole shebang: walkthrough and code together here

Okay, folks, this one is “heady” and doesn’t focus on creating for SharePoint or configuring SharePoint. Natural Language Processing and Machine Learning / Neural Networks are becoming an important part of every day business, whether its to make predictions about your users, spot trends in usage, or to identify similar content for promotion. In this session, you will:

• Learn about the preferred language of Data Scientists, Python
• Use 100% free and open source tools (that work on Mac, Windows and Linux) to extract data from SharePoint, including site usage and the content created by your users
• Use data analysis techniques to identify trends in usage data
• Use natural language processing to identify topics of content posted to SharePoint lists, which can be used to assist with automatic taxonomies, or to feed into a Neural Network to make additional inferences about the users and the content – even to correlate with usage analysis to identify “hot topics”
• Create easy-to-digest graphs and reports of data that’s relevant to your business – and I don’t mean just page views

Level: Advanced; Audience: Developer Essentials

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.

Get the mega menu 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:

1. The second item needs to look like a button and be to the right of the first item.
2. In-between the second and third item there needs to be a “Sections” header.
3. The twelfth item needs to start a new column, along with the twenty-first item.
4. Starting at the thirtieth item there needs to be a gray background.
5.  The thirtieth through the thirty-fourth items need to be horizontal instead of vertical.
6. The thirty-fourth item needs to look like a button.
7. The thirty-fifth item through the end needs to be horizontal instead of vertical.
8. 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!

“Bootstrap” Responsive SharePoint, the RIGHT Way

Let’s face it, SharePoint isn’t very responsive.  However you can make it responsive using popular tools that all the cool kids are talking about. 

An Intro to Responsive Design

This SPTechCon Austin 2016 session started off with a discussion about what is responsive design and the differences between liquid, static, adaptive and responsive design. Key takeaways:

• SharePoint is a liquid design up to a point. There are several min-width properties in the CSS that prevents SharePoint from condensing past a certain point.
• Most people switch to a static (fixed-width) design because it plays well with larger displays but the downside is that it isn’t mobile friendly.
• Adaptive design relies on different sets of HTML and CSS to reconfigure the web site layout based on the device width. This is all handled server-side and can be done in SharePoint using Device Channels.
• Responsive design has one set of HTML and then variations of the CSS that reflows the web site layout based on the device width.

Resources:

• Liquidapsive.com

SASS

Next we dove into an intro for SASS (Syntactically Awesome Style Sheets), a CSS preprocessor that introduces things like variables, nesting, mixins, inheritance and other tricks that make writing CSS easier and more efficient. Key takeaways:

• You can use SASS with SharePoint.
• You can use SASS with Bootstrap.
• SASS will streamline your code and help you avoid repetition and tedious updates in the future.
• Can use a tool like Prepros to compile SASS.

Resources:

• SASS
• Prepros

Bootstrap

Once you have SASS installed and are ready to go, you can tackle Bootstrap, the most popular kid on the playground.  The key to using Bootstrap with SharePoint is to not think like you would for a regular web site.  With that approach, integrating Bootstrap is a tedious and nearly impossible task with SharePoint.

But if you remember this key point, you can marry Bootstrap with SharePoint with  lot of success…. just take the CSS from Bootstrap and apply to existing markup in SharePoint.  Yup, that’s it!

Just use your already well-honed copy/paste skills and treat Bootstrap like other code bits that you come across and want to implement into SharePoint.

Resources

• Bootstrap

Where to Go Next

If you want to take this approach to the next level, we spend three whole days making SharePoint responsive in our SharePoint 2013 Responsive Design 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!

It is time to go old school with this #TBT post that answers something I have been asked a few times…. can you make SharePoint 2013 look like SharePoint 2010 (and without the pesky UI version stuff)? The answer is yes, and it can all be done with CSS. 

The Why

Over the past few years I have been asked at conferences and then most recently by a student in my SharePoint CSS Experience class if SharePoint 2013 can be made to look like SharePoint 2010 with CSS only, bypassing the UI version and other riffraff in the site settings. The main reason cited is that users just don’t like how SharePoint 2013 looks and they want to go back to 2010 branding. A lot of 2010 rebranding can be done with CSS, and I will compartmentalize it all so you can pick and choose what page elements you want to send back through the Wayback Machine to look like 2010.

The Setup

Please refer to the following articles for setting up custom CSS in your SharePoint site.

• “CSS scares me!” – How to Move Past the Intimidation and Implement Custom CSS in SharePoint
• Part 2: “CSS scares me!” – Implement Custom CSS in SharePoint Master Pages

The Code

The following code bits have been tested in an on-premises 2013 Enterprise Wiki site.  If you come across issues, please feel free to post them in the comments.  I have not written code for every scrap of SharePoint, just the main wrapper for the site design.  If there is any interest to pull 2010 branding into Office365, I can write up a version of the code.  But everyone I have talked to about this has been on-premises, so that is how I am going to roll for this one.

Without further ado, I am going to start and just go from top to bottom (err, middle really) for this design conversion. A CSS file with all code snippets is available at the end of this post.

Phase 1: Goodbye Suite Bar, Hello Navy Ribbon

Stack and Hide

First stop is to grab code to stack the Suite Bar on top of the Ribbon and hide components that we don’t want to use.

/* Hide the left Suite Bar and right ribbon areas */
	#suiteBarLeft {
		display: none;
	}
	#RibbonContainer-TabRowRight {
		display: none !important; /* !important needed to override SharePoint inline style */
	}


/* Float the Suite Bar to remove from document flow and allow ribbon to move up */
	#suiteBar {
		float: right;
		width: auto;
	}

/* Alter stacking order and set positioning for ribbon */
	#s4-ribbonrow {
		z-index: -1;  /* Allows Suite Bar to show on top of Ribbon */
		position: static;  /* Secret sauce - needed to maintain ribbon functionality */
	}

/* Move Site Actions to left */
	#suiteBarButtons {
		position: absolute;
		left: 0;
		top: 20px;
	}

Here is the result, and please ignore the Site Actions gear and Help icon dangling off in the wrong spot:

Recolor

Next up is recoloring the Ribbon to 2010 navy (#21374c), tweaking the Ribbon tab text placement to make room for Site Actions and also switching to white text to better contrast with the navy background.

The background image that adds the slight fade to both the Ribbon background and the tab hover is still included on the SharePoint 2013 file system. You can opt to just have the navy color, or go one step further and include the background image as well.

/* Recolor Ribbon and Suite Bar to match 2010 Ribbon bar */
	#globalNavBox,
	#suiteBarRight {
		background: #21374c url("/_layouts/15/images/bgximg.png") repeat-x 0 -565px;  /* Background image is optional */
		padding-top: 9px;  /* Match height of 2010 Ribbon bar */
	}

/* Recolor border under Ribbon */
	.ms-cui-topBar2 {
		border-bottom: 1px solid #fff;
	}

/* Lower tab placement */
	.ms-cui-tt-a {
		margin-top: 11px;
	}

/* Reduce tab padding to better fit in Ribbon area */
	.ms-cui-tts > .ms-cui-tt-s > .ms-cui-tt-a > .ms-cui-tt-span,
	.ms-cui-tt-span {
		padding: 4px 8px;
	}

/* Recolor tab text */
	.ms-cui-tt-a > .ms-cui-tt-span,
	.ms-cui-tt-a:hover > .ms-cui-tt-span,
	.ms-browseTab.ms-cui-tt-s > .ms-cui-tt-a > .ms-cui-tt-span {
		color: #fff !important;  /* !important used to override SP CSS file style */
	}

/* Tab hover effect */
	.ms-cui-tt-a:hover {
		background: url("/_layouts/15/images/bgximg.png") repeat-x 0 -1000px;   /* Background image is optional */
		border-color: #5a707b;
	}

/* Shift placement of Ribbon to allow room for Site Actions/Help */
	.ms-cui-tts {
		padding-left: 110px;
	}

Ditch the Cog, Go for Text

Time to stop using the cog/gear/wagon wheel/whirligig or whatever you call the Site Actions icon and just use simple text. Piggybacking off the technique used to switch out the SharePoint icon for something more flexible, simple text can be inserted. Just as before, the background image used in the Site Actions hover effect is still lurking on the SharePoint 2013 web front end and you can opt to use it or lose it.

/* Hide default gear icon */
	.ms-siteactions-imgspan img {
		display: none;
	}

/* Reset SharePoint OOTB width on gear icon container and wrapping hyperlink */
	.ms-siteactions-root > span > a.ms-core-menu-root,  /* Hyperlink */
	.ms-siteactions-imgspan /* Container */  {
		width: auto; 
	}

/* Text to show where gear icon was displayed */	
	.ms-siteactions-root > span > a.ms-core-menu-root:before {
		content: "Site Actions";
		font-weight: normal;
		display: inline-block;  /* Necessary to properly show text */
		color: #fff;
	}

/* Add down arrow to mirror SharePoint 2010 arrow image */
	.ms-siteactions-root > span > a.ms-core-menu-root:after {
		content: "\25be";
		color: #fff;
		padding-left: 5px;
		font-size: .8em;
	}

/* Remove underline on hover */	
	.ms-core-menu-root:hover {
		text-decoration: none;
	} 

/* Add formatting to emulate 2010 */
	.ms-siteactions-root > span > a.ms-core-menu-root {
		box-sizing: border-box;
		padding: 0 6px 0;
		height: 22px;
	}
	.ms-siteactions-normal {
		font-size: .8em;
		border: solid transparent;
		border-width: 1px 1px 0 1px;
	}

/* Hover effect */
	.ms-siteactions-hover {
		background: #21374c url("/_layouts/15/images/bgximg.png") repeat-x 0 -489px;  /* Background image is optional */
		border-color: #8b929a;
		height: 22px; /* Necessary to fix issue of border showing over drop down menu */
	}

Not Without the Help of a Master Page – Except the Help Itself

Without editing the master page, there isn’t an easy way to create an exact replica of the 2010 interface. But the idea is for it to look like 2010, not be 2010. Here is a visual rundown of what I can’t recreate in 2013 with CSS alone, notated in green circles:

Everything is a no can do except for the Help icon. I can’t make it show up in the same spot, but I can provide two options to alter the default formatting:

1. Change over to straight text so you can control the color and background.
2. Change over to the 2010 Help image which creates a light blue icon on a navy background – something you may or may not like.

Option 1: Switch to text

/* Hide 2013 Help icon - needed for both options */
 	#ms-help img {
		display: none;
	}

/* OPTION 1: Switch out Help image for typed punctuation */
	#ms-help {
		margin-top: -7px;
	}
	#ms-help a > span:before {
		content: "?";
		color: #fff;
		font-weight: bold;
		font-size: 1.2em;
	}

Option 2: Switch to 2010 image

/* Hide 2013 Help icon - needed for both options */
 	#ms-help img {
		display: none;
	}

/* OPTION 2: Switch out Help 2013 image for 2010 image */
	#ms-help {
		margin: 2px 0 0 5px;
	}

	#ms-help a:before {
		content: "";
		background: url("/_layouts/15/images/fgimg.png") 0 -245px;
		display: block;
		width: 20px;
		height: 17px;
	}

Just like our other images, the old 2010 image file is still around in 2013.

Last Ribbon Item… the Welcome Menu

Things are nearly done with the Ribbon area. All that is left is tweaking the Welcome Menu to look better on a dark background and bring in the (optional) gradated image for the hover effect.

/* Reformat container to match 2010 */
	.ms-welcome-root {
		height: 20px;
		line-height: 1.5;
		margin-top: 5px;
		padding-right: 0px;
		border: 1px solid transparent;
	}

/* Hover effect */
	.ms-welcome-hover {
		background: #21374c url("/_layouts/15/images/bgximg.png") repeat-x 0 -489px;  /* Background image is optional */
		border: 1px solid #8b929a;
	}

/* Recolor text */
	.ms-welcome-root > a.ms-core-menu-root, 
	.ms-signInLink {
		color: #fff;
	}

/* Hide default arrow image which no longer matches due to dark background */
	.ms-core-menu-arrow img {
		display: none;
	}

/* Add down arrow to mirror SharePoint 2010 arrow image */
	.ms-core-menu-root:after {
		content: "\25be";
		color: #fff;
		padding-left: 5px;
		font-size: .8em;
	}

Now that all of that is done, here is how the 2013 site Ribbon area is looking:

Phase 2: Flip-flop Header Components

One of the bigger things that stands out between the SharePoint 2010 and 2013 designs is the placement of the global navigation, a.k.a. top nav bar, and the search. In 2010, the nav and search are under the icon and header text, while in 2013 they are above and/or to the right of the icon and header text.

Bring in the Gradient

As with the other images, this is completely optional.  The very light gray gradient can be added to the header area. It is the same image file that has already been used with other branding aspects in the Ribbon. I do recommend keeping the top padding no matter what you choose for the gradient. It tightens up the header area to better match 2010. Also included is a couple of style rules that tighten up the spacing with the logo and reduce the title font size:

/* Header container */
	 #s4-titlerow {
		background: #f9f9f9 url("/_layouts/15/images/bgximg.png") repeat-x scroll 0 -1023px;  /* Background image is optional */
		padding-top: 15px;
	}

/* Adjust margin to match 2010 design */
	#titleAreaBox {
		margin-left: 10px;
	}

/* Reduce title font size to match 2010 design */
	#pageTitle {
		font-size: 1.75em;
	}

Modify the Site Icon

Both SharePoint 2010 and 2013 employ a default icon (site logo) in the upper left of the screen. You can choose to keep the 2013 icon and just resize it to match the 2010 design, or you can add back the 2010 icon. Similar to the other images that have been put back into use above, the icon image is in the SharePoint 2013 files. However, it has been updated to be the new, blue logo. So if you want the little orange people back, you will need to add the image to your SharePoint site. The file is included below.

Option 1: Resize the 2013 icon to match 2010

 /* OPTION 1:  Resize 2013 icon to 2010 size */
	#siteIcon {
		margin-right: 0;
		min-width: 55px;
	}
	.ms-siteicon-a {
		display: block;
		width: 40px;
		overflow: hidden;
	}
	.ms-siteicon-a img {
		max-width: 220%;
	}

Here is the result:

Option 2: Add back the 2010 icon

You can pull the older site icon file off a 2010 server or just download it from here.

 /* OPTION 2:  Replace 2013 icon with older 2010 icon */
	#siteIcon {
		margin-right: 0;
		min-width: 45px;
	}
	.ms-siteicon-a {
		display: block;
		background: url("http://spexp-blog-files.s3.amazonaws.com/blog/files/SITEICON.PNG") no-repeat;   /* Download the image file and store locally. Update image path accordingly. */
		width: 32px;
		height: 32px;
	}
	.ms-siteicon-a img {
		display: none;
	}

And the result:

Move the Navigation

Time to shift the navigation down and create that nav bar going across the page:

/* Move and reformat navigation container  */
	.ms-breadcrumb-top {
		position: absolute;
		top: 65px;
		left: 0;
		background: #f6f6f6 url("/_layouts/15/images/selbg.png") repeat-x left top;  /* Background image is optional */
		width: 100%;
		border-bottom: 1px solid #b8babd;
		border-top: 1px solid #e0e0e0;
		min-height: 25px;
		vertical-align: middle;
	}

/* Move nav right */
	.ms-core-listMenu-horizontalBox {
		margin-left: 10px;
	}

/* Adjust spacing of navigation items */
	.ms-core-listMenu-horizontalBox li.static > .ms-core-listMenu-item {
		margin-right: 16px;
		padding: 3px 5px 4px;
		border-width: 0 1px 1px;
	}

/* Adjust spacing of drop down menu arrow */
	.ms-core-listMenu-horizontalBox .dynamic-children.additional-background {
		padding-right: 10px;	
	}

/* Alter text color */
	.ms-core-listMenu-item, 
	.ms-core-listMenu-item:link, 
	.ms-core-listMenu-item:visited {
		color: #3b4f65;
	}

/* Hover effect */
	.ms-core-listMenu-horizontalBox a.ms-core-listMenu-item:hover, 
	.ms-core-listMenu-horizontalBox a.ms-core-listMenu-item.ms-core-listMenu-selected:hover {
		color: #44aff6;
		text-decoration: underline;
	}
	.ms-core-listMenu-horizontalBox li.static .ms-core-listMenu-selected:link, 
	.ms-core-listMenu-horizontalBox li.static .ms-core-listMenu-selected:visited, 
	.ms-core-listMenu-horizontalBox li.static .ms-core-listMenu-selected {
		background: #ccebff url("/_layouts/15/images/selbg.png") repeat-x;  /* Background image is optional */
		border-color: #c6e5f8 #91cdf2 #addbf7;
		color: #003759;
	}

/* Reformat drop down menu */
	.ms-core-listMenu-horizontalBox ul.dynamic {
		box-shadow: 0 0;
		margin-top: -1px;
		padding: 0;
	}

/* Reformat drop down menu navigation items */
	.ms-core-listMenu-horizontalBox ul.dynamic .ms-core-listMenu-item {
		padding: 5px 8px;
	}

/* Drop down menu navigation items hover effect */
	.ms-core-listMenu-horizontalBox ul.dynamic .ms-core-listMenu-item:hover {
		background: #d9d9d9;
		text-decoration: none;
		color: #003759;
	}

/* Vertically align "Edit Links" admin option */
	.ms-listMenu-editLink {
		padding-top: 3px;
	}

In my opinion, moving the nav bar is the final piece to having this throwback design really snap into place.

But of course we will keep going.

Shift that Search

I personally like the Search where it is in the upper right area of the header. It gives that area something to do, matches common design practices, and doesn’t crowd the global navigation. But if you have other plans and need that header space, here is the code to not only move the search, but also reformat it to match 2010. If you only want to move it, you can just use the first style statement (.ms-mpSearchBox), but you will need to tweak the top margin. Try 52 pixels to see if you like it better than 53.

/* Search container */
	.ms-mpSearchBox {
		margin-top: 53px;
		position: relative;  /* Required to view search over top nav bar */
	}

/* Form input field formatting */
	#SearchBox input {
		height: 17px;
		color: #476382;
		font-style: italic;
		font-family: verdana, tahoma, sans-serif;
	}

/* Hide the default 2013 search icon */
	.ms-srch-sb-searchLink img {
		display: none;
	}

/* Add 2010 search icon back */
	.ms-srch-sb > .ms-srch-sb-searchLink {
		margin-top: -1px;
		margin-right: -1px;
		background: url("/_layouts/15/images/gosearch15.png");
		border: 1px solid #e3e3e3;
		height: 19px;
		display: inline-block
	}

/* Reformat search area border */
	.ms-srch-sb-border,
	.ms-srch-sb-border:hover {
		border-color: #e3e3e3;
		background: #fff;
		height: 19px;
	}

Here is the result:

Phase 3: Content Padding and Current Navigation

Last step is reformatting the current navigation, a.k.a. the left nav or quick launch, and with that comes a little content area massaging to make things look right.

Content Area Tweaks

Spacing for one SharePoint element is often created in a seemingly non-associated place. For the current navigation to be tucked up in the left corner a bit better to match 2010, some changes need to be made to other areas in SharePoint:

/* Adjust content box formatting to better match current navigation area and changes */
	#contentRow {
		padding-top: 5px;
	}
	#contentBox {
		margin-left: 180px;
	}

Current Navigation Redo

Now on to the changing up the current navigation formatting, including increasing the size of “section headers” for lack of a better term (this being the first tier of navigation items) and boxing off the navigation area:

/* Navigation container */
	#sideNavBox {
		background: #fcfcfc;
		border: solid #dbddde;
		border-width: 0 1px 1px 0;
		margin: 0;
		padding: 10px 0;
	}
	.ms-core-sideNavBox-removeLeftMargin {
		margin-left: 0;
	}

/* First tier nav items */
	.ms-core-listMenu-verticalBox ul.root > li.static > .ms-core-listMenu-item {
		padding: 5px 10px;
		color: #0072bc;
		font-size: 1.1em;
	}

/* Second tier nav items */
	.ms-core-listMenu-verticalBox ul.root ul.static > li.static > .ms-core-listMenu-item {
		padding-left: 10px;
	}
	.ms-core-listMenu-verticalBox ul.root ul.static > li.static > .ms-core-listMenu-item:hover {
		color: #44aff6;
	}

/* Remove default hover from both tiers of navigation */
	.ms-core-listMenu-verticalBox ul.root li.static .ms-core-listMenu-item:hover {
		background: transparent;
		text-decoration: underline;
	}

/* Separate out nav sections */
	.ms-core-listMenu-verticalBox ul.root ul {
		margin-bottom: 20px;
	}

With that in place, here is the final site design:

Full Code File and Notes

A file with all of the code snippets can be downloaded here.

A note about gradients… all of the 2010 gradients were re-created using original 2010 image files.  All of these gradients could be done using CSS3 gradients instead. If you want to do this, check out CSS3 gradient generators such as the Ultimate CSS Gradient Generator, CSSmatic and CSS3 Factory.

I get this from time to time… “I have added a background color to my SharePoint site but when I go to quick edit or datasheet view in a list, the background color comes through.”

It isn’t that the background color is coming through, it is that SharePoint 2013 didn’t add a background color to the list. It is a transparent. With a little CSS you can overcome that.

The Issue

1. You add a background color to your SharePoint site.
2. It looks fine with your lists.
3. You switch to quick edit or datasheet view for easier editing and all of a sudden that background color just seems weird.

The Fix

Using CSS you can add a background color to either all list views, or alternatively to just the quick edit (datasheet) view.

To affect all lists

.ms-listviewtable {
  background: #fff;
}

To affect only quick edit / datasheet view

table[id^="spgridcontainer"] td {
  background: #fff;
}
table[id^="spgridcontainer"] td.ms-vb-firstCell {
  background: #fff !important;  /* !important used to override inline SharePoint style */
}

I could have just listed the first style statement (table[id^=”spgridcontainer”] td) and then included !important on the background color, but that would unnecessarily add !important to all table cells when we only need it for the first cell. I like to limit how much !important is affecting my code, so I opted to split it out.

The Result

Navigation is key with pretty much any web site and several sites today are choosing to duplicate their top bar navigation in a larger footer area at the bottom of each page. This technique can easily be done in a SharePoint site with a custom master page.

The Goal

I am going to use the Lear Corporation site as an example. Here is their top navigation:

And here is their footer navigation:

The drop down menu items from the top are showed statically by default in the footer as a list of sub topics.  So the data source is the same while the display differs between the two.

The Solution

Creating a second instance of the navigation in SharePoint

My approach to recreating this in SharePoint does require a custom master page.  You could also possibly do it with a SharePoint delegate control or other programming wonderfulness.

1. Open your custom master page file and locate the top navigation menu control.  To find it quickly you can do a search for TopNavigationMenu, which should bring you to this:

   <SharePoint:AspMenu ID="TopNavigationMenu" Runat="server" EnableViewState="false" DataSourceID="topSiteMap" AccessKey="<%$Resources:wss,navigation_accesskey%>" UseSimpleRendering="true" UseSeparateCss="false" Orientation="Horizontal" StaticDisplayLevels="2" AdjustForShowStartingNode="true" MaximumDynamicDisplayLevels="2" SkipLinkText=""/>

2. Copy the SharePoint:AspMenu code block. If you want the ability to remove the navigation from specific pages, also copy the wrapping ContentPlaceHolder tag.
3. Go to the location in the master page where you want the second instance of the navigation to appear.
4. Paste the code block that you copied. You will need to make a few adjustments to the code:
   1. If you copied the ContentPlaceHolder tag, update the ID to be a unique value:

      <asp:ContentPlaceHolder id="PlaceHolderFooterNavBar" runat="server">

   2. In the SharePoint:AspMenu code block, update the ID to be a unique value:

      <SharePoint:AspMenu ID="FooterNavigationMenu" Runat="server" ... >

5. Technically at this point you are done. Save and test and you will see a second instance of the top navigation bar running happily wherever you added it for the second time.

Change control properties based on needs

Where you go from here depends completely on  your design.  To continue to recreate the Lear design, I am going to take advantage of some of the AspMenu settings for the navigation control.

By default the current navigation (aka Quick Launch or left navigation) statically shows the second level of navigation on page load and does not place it in a drop down menu. The top/global nav and the left/current nav use the same control, just with different IDs, data sources and properties. I just need to duplicate some of the properties so I see the same effects in the new footer navigation.

• Change the Orientation from Horizontal to Vertical –> this will show the 3rd level of navigation (which was the drop down contents in the top nav) under the navigation headers.  If you don’t do this, the 3rd level will show to the right and left of the navigation headers.
• Change the StaticDisplayLevels from 2 to 3 –> this will show the 3rd level of navigation (which was the drop down contents in the top nav) by default on page load (vs. only appearing on hover in a drop down menu).
• Change MaximumDynamicDisplayLevels from 2 to 0 –> this will stop any drop down menus from appearing.

Here is the final code block. The ContentPlaceHolder is optional.

<asp:ContentPlaceHolder id="PlaceHolderFooterNavBar" runat="server">
	<SharePoint:AspMenu ID="FooterNavigationMenu" Runat="server" EnableViewState="false" DataSourceID="topSiteMap" AccessKey="<%$Resources:wss,navigation_accesskey%>" UseSimpleRendering="true" UseSeparateCss="false" Orientation="vertical" StaticDisplayLevels="3" AdjustForShowStartingNode="true" MaximumDynamicDisplayLevels="0" SkipLinkText=""/>
</asp:ContentPlaceHolder>

As is, what we have done so far is duplicate the top/global navigation but set it up like the left/current navigation so the navigation headers and their sub topic lists run vertically down the page. In order to match the Lear design, we need the navigation headers to run horizontally, showing the sub topics vertically under each header. This can be handled with CSS.

Find a way to target the new navigation

One of the challenges with working with the AspMenu controls in SharePoint is the generated code is nearly identical across all of the instances in the page. You need to identify something unique about the footer navigation so you can target it via CSS.  The two most common ways to do this are:

• Identify a chain of existing parents and/or siblings that can be used, such as:  section > div + nav div > ul.static
• Add a class to an existing wrapping HTML element or add a new wrapping HTML element with an optional class.  For example: <nav class=”custom-footer”><SharePoint:AspMenu…

Once you have identified/added-in your hook for CSS, you can add the following style statements to your CSS file. Replace footer nav below with whatever hook you have identified/added for your web site from the previous step:

Universally needed for managed and structured navigation:

footer nav ul {
	list-style: none;  /* Remove default bullets */
	padding: 0;  /* Remove list padding */
	margin: 0;  /* Remove list margin */
}

For managed navigation:

footer nav ul.static > li {
	display: inline-block;  /* Change flow from vertical list to horizontal list */
	vertical-align: top; /* Force top alignment of text */
}

For structured navigation:

footer nav div > ul.static > li > ul.static,
footer nav div > ul.static > li > ul.static > li,
footer nav div > ul.root.ms-core-listMenu-root.static > li.static:first-child a {
	display: inline-block;  /* Change flow from vertical list to horizontal list */
	vertical-align: top; /* Force top alignment of text */
}

Make it pretty

The final step is styling. You can use CSS to format the footer navigation to look completely different than the top navigation. Just use the hook that you already identified to target the new footer navigation control.

Here is an example of the above code implemented in SharePoint with some dummy navigation, styled to be similar to the Lear site footer:

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 blog site:

To look like this Smashing Magazine site:

(Dear Smashing Magazine, I am only using your site because so many people can connect with your useful and well written content! I am also not claiming that I authored the Client Experience Design post despite how SharePoint makes it look. The article was written by Marko Dugonjić and you can check it out here. This post and CSS demo 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.

Our sample SharePoint site is based on the OOTB blog site template. The blog site is a child site of a publishing site.

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 an icon font (Font Awesome) as well as a couple of 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).  I also need to do some general layout and fixes for the OOTB page layout that is being used for the SharePoint web page. Finally some shared font properties are set up. SharePoint tends to set fonts at a pretty specific level instead of setting them on a more global scale.

/* 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=Poppins:300|Suez+One|Belgrano);

/* Font Awesome is a free font. http://fontawesome.io  */
@import "//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css";

/* Demo of using @font-face and is not needed in this design 
@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 */
	#suiteBarLeft,  /*Suite Bar Left (SharePoint text and links) */
	#ms-help,  /* Help icon  */ 
	#fullscreenmodebox,  /* Focus on Content icon */
	#siteIcon,  /* Image set as SharePoint site logo in Settings */ 
	#pageTitle, /* Page title */
	#sideNavBox .ms-webpart-zone > div + div, /* Any web part after post category nav */
	.ms-core-listMenu-verticalBox ul.static .ms-blog-quickLinksTitle, /* Categories header in Blog category nav */
	.ms-core-listMenu-verticalBox ul.static + ul.static, /* 'Add a Category' option in Blog category nav */
	.ms-blog-commandSpace li:last-child /* Edit blog post link */ {
		display: none;
	}
	#RibbonContainer-TabRowRight /* Share, Follow, Edit links */ {
		display: none !important; /* !important needed to override SharePoint inline style */
	}

/* Add background image - warning this image will not scroll with the page */
	body.ms-backgroundImage {
		background: url("http://classcdn.s3.amazonaws.com/images/smashmag-smbg.png");
	}

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

/* Body content area - includes all web part zones */
	#contentRow {
		background: #fff;
		width: 62.4%;
		border-radius: 0 10px 10px 0;
		box-shadow: 1px -1px 5px rgba(0,0,0,.1);
		margin-left: 1%;
		padding-top: 60px;
		box-sizing: border-box;
	}

/* Nested body content area - child of #contentRow */
	#contentBox {
		margin-left: 190px;
		min-width: 400px;
	}

/* Far right web part zone for supplemental blog web parts */
	.ms-blog-LeftColumn {
		position: absolute;
		width: 36%;
		box-sizing: border-box;
		right: .5rem;
	}



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

/* Sans-serif */
	.ms-breadcrumb-box + div:before, /* Text added before search */
	.ms-srch-sb > input, /* Search form input */
	.ms-srch-sb-searchLink:after, /* Added search text on button */
	.ms-breadcrumb-top .ms-core-listMenu-horizontalBox ul.root ul.static > li > a, /* Global navigation items */
	.ms-blog-listMenu-root, /* Blog category nav */
	.ms-blog-postBody,  /* Post container */
	.ms-blog-postList h1 a:after, /* Read More link after post teaser */
	.ms-blog-postList h1 + div, /* Blog post date */
	.ms-blog-postBody ~ .ms-metadata,
	.ms-blog-postBody ~ .ms-blog-commandSpace, /* Blog metadata */
	.ms-blog-commandSpace .ms-secondaryCommandLink, /* Blog metadata */
	.ms-blog-commandSpace .ms-secondaryCommandLink:link, /* Blog metadata */
	.ms-blog-commandSpace .ms-secondaryCommandLink:visited, /* Blog metadata */ 
	#blgcat /* Post tags */ {
		font-family: 'Poppins', sans-serif;
		font-weight: 300;
	}

/* Serif */
	.ms-blog-postList h1 a, /* Post Title Text */
	.ms-blog-postBody .ms-rteStyle-Accent2, /* Call out text in first section of post */ 
	.ms-blog-postBody ~ .ms-metadata > span > span /* Byline container */ {
		font-family: 'Belgrano', serif;
	}

/* Light gray */
	.ms-breadcrumb-box + div:before, /* Text added before search */
	.ms-srch-sb > input /* Search form input */ {
		color: #B5B5B5;
	}

/* Text size 1 */
	.ms-breadcrumb-box + div:before, /* Text added before search */ 
	.ms-srch-sb > input, /* Search form input */
	.ms-blog-listMenu-root, /* Blog category nav */
	.ms-blog-postList h1 a:after /* Read More link after post teaser */ {
		font-size: .9rem;
	}

/* Text size 2 */
	.ms-srch-sb-searchLink:after, /* Added search text on button */
	.ms-blog-postBody .ms-rteStyle-Accent2, /* Call out text in first section of post */ 
	.ms-blog-postList h1 + div, /* Blog post date */
	#blgcat /* Post tags */ {
		font-size: 1rem;
	}

/* Text size 3 */
	.ms-blog-postBody /* Post container */ {
		font-size: 1.1em;
	}

This is the result in SharePoint. Note that many things have been hidden from the interface and the white post background over a gray texture has been implemented.

Step 2: 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 #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;
	}

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 3: Header and Top Navigation (Global)

Next I am going to add in the Smashing Magazine logo while taking care of the challenge we all face with CSS only designs and the site icon link for sub sites. By default the site icon always links to the home page of the current site, never the home page of the top level site. The target link is something that can be changed quickly with a custom master page but not with CSS only solution.

With this approach I am going to hide the site icon (already done in step 1) and then target the first link in the global navigation and convert that to a linked logo.

The “eBooks” navigation item needs to include the Smashing Magazine mascot, so I am going to target it using an attribute selector that looks for a particular URL in the HREF property of the link tag.

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

/* Wrapper for container for global nav and search */
	#s4-titlerow {
		padding-top: 0; /* Remove OOTB padding */
	}

/* Wrapper around site logo wrapper */
	#titleAreaBox {
		margin: auto 1%;
		width: 98%;
		box-sizing: border-box;
	}

/* Container for global nav and search */
	#titleAreaRow {
		width: 100%;
		display: block;
	}

/* Wrapper for global nav */
	.ms-breadcrumb-box.ms-tableCell {
		width: 65%;
		display: inline-block;
	}



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

/* Convert first navigation item in global nav to a logo */
	.ms-breadcrumb-top .ms-core-listMenu-horizontalBox ul.root > li.static:first-child > a {
		background: white url("http://classcdn.s3.amazonaws.com/images/smashmag-sm-logo-lg.png") no-repeat center;
		display: inline-block;
		width: 148px;
		height: 45px;
		background-size: 90%;
		text-indent: -10000px;
		padding: 15px 10px 14px;
		top: 0;
		position: absolute;
	}

/* Shift remaining navigation items over to allow room for added logo */
	.ms-breadcrumb-top .ms-core-listMenu-horizontalBox ul.root ul.static {
		margin-left: 170px;
	}

/* Nav item formatting */
	.ms-breadcrumb-top .ms-core-listMenu-horizontalBox ul.root ul.static li {
		border-right: 0.08em solid rgba(0, 0, 0, 0.05);
	}

/* Nav item text formatting */
	.ms-breadcrumb-top .ms-core-listMenu-horizontalBox ul.root ul.static > li > a {
		color: rgba(0, 0, 0, 0.3);
		height: 1.75em;
		padding: 2.5em 1em 0.2em;
		transition: color 0.3s ease 0s, background-color 0.3s ease 0s;
		margin-right: 0;
		font-size: 1.2em;
		border-right: 0;
	}
	.ms-breadcrumb-top .ms-core-listMenu-horizontalBox ul.root ul.static li a:hover,
	.ms-breadcrumb-top .ms-core-listMenu-horizontalBox ul.root ul.static li a[href*="eBooks"]:hover {
		background-color: #ffff66;
		color: rgba(0, 0, 0, 0.6);
	}

/* Add mascot to eBooks nav item */
	.ms-breadcrumb-top .ms-core-listMenu-horizontalBox ul.root ul.static li a[href*="eBooks"] {
		background: url("http://classcdn.s3.amazonaws.com/images/smashmag-cody-mascot.png") no-repeat right 0.25em;
		background-size: 2.25em auto;
	}

And the resulting SharePoint site header and nav is below. Since the search hasn’t been formatted yet it is showing up underneath the navigation.

Step 4: Search

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. It is being used below to add the “Search on Smashing Magazine” text that comes before the search box. The following code also hides the default search magnifying glass icon and replaces it with a gradated background button that says “Search”.

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

/* Search container positioning */
	.ms-breadcrumb-box + div {
		width: 35%;
		display: inline-block;
		float: right;
		margin-top: 37px;
	}

/* Add text before search */
	.ms-breadcrumb-box + div:before {
		content: "Search on Smashing Magazine";
		display: block;
		padding-bottom: .55rem;
	}

/* Search box placement */
	.ms-mpSearchBox.ms-floatRight {
		float: none;
		width: 100%;
	}

/* Change default border */
	.ms-srch-sb-border,
	.ms-srch-sb-border:hover,
	.ms-srch-sb-borderFocused {
		border: 0;
		width: 100%;  /* Prevent click into search input from reducing in size */
	}
	.ms-srch-sb-border input:focus,
	.ms-srch-sb-border input:hover,
	.ms-srch-sb-border:hover {
		border-color: #E9E9E9;
	}

/* Modify default formatting for input */
	.ms-srch-sb > input {
		width: 78%;
		background: #fff;
		margin: 0;
		height: 40px;
		padding: 0 .7rem;
		box-sizing: border-box;
		border-radius: .5rem 0 0 .5rem;
		border: solid #E9E9E9;
		border-width: 1px 0 1px 1px;
	}

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

/* New search button */
	.ms-srch-sb > .ms-srch-sb-searchLink {
		background: rgba(0, 0, 0, 0) linear-gradient(to bottom, #e85c33 0px, #e53a2b 100%);
		height: 40px;
		padding: 0 .7rem;
		box-sizing: border-box;
		display: inline-block;
		width: 22%;
		border-radius: 0 .5rem .5rem 0;
		border: solid #D74B22;
		border-width: 1px 0 1px 1px;
	}
	.ms-srch-sb-searchLink:after {
		content: "Search";
		color: #fff;
		width: 100%;
		display: inline-block;
		text-align: center;
		padding: .35rem 0;
	}
	.ms-srch-sb-searchLink:hover:after {
		text-decoration: none;
	}

Here is the result:

Step 5: Blog Category Navigation (located where you usually find the current navigation/quick launch)

This may look like a lot of code, but it is only because of the different color bars that precede each category. Using :nth-child selectors I can target a category based on location and change the border color.

/* NAVIGATION (BLOG CATEGORIES) 
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- */

/* Category nav container */
	#sideNavBox {
		width: 165px;
		margin: 0;
	}

/* Change OOTB SP Blog category nav width */
	.ms-blog-listMenu-root {
	 	width: auto;
	}

/* Blog category nav item formatting */
	.ms-blog-listMenu-root li a {
		padding: .5rem 2rem;
		box-sizing: border-box;
		transition: color 0.3s ease 0s, background-color 0.3s ease 0s;
	}
	.ms-blog-listMenu-root li a:hover {
		background-color: #ffff66;
		color: rgba(0, 0, 0, 0.6);
	}

/* Per category border shared properties */
	.ms-blog-listMenu-root ul.static li {
		border-width: 0 0 0 0.625rem;
		border-style: solid;
	} 

/* Per category border */
	.ms-blog-listMenu-root ul.static li:nth-child(1) {
	 	border-color: #C9E9E5;
	} 
	.ms-blog-listMenu-root ul.static li:nth-child(1):hover{
		border-color: #41b7d8;
	} 
	.ms-blog-listMenu-root ul.static li:nth-child(2) {
		border-color: #CDEEAA;
	} 
	.ms-blog-listMenu-root ul.static li:nth-child(2):hover {
		border-color: #6ece0a;
	} 
	.ms-blog-listMenu-root ul.static li:nth-child(3) {
		border-color: #F9F0A8;
	} 
	.ms-blog-listMenu-root ul.static li:nth-child(3):hover {
		border-color: #ebd203;
	} 
	.ms-blog-listMenu-root ul.static li:nth-child(4) {
		border-color: #E0CFDF;
	} 
	.ms-blog-listMenu-root ul.static li:nth-child(4):hover {
		border-color: #a675a2;
	} 
	.ms-blog-listMenu-root ul.static li:nth-child(5) {
		border-color: #FACED2;
	} 
	.ms-blog-listMenu-root ul.static li:nth-child(5):hover {
		border-color: #f0717c;
	} 
	.ms-blog-listMenu-root ul.static li:nth-child(6) {
		border-color: #BCD8F0;
	} 
	.ms-blog-listMenu-root ul.static li:nth-child(6):hover {
		border-color: #3e8dd2;
	} 

This is what I get in SharePoint:

Step 6:  Right side web parts

Short and sweet, this code formats every other web part in the right web part zone to have a different background effect.

/* RIGHT WEB PART ZONE
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- */

/* Web part container */
	.ms-blog-LeftColumn .ms-webpartzone-cell {
	    padding: 1rem;
	}

/* Alter web part formatting for every other web part */
	.ms-blog-LeftColumn .ms-webpartzone-cell:nth-child(even) {
		background: #F8F8F8;
		border: solid rgba(0,0,0,.1);
		border-width: 1px 1px 1px 0;
		border-radius:  0 0.625em 0.625em 0;
		box-shadow: inset 7px 0 5px -11px rgba(0,0,0,.1);
		margin-left: 1px;
	}

Here is the restyled web part zone:

Step 7:  Blog Post

This is where things get pretty cool. Since SharePoint doesn’t offer the ability to offer teaser text for a blog post and instead includes the full length of the article, that gives us a challenge I can tackle with CSS only. There is a lot of CSS below, but there is a lot going on.

The post length is cut off at a set height, then a gradation is added on top that goes from transparent to white. This gives a nice lead-in effect to the “Read more…” button that is generated by the CSS. Next all of the post metadata is moved, styled and has icons added to better match the Smashing Magazine design:

/* BLOG POST
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- */

/* Post container */
	.ms-blog-postBody {
		max-height: 12em;
		position: relative;
		margin-top: 3rem;
	}

/* Post separator */
	.ms-blog-postList > li {
		border-bottom: 0.312rem solid #41b7d8;
		margin-bottom: 2rem;
	}

/* Post title container */
	.ms-blog-postList h1 {
		border-bottom: solid 1.5px rgba(0,0,0,0.1);
		padding-bottom: 55px;
		margin-bottom: 10px;
	}

/* Post title text */
	.ms-blog-postList h1 a {
		font-weight: bold;
		color: #333;
	}

/* Post text blocks */
	.ms-blog-postBody p {
		margin: 20px 0;
	}

/* Call out text in first section of post */
	.ms-blog-postBody .ms-rteStyle-Accent2 {
		color: #333;
	}

/* Fade effect over teaser text */
	.ms-blog-postBody:after {
		content: "";
		background: linear-gradient(to top, rgba(255,255,255,1) 10%,rgba(255,255,255,0) 50%);
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
	}

/* Set positioning of parent for metadata relocation */
	.ms-blog-postList li > div {
		position: relative;
	}

/* Read More link after post teaser */
	.ms-blog-postList h1 a:after {
		content: "Read more...";
		position: absolute;
		bottom: -2.5rem;
		left: 0;
		background: #41B7D8;
		border-radius: 0.3125rem;
		margin: 2rem 0 0;
		padding: 0.35rem 0.65rem;
		color: #fff;
		border: 1px solid #007394;
		z-index: 2;
	}

/* Byline container */
	.ms-blog-postBody ~ .ms-metadata > span > span {
		text-transform: capitalize;
		position: absolute;
		bottom: 5rem;
		color: #41B7D8;
	}

/* Byline */
	.ms-blog-postBody ~ .ms-metadata .ms-subtleLink {
		color: #41B7D8;
		font-size: 1.5rem;
		line-height: 1;
	}
	.ms-blog-postBody ~ .ms-metadata .ms-subtleLink:hover {
		text-decoration: underline;
	}

/* Add "By" before byline */
	.ms-blog-postBody ~ .ms-metadata .ms-subtleLink:before {
		content: "By ";
		color: #B2B2B2;
		display: inline-block;
		padding-right: .5rem;
		line-height: 1.5;
		overflow: visible;
	}

/* Tags container (also parent of byline container) */
	.ms-blog-postBody ~ .ms-metadata > span {
		position: absolute;
		bottom: 12rem;
	}

/* Post footer */
	.ms-blog-postBody ~ .ms-metadata {
		margin-top: 4.5rem;
	}

/* Hide other text SharePoint inserts in metadata area */
	.ms-metadata > span {
		font-size: 0;
	}

/* Shared properties for inserted icons for post metadata */
	.ms-blog-postList h1 + div:before, /* Date */
	#blgcat:before, /* Tags */
	.ms-blog-commandSpace > a:before, /* Comments */
	.ms-blog-commandSpace a[id*="likes"]:before, /* Like */
	.ms-blog-commandSpace a[title*="Email"]:before /* Email */ {
		font-family: FontAwesome;
		padding-right: .5rem;
		color: #E43B2C;
	}

/* Date */
	.ms-blog-postList h1 + div {
		color: 	rgba(0,0,0,0.3);
	}

/* Date icon */
	.ms-blog-postList h1 + div:before {
		content: "\f017";
	}

/* Post tags */
	#blgcat {
		color: #41B7D8;
		padding-right: .8rem;
	}

/* Add tags icon before tag */
	#blgcat:before {
		content: "\f02c";
		display: inline-block;
	} 

/* Container for sub footer options (Comment, Like, Email and Edit) */
	.ms-blog-commandSpace {
		position: absolute;
		bottom: 14.0125rem;
		right: -1rem;
		font-size: 1rem;
	}

/* Remove OOTB SharePoint border in metadata area */
	.ms-blog-commandSpace .ms-comm-metalineItemSeparator {
		border-right: 0;
	}

/* Comment Count */
	.ms-blog-commandSpace > a {
		color: #41B7D8;
	}

/* Add comments icon before comments */
	.ms-blog-commandSpace > a:before {
		content: "\f075";
		display: inline-block;
	}

/* Like link */
	.ms-blog-commandSpace a[id*="likes"] {
		color: #41B7D8;
	}
	.ms-blog-commandSpace a[id*="likes"]:hover {
		text-decoration: underline;
	}

/* Add heart icon before Like link */
	.ms-blog-commandSpace a[id*="likes"]:before {
		padding-right: .5rem;
		display: inline-block;
	}

/* Email link */
	.ms-blog-commandSpace a[title*="Email"] {
		color: #41B7D8;
		font-size: 0;
		display: inline-block;
		line-height: .8rem;
	}

/* Add share icon before Email text */
	.ms-blog-commandSpace a[title*="Email"]:before {
		content: "\f064";
		display: inline-block;
		font-size: 1rem;
	}

/* Replace 'Email a link' text with 'Email' */
	.ms-blog-commandSpace a[title*="Email"]:after {
		content: "Email";
		font-size: .9rem;
	}
	.ms-blog-commandSpace a[title*="Email"]:hover:after {
		text-decoration: underline;
	}

Here is the restyled blog post:

Step 8:  Social Networking Links List

Using a simple links web part, I added the social networking links to the SharePoint page under the last blog post. I can use CSS to add in the social networking icons and cut out the text, plus move the links from the bottom of the page to the header area.

/* SOCIAL LINKS
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- */

/* Hide parts of the links web part */
	.ms-blog-MainArea .ms-webpartzone-cell + .ms-webpartzone-cell table .ms-pivotControl-container, /* Current view option */
	.ms-blog-MainArea .ms-webpartzone-cell + .ms-webpartzone-cell .ms-listviewtable thead /* Column title */ {
	 	display: none;
	}

/* Disable OOTB link hover */
	.ms-itmHoverEnabled:hover > * {
	 	background: transparent;
	}

/* Move web part to top of page */
	.ms-blog-MainArea .ms-webpartzone-cell + .ms-webpartzone-cell .ms-listviewtable tbody {
		position: absolute;
		top: 40px;
		right: 38%;
	}

/* Convert to horizontal nav */
	.ms-blog-MainArea .ms-webpartzone-cell + .ms-webpartzone-cell .ms-listviewtable tbody tr {
		display: inline-block;
	}

/* Restrict size of link to only show icon */
	.ms-blog-MainArea .ms-webpartzone-cell + .ms-webpartzone-cell .ms-listviewtable tbody a {
		width: 15px;
		height: 20px;
		overflow: hidden;
		display: inline-block;
		text-decoration: none;
	}

/* Shared properties for inserted icons */
	.ms-blog-MainArea .ms-webpartzone-cell + .ms-webpartzone-cell .ms-listviewtable tbody a:before {
		font-family: FontAwesome;
		font-size: 1rem;
		padding-right: 30px;
		opacity: 0.45;
	} 
	.ms-blog-MainArea .ms-webpartzone-cell + .ms-webpartzone-cell .ms-listviewtable tbody a:hover:before {
		opacity: 1;
	}

/* Add social icons per link */
	.ms-blog-MainArea .ms-webpartzone-cell + .ms-webpartzone-cell .ms-listviewtable tbody a[href*="/feed/"]:before {
		content: "\f09e";
		color: #FB8A24;
	} 
	.ms-blog-MainArea .ms-webpartzone-cell + .ms-webpartzone-cell .ms-listviewtable tbody a[href*="facebook"]:before {
		content: "\f09a";
		color: #1D679C;
	}
	.ms-blog-MainArea .ms-webpartzone-cell + .ms-webpartzone-cell .ms-listviewtable tbody a[href*="twitter"]:before {
		content: "\f099";
		color: #1BA7CB;
	}
	.ms-blog-MainArea .ms-webpartzone-cell + .ms-webpartzone-cell .ms-listviewtable tbody a[href*="newsletter"]:before {
		content: "\f0e0";
		color: #C96B6B;
	}

Here is the restyled social links web part:

Step 9:  Responsive Design

The Smashing Magazine site has a few different responsive states. Nearly everything can be accomplished with CSS only. To make your site responsive on mobile devices, be sure to check out How to add viewport meta without editing the master page.

/* RESPONSIVE DESIGN
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- */

/* Move blog category navigation to header area and shift social links placement  */
@media screen and (min-width: 1020px) and (max-width: 1220px) {

	/* Set widths for parent chain of elements for blog category nav */
		#sideNavBox,
		#sideNavBox div[id^="WebPart"],
		#sideNavBox div[id^="WebPart"] > div,
		#sideNavBox .ms-core-listMenu-verticalBox > ul.static > li,
		#sideNavBox .ms-core-listMenu-verticalBox > ul.static > li > ul {
		 	width: 100%;
		}

	/* Set positioning of parent for menu relocation */
		#sideNavBox .ms-core-listMenu-verticalBox > ul.static > li {
			position: relative;
		}

	/* Change border and padding for nav items */
		#sideNavBox .ms-core-listMenu-verticalBox > ul.static > li > ul {
			border-bottom: 0.3125em solid rgba(0, 0, 0, 0.06);
			padding-left: 2.5rem;
			box-sizing: border-box;
		}

	/* Convert blog category nav to horizontal bar */
		#sideNavBox .ms-core-listMenu-verticalBox > ul.static > li > ul li {
			display: inline-block;
			height: 2.5em;
		}

	/* Blog category nav item formatting */
		.ms-blog-listMenu-root ul.static li {
			border-width: 0 0 0.3125em 0;
			font-size: .8rem;
			text-transform: uppercase;
			font-weight: 500;
			margin-bottom: -0.3125em;
		}
		.ms-blog-listMenu-root ul.static li a {
			padding: .5em 1em;
			border-right: 0.08em solid #e5e5e5;
			height: 2rem;
		}

	/* Remove border on last nav item */
		.ms-blog-listMenu-root ul.static li:last-child a {
			border-right: 0;
		}

	/* Reset margin to absorb space left from moving blog category menu */
		#contentBox {
			margin-left: 2.5rem;
		}

	/* Shift placement of social links */
		.ms-blog-MainArea .ms-webpartzone-cell + .ms-webpartzone-cell .ms-listviewtable tbody {
			right: 1rem;
			top: 35px;
		}
}

/* Shorten length of last category item */
@media screen and (min-width: 1020px) and (max-width: 1124px) {
	
	/* Hide 'WordPress' category text and padding */	
		.ms-blog-listMenu-root ul.static li:nth-child(6) {
			font-size: 0;
		}
		.ms-blog-listMenu-root ul.static li:nth-child(6) a {
			padding: 0;
		}

	/* Insert new text for 'WordPress' category text */
		.ms-blog-listMenu-root ul.static li:nth-child(6) a:before {
			content: "WP";
			padding: .4rem 1rem .33em 1em;
			font-size: 0.8rem;
			display: inline-block;
			border-width: 0 0 0.3125em 0;
			border-style: solid;
			border-color: #BCD8F0;
			height: 1.425rem;
		}

	/* Add matching border */
		.ms-blog-listMenu-root ul.static li:nth-child(6) a:hover:before {
			border-color: #3e8dd2;
		} 
}

/* Hide right web part zone, move search and move social links */
@media screen and (max-width: 1020px) {

	/* Hide right column */	
		.ms-blog-LeftColumn {
			display: none;
		}

	/* Reset content area formatting */
		#contentRow {
			width: 100%;
			padding-top: 11rem;
			margin-left: 0;
			border-radius: 0;
		}
		#contentBox {
			width: auto;
		}

	/* Search placement */
		.ms-breadcrumb-box + div {
			float: none;
			margin-left: 3rem;
			width: 90%;
		}

	/* Shift placement of social links */
		.ms-blog-MainArea .ms-webpartzone-cell + .ms-webpartzone-cell .ms-listviewtable tbody {
			right: 1rem;
			top: 35px;
		}
}

Here are some screenshots from the various breakpoints. These can also be used to check out the final design of the site:

Final Code

With everything together, here is the final SharePoint CSS code file. On a side note, the logo and mascot images used in this design were originally SVG files.  For this demo they were converted to PNG files. Here is a handy converter to help you out.

Download the complete CSS code

Where to Go Next

Be sure to check out the two previous deliveries of this session where I made SharePoint look like the BBC Sherlock site and like the BuzzFeed Travel 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!

“Bootstrap” Responsive SharePoint, the RIGHT Way

Let’s face it, SharePoint isn’t very responsive.  However you can make it responsive using popular tools that all the cool kids are talking about. 

An Intro to Responsive Design

This SPTechCon Boston 2016 session started off with a discussion about what is responsive design and the differences between liquid, static, adaptive and responsive design. Key takeaways:

• SharePoint is a liquid design up to a point. There are several min-width properties in the CSS that prevents SharePoint from condensing past a certain point.
• Most people switch to a static (fixed-width) design because it plays well with larger displays but the downside is that it isn’t mobile friendly.
• Adaptive design relies on different sets of HTML and CSS to reconfigure the web site layout based on the device width. This is all handled server-side and can be done in SharePoint using Device Channels.
• Responsive design has one set of HTML and then variations of the CSS that reflows the web site layout based on the device width.

Resources:

• Liquidapsive.com

SASS

Next we dove into an intro for SASS (Syntactically Awesome Style Sheets), a CSS preprocessor that introduces things like variables, nesting, mixins, inheritance and other tricks that make writing CSS easier and more efficient. Key takeaways:

• You can use SASS with SharePoint.
• You can use SASS with Bootstrap.
• SASS will streamline your code and help you avoid repetition and tedious updates in the future.
• Can use a tool like Prepros to compile SASS.

Resources:

• SASS
• Prepros

Bootstrap

Once you have SASS installed and are ready to go, you can tackle Bootstrap, the most popular kid on the playground.  The key to using Bootstrap with SharePoint is to not think like you would for a regular web site.  With that approach, integrating Bootstrap is a tedious and nearly impossible task with SharePoint.

But if you remember this key point, you can marry Bootstrap with SharePoint with  lot of success…. just take the CSS from Bootstrap and apply to existing markup in SharePoint.  Yup, that’s it!

Just use your already well-honed copy/paste skills and treat Bootstrap like other code bits that you come across and want to implement into SharePoint.

Resources

• Bootstrap

Where to Go Next

If you want to take this approach to the next level, we spend three whole days making SharePoint responsive in our SharePoint 2013 Responsive Design 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!

Managed navigation was introduced in SharePoint 2013 and it swept in a new way to manage your site navigation. No longer did you have to use your site structure, but now you could pick and choose sites/pages/list items/forms/etc. across your site and build out a custom navigation solution.  You can mix and match and easily switch between the two.  But as soon as you want to rebrand the navigation bar(s), you do need to have a plan in order to support both managed and structured navigation and code in response. 

Scenarios Where You Need This Info

• You are starting to set up your new SharePoint site and want to understand the code differences between managed and structured navigation before you start writing your CSS.
• You have a SharePoint 2010 design you are converting over to SharePoint 2013/2016/SharePoint Online and plan to also switch to managed navigation.
• You tried out one or the other and decided it doesn’t meet your needs and you are switching navigation setups.
• You have one design that needs to be used for structured navigation sites and managed navigation sites. Only publishing sites support managed navigation.

Look Under the Covers at Structured vs. Managed Navigation

The HTML sent to your browser for structured navigation in SharePoint does differ from what it gets for managed navigation. This is what can lead to CSS incompatibilities when trying to use the same code for both styles of navigation.

Understanding why there is a difference in the HTML code is best displayed using visual diagrams.

Sample site collection

Below we have a sample site collection with a root site and child content in the form of sub sites, web pages and lists.  SharePoint essentially treats each level separately, as we see with the “1”, “2” and “3” on the left side.

Structured navigation display

Using settings from the master page, the SharePoint site will combine levels 1 and 2 into a single navigation bar and place level 3 as a fly-out/drop down menu. Structured navigation is all about what you have in your hierarchy is what you see in the user interface.

Structured navigation code

If you look at the generated code however, there is a bit of a quagmire. It makes sense… but it is tough on branding and CSS. The first level kicks off an unordered list (red below) with level two as a nested unordered list (green below). Each time there is a branch for level 3, that is another nested unordered list that is connected with the parent list item (blue below). Depending on the complexity of your site structure, your navigation code could have several nested lists.

Managed navigation

Using managed navigation in your site will allow you to cherry pick items to show in the navigation bar(s). This is especially useful if you have a really big site with lots of nested sub sites and content and don’t want to show all of your available content in the navigation. Below we have starred what content we want to show up in the navigation bar.

Managed navigation display and code

There is no need to break this into two different diagrams. Whatever content that you have selected becomes terms in the navigation term set. The levels and where the content is located in the hierarchy is irrelevant. Everything will appear as a simple and single unordered list (purple below). If you opt to add fly-out/drop down menus, those are added in as nested unordered lists attached to their corresponding parent (not displayed below). While that sounds similar to the nesting in structured navigation, this approach makes styling much simpler because it lacks level 1 (red colored root site in the above example) being a super parent list that wraps everything.

Code Differences

Luckily the code differences are straight forward and it is easy to switch your CSS back and forth to support one navigation system over the other or better yet, write CSS that supports both navigation systems. Your biggest ally in this process will be the child combinator in CSS, which is implemented with the greater-than symbol (>) in your code.

Key thing to remember when writing the CSS

When thinking about your CSS code for structured navigation, keep this image in mind:

If you write a style statement like this:

.ms-core-listMenu-horizontalBox ul li {
   border: 1px solid black;
}

With structured navigation you will affect the red nav item once, the green nav items twice and the blue navigation items (which would be in the drop down menu) three times. This is due to the nested nature of the three levels. Here is a visual example with the borders exaggerated so the effect is easily seen for the first two levels (red and green):

Here is the same code applied to managed navigation, without exaggerated borders:

Targeting navigation items

You actually can’t use the code listed above to create the single border affect displayed with managed navigation in structured navigation unless you change what you are targeting in the CSS selector. With structured navigation the parent list item for the top level site will forever wrap the children, so borders can’t be applied at the list item level. Instead you would need to go to a child element like the anchor (a) and then make the selector class heavy so you can override default SharePoint styles:

.ms-core-listMenu-horizontalBox ul.root li.static a {
   border: 1px solid black;
}

The nice thing about that style statement is it will work with either structured or managed navigation. The drawback is that it will also affect your drop down menu items. Depending on what you are doing, this may be a good or a bad thing.

To separately target the visible navigation items vs. the dynamic drop down menu items, you need to use the child combinator in your CSS selectors. Adding the child combinator (>) between the li and the a will only affect the visible navigation items:

.ms-core-listMenu-horizontalBox ul.root li.static > a {
   border: 1px solid black;
}

And to target the drop down menus you can do this:

.ms-core-listMenu-horizontalBox ul.dynamic li.dynamic a {
   border: 1px solid black;
}

Tips for branding the navigation systems

If you want to create code that is cross navigation system compatible, there are a few guidelines you can follow and a certain CSS practice you need to set aside:

• Avoid referencing ul.static in your selectors – skipping this selector is a great way to encourage cross compatibility. Use ul.root for the visible navigation items and ul.dynamic for the drop downs.
• Don’t skip referencing HTML in your selectors – it is a common practice with CSS to only reference the class in your selector. SharePoint navigation classes such as static and dynamic are shared across different HTML elements (ul, li, a) and using the .static class without a preceding ul, li or a can prevent cross compatibility.
• Duplicate selectors for non-links – structured navigation gives you the ability to create linkless headers as a way to group custom links. These headers lack anchors in the code. You can be sure to catch any potential custom headers by duplicating your selectors and changing the a to span. For example:

  .ms-core-listMenu-horizontalBox li.static > a.static,
  .ms-core-listMenu-horizontalBox li.static > span.static

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.

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.

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:

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:

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:

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!