SharePoint 2013 – Design Manager – Convert HTML to Master Page

The first thing that caught my eye when I logged on to SharePoint 2013 was the Design Manager. I already introduced it shortly, talking about the Device Channels that comes with it SharePoint 2013 Device Channels – Design Manager. In the past I have focused on learning to brand SharePoint using CSS and of course the tool that we all used to integrate our CSS or new Master Pages was… SharePoint Designer.

SharePoint Designer is no longer the preferred tool

With all the noise around SharePoint 2013 these days, you may not have noticed something about SharePoint Designer. There is no longer a “Design” view for pages. It is only available in CODE View.

The Design Manager is SharePoint’s solution to Branding and so far, I like what I see.

9 Steps Branding Program

The Design Manager help the “Designer” of the site by providing 9 steps to brand the site. The steps are not all mandatory, in fact you most likely won’t use all of them together. I already covered the first steps up to Device Channels, this time I want to focus on a feature I keep hearing about: Design Packages


I came across a great TechNet article that covers most of the new Web Content Management features.
http://msdn.microsoft.com/en-us/library/jj163942(v=office.15)

Get ready for this, you do not need to edit Master Pages any more. You can have a Professional Designer or yourself ;) create an HTML design using tools like Dreamweaver and SharePoint 2013 Design Manager will convert it for you. Randy Drisgill already covered in summary in his Top 6 new features for designers’ article, check out his #1 at the bottom.

Testing it out

I don’t have enough time to create my own HTML design so I went on the net and looked for something that would do. I downloaded this free theme: http://demo.templateworld.com/zero/download/dusky.zip

First I started by uploading the files in a folder called Dusky under https://niaulin-public.sharepoint.com/_catalogs/masterpage/ which is the url Design Manager gave me to upload my design files.
I recommend you map yourself a drive to that location because you will probably be going back and forth making adjustments and adding files.

Uploaded the files using the same structure provided in the .zip to make sure paths continued to work.


Once all the files were uploaded, I went back to the Design Manager, on STEP 4 Edit Master Pages and clicked on the option at the top to Convert an HTML file to a SharePoint master page.

(In the browser that pops up, make sure you select All Master Pages from the drop down to see all your files)

Once completed, make sure the Status is set to Conversion Successful


What happened?

Well if you go back to your “Dusky” folder in this case, you will notice that SharePoint created a .Master file or master page for our design. Don’t touch it, from now on modifications will be made to the html file that was uploaded and converted earlier. During the conversion, SharePoint added some “controls” to make basic stuff like the ribbon and the main content work by adding “Snippets”. I’ll cover those shortly. Quickly let’s look at the differences in your preferred HTML Editor.

And of course you could look at the HTML code to look at the differences.

Previews

Now back in the Design Manager, if you click on the file name of your converted HTML page it will open up a preview of the new design. This is a live preview in SharePoint of your design, but by default it only shows you generic placeholders, meaning the ribbon and where the content would go (usually at the bottom)


If you want you can use the “Change Preview Page” toggle at the top left to generate a preview of your new design with an existing page or create a new page for this preview. This will help you see where and how will the content show up in this new design as well as other snippets as we add them.

Now I see how the home page would look like in my new design. Pretty Neat!

Some controls are missing

Obviously there are some major issues here, where is my Global Navigation and/or Quicklaunch, where is the Search Box, etc.. When we did our HTML (or in this case took a free one off the net) there was no concept of “SharePoint” only design. That’s where the “Snippets” of the Design Manager come in.

Snippets are pieces of code that Design Manager will generate for you to add in your custom HTML for the SharePoint controls to appear correctly once integrated. Let’s look at upgrading our design a little.

Here is a short summary of the SharePoint code snippets generator

In this case I am taking the default Top Navigation which appears by default in from of up and copied it to my clipboard.

Next we need to add this in our converted HTML (not the master page) and remove the static navigation that exists. Once the file updated, I went back into “Preview” mode to see what it looked like.

Perfect we have a working global navigation, if I had the time I could have specified more options like CSS classes I wanted to use in the Snippet before I generated the code and copy pasted it to my HTML.

Using what we learned, I re-opened my convereted HTML page from my now mapped folder (so useful!) and removed all the sample content that came with the free design we downloaded. I also used the Snippet Generator to get my Search Box. Here is my new home page.

Conclusion

