Branding SharePoint 2013 Tricks – 2 – Design Manager, Boilerplate and XML Validation Errors

In this post we are going to review a common XML validation error in SharePoint 2013’s new Design Manager when converting a HTML file to a Master Page, its cause and how to fix it.

SharePoint 2013 is now HTML5 friendly and with the addition of Design Manager and Design Manager’s ability to convert a general HTML page to a Master Page for us, creating a new look for SharePoint should be that much easier. After playing around with Design Manger, I decided to get serious and start a Branding project from scratch. Most of our projects now start with an existing framework of sorts as we know that frameworks can provide a quick way to get a project started right. One of the most simple frameworks we have used is HTML5 Boilerplate as it is outrageously simple yet provides a good structure to begin a site.

So after downloading a recent version of HTML5 Boilerplate I created a new site collection in one of my Cloudshare dev environments, copied over the branding assets (I still prefer SPD as the Design Mode was too limiting anyhow) and ended up with the following basic structure. Note I added the branding assets to a boilerplate sub-directory of the Master Page Gallery (~sitecollection/_catalogs/masterpage) as I like to keep branding initiatives separate for ease of management.

1-sharepoint-designer-start
Next, the HTML5 Boilerplate template HTML, renamed to boilerplate.html so that this will create a boilerplate.master Master Page.

2-sharepoint-designer-boile
Now that all of the files are where they need to be, it is time to have Design Manager convert our HTML file to a Master Page for us.

  1. Open up your site in a browser.
  2. Navigate to Design Manager (via the Settings menu or directly at ~sitecollection/_layouts/15/DesignWelcomePage.aspx)
  3. Click on Edit Master Page found in the left menu.
    3-boilerplate-dm-home
  4. On the Edit Master Pages page, click on “Convert an HTML file to a SharePoint master page
    4-boilerplate-dm-mp
  5. Navigate to the boilerplate sub directory and select boilerplate.html file. Click OK.
    5-boilerplate-dm-mp-insert
  6. You will be redirected to the Design Manager Edit Master Page page. Your Master Page is listed but it does not have a status, or you might receive a Warnings and Errors message.
    6-boilerplate-dm-mp-error

Let’s figure out what is going on and how we can fix it. When we click on our Master Page in Design Manager, you might get a few different errors, one being:

1
2
3
4
5
SharePoint requires HTML files to be XML-compliant. Your file isn't XML-compliant, likely because of tag properties without quotes, missing closing tags, or invalid properties in tags.

There are multiple root elements. Line xxx, position xxx.

Run the file through an XML validator, fix any issues using your HTML editor, save the file, and refresh this preview.

7-1-boilerplate-preview-err
Or a general error.

7-boilerplate-preview-error
Not the most helpful errors, but they point us in a direction of XML Validation, so let’s open our boilerplate.html in SharePoint Designer. Scroll all of the way to the bottom. Interesting new code as been added.

8-spd-extra-code
What is happening is that Design Manager cannot properly process the <html> tag at the top of the file. Design Manager requires a XML compliant <html> tag and

1
2
3
4
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->

will not cut it.

So how do we fix this? Easy, replace the above code with

1
<html class="no-js">

And don’t forget to remove the extra <head> section added to the bottom of the page. Your new boilerplate.html should look like: Save your page and return to the Edit Master Pages page in Design Manager. Refresh the page and you will see your Master Page has already been converted.

10-boilerplate-dm-mp-succes
Return to SPD and refresh the boilerplate directory. You will now have your .html and .master versions of your Master Page.

11-spd-final
Explanation:

SharePoint 2013’s Design Manager requires strictly formatted XML when converting HTML pages to Master Pages. Comments around the <html> tag will cause issues even though most modern browsers have no problems interpreting common code found in HTML5 Boilerplate among other popular frameworks including Responsive frameworks. Replacing the IE conditional tagging with a simple <html> tag will likely fix your problems. I have tried adding the HTML5 Boilerplate <html> code back in after the conversion, and although it does stick in the .html file, if you then view the .master Master Page you will see that the <html> tag is actually replaced by ASP.NET SharePoint markup,

1
<SharePoint:SPHtmlTag class="no-js" runat="server" id="SPHtmlTag" dir="&lt;%$Resources:wss,multipages_direction_dir_value%&gt;">

So unless you are willing to break the association between the .html and .master files, thus negating Design Manager for managing your Master Page, you are stuck without the fancy IE conditional head tag. My suggestion, let’s move on from these browser wars and support modern browsers and let the older browsers wither away.

Have you found another solution to this problem? Please tell us.

See of all of my SharePoint 2013 Branding Tricks and Discoveries.

Comments

  1. When giving the files to move over to our old Master Page I was only given the Master.file if only given that file and not the HTML file how would I make that the Master Page when trying to convert the Master.file as a .HTML of course it gave me errors.

  2. Edward Kryez says:

    I get :

    SharePoint requires HTML files to be XML-compliant. Your file isn’t XML-compliant, likely because of tag properties without quotes, missing closing tags, or invalid properties in tags.

    ‘placeholder’ is an unexpected token. The expected token is ‘=’. Line 80, position 77.

  3. Hi Eric,

    I have imported the HTML5 boiler plate folder and followed all your instruction. In the boilerplate.html I didnt see two head tags and the conditional if.

    Please help how to fix the SharePoint requires HTML files to be XML-compliant. Your file isn’t XML-compliant, likely because of tag properties without quotes, missing closing tags, or invalid properties in tags.

Trackbacks

  1. […] This is not good as the src linking to our CDN is now incorrect. Why Design Manager removes the first part I am not sure, but if you open your HTML Master Page again and re-enter the correct src to your CDN, you should be set. I went ahead and reset the src to the CDN and now converted my HTML file to a HTML Master Page. (I followed the steps from Trick 2). […]

Speak Your Mind

*