“Just the Essentials” SharePoint Master Pages for SharePoint 2013

Continuing the tradition started with SharePoint 2007 and SharePoint 2010, I have put together and posted several different master page files (and one HTML file) for use with SharePoint 2013.  Every file is heavily commented and provides a lot of information about what code is necessary for various SharePoint functionality and content.  Due to the continued use of the enhanced user interface elements added to SharePoint 2010 and carried over to SharePoint 2013 along with new additions such as the Suite Bar, there are specific HTML elements, IDs, controls and classes that need to remain in place in the master page.  You can’t take a total slash and burn approach to developing a custom SharePoint 2013 master page.   So in short, read the comments!

Posting 2013 master pages in 2015? Yeah… I know.  This has been on my to do list for a long time and between teaching and kiddos, I just didn’t get to it.  But I will make up for it by posting SharePoint vNext master pages as soon as humanly possible or within a month of final product release, whichever comes first. 

“Just the Essentials” SharePoint Master Pages for non-publishing and publishing SharePoint 2013 sites

  • This master page started as a copy of seattle.master and then was stripped of anything not necessary for SharePoint to function.
  • All unnecessary layout HTML code has been removed.
  • Comments have been added to label SharePoint components and to indicate what is necessary for SharePoint to function.
  • There is no design to this master page! When initially loaded in a SharePoint site, most of the page components will be stacked vertically down the page. You will need to add your own HTML and CSS code to set up your custom layout.
    **IMPORTANT: Some of the Suite Bar options are formatted as white text (by SharePoint) so when taken out of their seattle.master formatting and just stuck on the page, it turns out to be white text on a white background.  The links are there.  Just mouse over the top left corner of the browser to see them.
  • Minimal Download Strategy controls have been removed from the publishing version since MDS can’t be used with publishing sites.  The only exception is DeltaPlaceHolderMain which has to be left intact in order for the web part tool pane to load properly while in edit mode.

Downloads:

SharePointV15 Commented Master Page

  • This is a copy of seattle.master that still has all original HTML layout code in place.
  • Comments have been added to label SharePoint components and to indicate what is necessary for SharePoint to function.
  • Code line indention has bee redone to make the file easier to read.
  • To use this file either create a custom master page or alter the existing seattle.master page file. This is not for use with Design Manager.  If you want to replace the contents of seattle.master with this file, you will first need to detach the seattle.html file:
    1. Open your parent (home) SharePoint site in a browser.
    2. Choose the settings gear icon, and then select Site settings.
    3. Under the ‘Web Designer Galleries’ column, select Master pages and page layouts.
    4. The Master Page Gallery page loads.
    5. Navigate to and locate the seattle.html file.
    6. Hover over the file name and a small arrow will appear to the right of the file name. Select the arrow and then select Edit Properties.
    7. The file properties page loads. Towards the bottom you will see Associated File. Uncheck the box.
    8. Now you can successfully edit seattle.master.

Download:

SharePointV15 Commented HTML Page

  • This is a copy of seattle.html that still has all original HTML layout code in place.
  • Comments have been added to label SharePoint components and to indicate what is necessary for SharePoint to function.
  • Code line indention has bee redone to make the file easier to read.
  • This file is only for use with Design Manager.
  • WARNING:  Due to the abundance of SharePoint comments, this file can be hard to read.  Please use the quick find method implemented in the file described on line 18 to locate the custom comments.
  • To use this, either 1) upload it as a new HTML file to your site and use Design Manager to “convert it” to a master page; or 2) replace the contents of seattle.html with this file.

Download:

  • SharePointV15-Comments-Formatting.html
  • Since this is an HTML file, when you click the link above it will open an HTML page in your browser and look really weird.  It is best to instead do a right click on the file name and choose to Save Link As (or similar function based on the browser you are using).

Which file is right for me?

If you just need to tweak the default SharePoint layout around or insert/remove some components, you can use the SharePointV15-Comments-Formatting.master file or the SharePointV15-Comments-Formatting.html file.

If you need to completely change the SharePoint look and feel (make SharePoint NOT look like SharePoint) and you are comfortable working with CSS based layouts, then use Just-the-Essentials-NonPub-withMDS-2013.master.

If the latter applies to you and you are working with publishing sites, use Just-the-Essentials-Publishing-noMDS-2013.master.

SharePoint Online (SPO)

Any of these files will work with SharePoint Online. However before you dive into customization you need to make sure that a custom master page for your SPO site is the right choice for your organization.  Check out To brand or not to brand, that is the SharePoint Online Question blog post for more info.

Responsive Design

If you are interested in creating a responsive design for SharePoint, you can check out the following post: Making seattle.master responsive