Well we just created a new SharePoint branding for SharePoint 2013 with nothing but the Design Manager. Wow now that’s powerful. Didn’t even open SharePoint Designer. In my previous article I talked about using the Design Manager to set up Device Channels to display your site differently depending on the devices that will be visiting. If you looked at the Snippets selection earlier, there is a Device Channel container snippet that will help you choose what will appear on which devices. Just amazing.

Hope this was helpful.

About these ads

40 thoughts on “SharePoint 2013 – Design Manager – Convert HTML to Master Page

  1. Aagust kk

    Thanks for sharing this great info.
    Now, I’m trying to create a custom page layout using “Design Manager”, but no good result so far. Can you please share some steps to create custom page layout and page. I will appreciate your help.

    Reply
      1. Aagust kk

        I had already gone through this blog, its quite helpful. Thank you.

        But my problem is still not sorted out, After creating a page layout with the help of “Design Manager”, when i’m creating a page in “Pages” library i couldn’t see any page layout in “Page Layout” section that i have created in “Design Manager”.

    1. Benjamin Niaulin Post author

      Unfortunately, no. This is for 2013 as part of a new feature to help designers get into SharePoint. However it is common practice for Designers to start in HTML in 2010. Then add Content Place Holders at the right place. You just have to make sure you add all the Place Holders required by SharePoint or your site will crash.

      Reply
  2. Brent Baumgartner

    Hey, this article is great and it helping my transition into SP 2013. I have one quick (and pretty basic) question. Did you have any difficulty mapping a network drive to the URL which Design Manager gave you? I’ve tried Map Network Drive > Connect to a Web site > Choose custom network location and pasting my url (https://entreemobile-public.sharepoint.com/_catalogs/masterpage/), but when I try to connect Windows notifies me that The folder I entered does not appear to be valid. Did you have a similar issue? If so (or if not) how would you suggest I mitigate this error so that I can get to the interesting stuff?
    Thanks

    Reply
    1. Benjamin Niaulin Post author

      Are you using the Office 365 Preview of SharePoint or do you have it installed? You could work with your files and having a tab of your browser opened on the “step 4″ to upload your finished html and have it converted. For the other files like CSS, use SPD 2013 or manually upload them in the Style Library.

      Reply
      1. Brent Baumgartner

        I’m using the 365 Preview. Unfortunately SPD 2013 is having the same issue, even though I can confirm the URL is correct by copying and pasting it into my browser. I think that I’m going to have to go with manually uploading all 80 files worth of my css, js, and jpgs. Thanks for the response

  3. DeShon Clark

    Wow! Great write-up Benjamin….this is a really cool feature for SharePoint 2013….I am sure there will be some adjustments needed for tricky design…but this is definitely a step in the right direction….I will give it a try.

    Reply
  4. Pingback: Design Manager « sharepointv15

  5. kettlebell workouts for women

    Thanks for your personal marvelous posting! I certainly enjoyed reading it, you will be a great
    author. I will be sure to bookmark your blog and may come back in the foreseeable future.

    I want to encourage you to ultimately continue your great posts,
    have a nice evening!

    Reply
  6. Steve

    Reblogged this on Steve Knutson’s IT Blog and commented:
    The branding features of SharePoint 2013 have been completely revamped. No need to jump into SharePoint Designer, it’s all done via “Design Manager” in the SharePoint Web UI. This blog post gives a great overview.

    Reply
  7. Pingback: Step by Step: Create a SharePoint 2013 Composed Look | Benjamin Niaulin

  8. Pingback: How to edit the SharePoint 2013 Preview file for a Master Page | Benjamin Niaulin

  9. Pingback: Sharing is caring » SP2013: Looking into Design Manager (or is it package?)

  10. Michelle Vitale

    Great series of articles. I’m working on a SP 2013 on-premise Team site, so I don’t have access to the Design Manager. Do you know if its possible to get this working without the Design Manager? Thanks!

    Reply
    1. Benjamin Niaulin Post author

      Unfortunately no, you do need the Design Manager for the HTML Conversion. However you can still access it on a Team site, the Site Collection Feature “Publishing Infrastructure” needs to be activated.

      Reply
    1. Benjamin Niaulin Post author

      Hi Hayden, if you tried in 2 farms and it isn’t working that we are sure it’s an issue with what you are uploading.
      Have you uploaded ALL the files the html you are trying to convert uses? If you have a local folder with your CSS, JS, etc it should be upload WITH the HTML file to be converted in your SharePoint Site. Then when you try to convert that HTML file it will try to reference these files exactly where the HTML file used to be pointing them. My guess is you are missing a file.
      Something else you could try is removing all tags in the body and see if it works. If it does than you know the issue is in the body tag. Do the same with customizations in the head tag. If one of those 2 works, than you can add back your content piece by piece to see which one is breaking the conversion.
      Another thing, have you done any changes to the site before trying to convert? Custom solutions or changing features or other… Can you tell me on what template you are doing this, what are the steps you take?

      Reply
  11. Deepak Semwal

    Hi Benjamin Niaulin,
    I tried to work with the same sample you provided but its also not working for me. I was trying to convert the html provided in your post and uploaded all the necessary files with the same structure (under master page gallery created Dusky folder and uploaded font,html, source folders and content)as in downloaded zip file but without success. Can you give me some workaround so that I can check why design manager always giving me “warning with errors” message. I am using a publishing site template.

    Reply
  12. Matt

    Hi Benjamin,

    Great post. I’m really enjoying how much nicer it is to work with branding in 2013 compared to 2010 and your article helped me communicate the differences to our team here.

    Bit of a long-shot but was wondering whether you’d seen the issue where the header JavaScript doesn’t work on custom masterpages? I’ve tried in a couple of environments and can’t edit the page or change to/from list or page tabs etc.

    Does there need to be any particular JS include or position for the snippet in the page?

    Thanks!

    Reply
    1. Benjamin Niaulin Post author

      Hmm I actually do recall having some problems after converting and placing tags too late in the code. But it’s hard to tell with yours as there are many factors, maybe some of your scripts are having issues causing this. Try with F12 or whichever you are using to see what is the script error and where does it crash.

      Reply
      1. Matt

        Hi Ben,

        I managed to sort it out/luck in to a fix.

        The dev tools had been reporting that certain functions were missing (such as one used to init the ribbon’s functionality). I looked through the oslo masterpage and added the following script snippet to the end of my page (before the closing body tag):
        < !–SPM:–>

        <! –SPM:–>

        After this, the ribbon seemed properly wired up!

        Cheers for the great blog post & hope this helps.

  13. Roseann

    Howdy I am so happy I found your weblog, I really found you by
    accident, while I was browsing on Digg for something else,
    Regardless I am here now and would just like to say thank
    you for a incredible post and a all round entertaining blog (I also love the theme/design),
    I don’t have time to browse it all at the minute but I have saved it and also added
    in your RSS feeds, so when I have time I will be back
    to read a lot more, Please do keep up the great work.

    Reply
  14. Mel (@colonmelissa)

    I’ve downloaded the ‘dusky’ template and everything is going great. However, when adding the code for the top navigation snippet, the sub-site links are appearing below the ‘home’ link. .Also, I have another level of sub-sites (For example Home > Site 1 > Sub-site 1) that are not showing up, even though I set the “StaticDisplayLevels” to 3. Any tips for fixing these things?

    Reply
    1. Benjamin Niaulin Post author

      Your sub-site links error must be something related to the CSS. When we convert HTML to Master Page it’s important to have only basic framework of HTML and not too much CSS. The Dusky template is really just a demo to show it works but has too much CSS within it especially for navigation. After adding the Nav, make sure you use things like F12 Dev Tools to see the generated HTML/CSS and override it. As for the subitems not appearing, are you suing Term-Based Navigation? If so they will only appear once you are in that specific site.

      Reply
  15. Franco Bao

    Hi Benjamin, Is there anything special that needs to be done to the master page code in order to activate anonymous access. I take the OOB master page and the anonymous login works, but when i activate the master page that I converted from html, the anonymous login doesn’t seemt to work. Am I forget to do something with the snippet of some sort or change some declarations in order to disable the login. Thanks in advance Benjamin

    Reply
  16. Pingback: Understanding Templated Client Rendering in SharePoint 2013 Beta | InstantQuick

  17. sanyam

    Hi Benjamin Niaulin,
    really appreciate your blog.i am not getting proper template as it is in html..can you please tell he how to modify using Snippets..thanks in advance..

    Reply
  18. responsive theme

    Thanks for ones marvelous posting! I genuinely enjoyed reading it, you will be a great
    author.I will remember to bookmark your blog and will often come
    back later on. I want to encourage continue your great writing,
    have a nice day

    Reply
  19. Pingback: Design Manager: Converting HTML to master page | The Repository

  20. Pingback: Beautiful BI Sites with SharePoint 2013 :Jen Underwood BI, Predictive Analytics & Excel Blog

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s