Throwback Thursday: Use CSS to Turn SharePoint 2013 into SharePoint 2010

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.

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:

Result of CSS to combine the Suite Bar and Ribbon
Suite Bar elements are hidden and the rest is stacked on top of the ribbon area.

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:

Page elements that CSS can't add back to the 2013 interface.
Folder breadcrumb, Save, Social Tagging and the exact placement of the Help icon can’t be replicated in SharePoint 2013 with only CSS.

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:

Results of adding all Ribbon CSS.
Revised Ribbon area with 2010 CSS changes applied.

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:

Results of resizing the icon using CSS.
Use CSS to resize the 2013 icon to be similar to the size of the 2010 orange people icon.

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:

Results from adding the 2010 site icon back via CSS.
Replacing the 2013 site icon with a copy of the older file from 2010.

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.

Results of all CSS code changes so far.
Cumulation of all code changes made thus far.

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:

Results of CSS to move and reformat the search.
Move the search to the global navigation bar to complete the 2010 header effect.

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:

Results of all CSS changes applied.
All CSS in place, creating a 2010 look and feel for a SharePoint 2013 site.

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.