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.
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
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.
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.
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.
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.
I’ll try to write a blog about it very soon. Stay tuned or follow @bniaulin for the posting. Thanks for the feedback!
Check this out, more on Page Layouts in SP2013 http://blogs.technet.com/b/speschka/archive/2012/07/27/using-dreamweaver-and-design-manager-with-sharepoint-2013.aspx
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”.
Hi very nice ,Is is it possible to do in Sp2010.
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.
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?
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.
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
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.
I absolutely agree with you and thanks for the feedback.
Pingback: Design Manager « sharepointv15
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!
Thank you for that amazing comment 🙂 Always appreciate the feedback.
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.
Pingback: Step by Step: Create a SharePoint 2013 Composed Look | Benjamin Niaulin
Pingback: How to edit the SharePoint 2013 Preview file for a Master Page | Benjamin Niaulin
Pingback: Sharing is caring » SP2013: Looking into Design Manager (or is it package?)
Anyone having problems with mapping a network drive: read this post http://tommdaly.wordpress.com/2012/11/07/sharepoint-2013-design-manager-unable-to-map-network-drive-while-working-on-the-server/#comment-299
In short: make sure Desktop Experience feature is enabled on your servers to do the mappings.
Thanks, I am sure this will help many who got stuck with this not working.
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!
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.
Great article. I am having issues with converting the basic HTML template. SharePoint gives several warnings and errors when trying to convert. http://haydenhancock.files.wordpress.com/2013/02/htmlconversion.png
I’ve tried on two different farms with the same result. I have no idea what’s going on…
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?
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.
Hi and sorry for the delay :S I stopped getting the emails for whatever reason.
Can you give me some more information? I do not control the source files for that HTML, I wonder if the link I sent was updated. Make sure your HTML is xml-compliant or that your wrote the doctype in uppercase. there is more information here: http://msdn.microsoft.com/en-us/library/jj822370.aspx
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.
Does there need to be any particular JS include or position for the snippet in the page?
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.
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):
After this, the ribbon seemed properly wired up!
Cheers for the great blog post & hope this helps.
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.
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?
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.
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
Pingback: Understanding Templated Client Rendering in SharePoint 2013 Beta | InstantQuick
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..
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
It’s not my first time to go to see this web page, i am browsing this site dailly and take good data from here all the time.
Pingback: Design Manager: Converting HTML to master page | The Repository
Fabulous, thanks for posting this I found it very encouraging as I was at my wits end with SPD 2013.
Thanks for sharing the blog.
SharePoint is changing the way people save their files and share them internally. It’s has been continuously becoming the foremost priority for every Microsoft Lover:)
Keep up the nice work.
Great post. Of all the ones I found researching this topic this was the best and I was up and running with master pages quickly. It really is remarkable how upon saving a new version of the HTML, the master page is updated by design manager. Very cool how you can create a WSP from it. It took a second getting the concept of putting the snippets into the right place. Also – if you can’t seem to map the network drive – make sure the “Desktop Experience” is enabled on the machine you’re working on if it’s a server.