none
Design Manager does not convert HTML to Master Page

    Question

  • Hello

    I've had a look at the forums for an answer to my query but couldn't find one and have therefore decided to post a question here.

    In my newly upgraded SharePoint 2013 site (from SharePoint 2010), I am trying to convert a custom HTML page to a Master Page using the Design Manager interface. I click on Design Manager > Edit Master Pages > Convert a HTML file to a SharePoint Master Page and then proceed to select "HTML Master Pages" and then my HTML page. I also have, in this directory, all associated files (images and stylesheets) in place.

    When I click the Insert button after selecting the HTML page, instead of taking me to the converted results page, it takes me back to the "Edit Master Pages" screen and does not convert the HTML file to a Master Page.

    I have the Publishing feature turned on in the Site Features and Site Collection Features.

    Any ideas what I can do to make this work?

    Thanks in advance.

    Yoshi

    Tuesday, October 01, 2013 11:56 AM

Answers

  • ** Update

    For the new upgraded SharePoint 2013 site, I created a new Site Collection using the Publishing Template and then proceeded to test the HTML page in my work environment. This time things worked well and I had no issues.

    So, the problem could be with the default site collection using the Team Site Template even though Publishing Features were turned on for the Team Site.

    Thanks

    Yoshi

    Wednesday, October 02, 2013 6:00 AM

All replies

  • have you added all the required SharePoint snippets to the HTML file before you try the conversion?  Design manager will let you import almost any HTML page, but can't convert it to a SharePoint Master if the SharePoint components aren't present on the page.  If you export an existing master page you will see HTML comments that represent the placement of the SharePoint controls (like the ribbon) on the HTML page.  If you started with a pure HTML page you need to add the required snippets before it will convert.

    There is no definitive list of required snippets since it will vary depending on what you are doing, but here's an article about the snippets in Design Manager that may help.

    http://msdn.microsoft.com/en-us/library/jj822367.aspx


    Paul Stork SharePoint Server MVP
    Principal Architect: Blue Chip Consulting Group
    Blog: http://dontpapanic.com/blog
    Twitter: Follow @pstork
    Please remember to mark your question as "answered" if this solves your problem.

    Tuesday, October 01, 2013 12:40 PM
  • Hi Paul

    I managed to get the HTML file converted on another standalone SharePoint 2013 server without adding any snippets. The conversion went through great, and I was then able to modify the file, add snippets etc and test the look with existing pages.

    However I still cannot get it to work in my work SharePoint environment.

    I also noticed, in the Select an Asset screen, where you have the drop down list to pick All Master Pages etc, in my work environment I can only see All Master Pages and not the others (HTML Design and Related Files, HTML Master Pages, HTML Page Layouts, Display Templates, HTML Design Files, HTML Master Page Previews)

    It just seems like not all functionality for branding this site is available in this environment.

    Any other suggestions?

    Thanks

    Yoshi

    Tuesday, October 01, 2013 11:46 PM
  • ** Update

    For the new upgraded SharePoint 2013 site, I created a new Site Collection using the Publishing Template and then proceeded to test the HTML page in my work environment. This time things worked well and I had no issues.

    So, the problem could be with the default site collection using the Team Site Template even though Publishing Features were turned on for the Team Site.

    Thanks

    Yoshi

    Wednesday, October 02, 2013 6:00 AM
  • Paul - Is there any Guidelines to prepare the HTML and CSS? I am getting HTML/CSS from a Non-SharePoint web designer. 

    Regards,

    Khushi


    Khushi

    Thursday, February 13, 2014 7:02 PM
  • As long as you insert the required SharePoint snippets before uploading there aren't any specific requirements for the HTML and CSS.  Of course SharePoint master pages can be incredibly complex so downloading an existing master and giving the HTML/CSS to the designer is probably the best starting point.

    Paul Stork SharePoint Server MVP
    Principal Architect: Blue Chip Consulting Group
    Blog: http://dontpapanic.com/blog
    Twitter: Follow @pstork
    Please remember to mark your question as "answered" if this solves your problem.

    Thursday, February 13, 2014 8:56 PM
  • Thanks Paul for your response. I really appreciate it. Do we need to manually insert the required SharePoint snippets before uploading or Design Manager itself will insert the required snippet itself?

    Also, I explored the Seattle.html. I found it has reference of corev15.css, searchv15.css, menu-21.css, Themable/corev15.css. Do we need to provide these CSS along with the Seattle.html? Do we need to clean up the SharePoint tags from the Seattle.html? Because this desinger who will build the html for us is not a SharePoint person but just a web designer.

    Regards,


    Khushi

    Thursday, February 13, 2014 11:08 PM
  • You need to insert the snippets.  Design Manager will replace the snippets with the actual SharePoint code when you upload, but you have to decide where you want the snippets in your html.

    Unless you are overriding the built-in CSS you don't need to provide your own versions of those CSS files.  But starting with the Seattle.html and those CSS files and then changing the html and overriding the CSS with your own is the easiest way to make sure you don't miss something.

    You also don't need to clean up the tags if you download the Seattle.master through Design Manager.  Design manager replaces SharePoint specific html with generic snippets that will show up in a regular HTML editor.  Just tell your web designer not to do a lot of modifying inside the SharePoint snippets.  They are clearly marked in the HTML.


    Paul Stork SharePoint Server MVP
    Principal Architect: Blue Chip Consulting Group
    Blog: http://dontpapanic.com/blog
    Twitter: Follow @pstork
    Please remember to mark your question as "answered" if this solves your problem.

    Saturday, February 15, 2014 1:37 PM