Well it’s time for some new stuff.
I was looking into the possibility to migrate some looks and master pages from SharePoint 2010 to SharePoint 2013. What I found was a whole new world! 😊
First of all: in SP2010 you could omit the { and } around Field IDs and it would still work. Now you’ll get an error:
SharePoint requires a Field ID to be a hyphen-separated GUID, enclosed in braces.
MS has gone more strict. Makes sense.
What Is a Design Package?
If you activate the “SharePoint Server Publishing Infrastructure” site collection feature, you’ll see some new nodes in the “Look and Feel” section on the Site Settings page.
Step 1: Welcome to the Design Manager
Click “Design Manager” and a page comes up with several steps to follow.
The core sentence from the MSDN overview: “Design manager is the central hub and interface where you manage all aspects of a custom design.”
Step 2: Manage Device Channels
SharePoint 2013 can now serve different versions of the same page to different devices. A full browser gets the full layout; a tablet or mobile gets a lighter version using less bandwidth (smaller images, etc.).
You can add device channels for specific user agents — for example, a Windows Phone entry.
Step 3: Design Files
This step explains how to map a network drive to your master page gallery, making it easy to edit, upload, or delete files directly — no SharePoint Designer or browser upload required.
Step 4: Edit Master Pages
This is where it gets interesting. There’s a “Convert an HTML file to a SharePoint master page” option.
I uploaded a basic HTML file:
<html>
<head>
<title>testing the html</title>
</head>
<body>
testing it now
</body>
</html>After uploading it to the master page gallery, SharePoint generates a full .master file from it — automatically adding all the content placeholders, AjaxDelta regions, and SharePoint-specific markup.
What’s cool: the .html and .master files are linked. Edit the HTML, and the master page updates automatically. The master page file itself is locked and says:
While the files remain associated, you will not be allowed to edit the .master file. Any rename, move, or deletion operations will be reciprocated.
Step 5: Snippet Generator
The generated master page contains a link to a Snippet Gallery — a visual tool where you can select UI components (site logo, navigation, search box, etc.) from a ribbon, see their properties and a preview, and get the HTML snippet to paste into your design.
This is a great way to build master pages without needing to know all the SharePoint-specific controls.
Step 6: Edit Display Templates
Search-driven web parts use display templates to control appearance. Display templates consist of an HTML file and an auto-generated .js file — you only edit the HTML.
The best practice is to copy an existing display template and modify it, since the defaults contain useful comments and structure.
Step 7: Edit Page Layouts
Create custom page layouts — defining web part zones and their positioning. Give a name, select the master page and a content type (Article Page, Welcome Page, etc.) and SharePoint scaffolds the layout.
Step 8: Design Package
Everything you’ve built — master pages, page layouts, display templates, device channels — can be exported as a .wsp file. You can then import it into a Visual Studio solution and continue tinkering.
When you click “Create”, SharePoint generates and lets you download the package.
Ghosted vs. Unghosted?
A question came up: are these master pages ghosted or unghosted?
If you check the files via SharePoint Manager 2013, you’ll see they are not ghosted — because we uploaded them directly. If you put them into a feature and deploy that feature, they would be ghosted.
In Part 2, I’ll import this WSP into a Visual Studio solution and go through it piece by piece.