Upgrading a 2010 Publishing Site to SharePoint 2013 Part Two
If you have a look at the TechNet SharePoint 2013 Preview articles, you'll see that Microsoft has done a great job of documenting a lot of the cool new features in 2013. The first paragraph briefly describes an improvement to the Word cut and paste experience for content authors. I can't say enough how important I see that being, so I've devoted a full post just to that topic at SharePoint 2013 Word Cut and Paste.
Naturally I was keen to try the feature out, so one of the first things I did was open my new 2013 blog site (which still looked like 2010), and paste some rich text in from Word. Boy was I disappointed to see that it didn't work. What I didn't realize is that I had to complete the site collection upgrade to be able to see the new feature (yes 2010 mode really does work like 2010).
It was now time to try the Site Collection Upgrade. Much like in 2010, in the Site Collection Administration section of Site Settings, there is a Site collection upgrade option. Running this goes through the site collection upgrade, and another log file is generated. I still had missing features for some of our products that I hadn't tested the upgrade on yet, but otherwise the upgrade went well.
Again like 2010, the resulting site worked but looked all wrong, for the same reasons. The upgrade had changed the master page reference to a new v15.master page, that didn't have any of my custom branding on it. It was time to figure out Design Masters, which are the new way of doing master pages in 2013.
The TechNet article is pretty light on branding improvements, but the design goal from the product team was to make it much easier for web developers to brand SharePoint with the tools and techniques of their choice. I deferred to Jeff Clement (our in-house user experience and HTML guru), and he put together the following information.
Branding Process for blog2013.petercarson.ca
After reading several TechNet documents, PowerPoint presentations and developer blogs for information on SharePoint 2013 branding methodology, I found the following results.
The Design Manager
The Master Page
<!--CS: and <!--CE:
<!--MS: and <!--ME:
<!--PS: and <!--PE:
Here's an example of a content placeholder within HTML code using the comment scheme:
<!--MS:<asp:ContentPlaceHolder ID="PlaceHolderMain" runat="server">-->
As far as I can tell - since there doesn't seem to be any existing documentation about this - when the HTML file is saved and synchronization to the .master file happens these comments are parsed by sharepoint into ASP, .NET and SharePoint server code. This allows the designer to focus on what matters most to them: the HTML.
Upgrading an Existing or Starting a New Master Page to SharePoint 2013
- Go to the Design Manager
- Go to step 3: Upload Design Files
- Create a mapped network drive on your computer that points to the location suggested by SharePoint - in my case it was http://blog2013.petercarson.ca/_catalogs/masterpage/
- Go to step 4: Edit Master Pages
- Click on the Create a minimal master page link
- Give the new Master Page a name - in my case I called it "PetersBlog-New"
- Go to the mapped network folder and your new master page HTML file will be there. Note that it is only the HTML file and there is no associated .master file
- Open up the old master page and into your new master page HTML, bring over only the HTML markup that comprises the design of the site. Be sure to carry over any class names or ID's that seem important
- Save your HTML file and then go to step 4: Edit Master Pages
- Click on the Convert an HTML file to a SharePoint master page link
- Select your master page HTML file and click the Insert button
- The page will refresh and your file will appear in the Design Manager: Edit Master Pages list
- Click the ... icon to open the file flyout menu, click the ... icon within the flyout and click Publish a Major Version to publish the page. Note that any changes to the HTML file will result in the master page being set back to draft mode
Code Snippets and the Snippet Gallery
- Name – the name of the Composed Look
- Master Page – for defining the overall layout of the site
- Theme URL – Points to an XML file that defines all of the colors you want to apply to different CSS. This works similarly to 2010 except you make your own theme id’s instead of using Accent1, Accent2, etc.
- Image URL – Points to an image that can be used to replace a background image in the CSS
- Font Scheme URL – Points to an XML file which defines the fonts that can be applied to CSS
- Display Order – Helps you arrange the available composed looks