Welcome to this third post in my series about the Design Manager in SharePoint 2013. Please read the previous two posts before you read on testing this post.

Design Manager in SharePoint 2013 – Part I
Design Manager in SharePoint 2013 – Part II

Assuming you have read my previous post about how to map the master page gallery and how to convert your branding assets with help of the Design Manger, you’re now ready to convert your branding assets. If everything works fine including adding snippets, the next step should be to style the snippets so they should have the same look and feel as your original HTML design.

You can download a complete example of a pure HTML branding as well as the result by the Design Manager conversion within a few cleaned snippets. You’ll find the links at the end of this post.

SOL

The next step after you have uploaded and converted your HTML mockup and added the snippets you need, is to create some override CSS classes to make the snippets looks like your mockup. That’s because the snippets inherit their style from SharePoint’s CSS files

For example, let’s say that your HTML looks like this for the top navigation:

<ul class="globalnavigation">
	<li>Services</li>
	<li>About Us</li>
</ul>

When you add the navigation snippet, SharePoint generates this markup:

DOM-explorer

In order to get the snippet to looks like your mockup you’ll need to add some CSS to override what SharePoint renders. Use IE developer toolbar for this task.

Version 0.1

This design is created specific for this blog post and are not fully tested in every scenario or in all browsers and versions, please see this as a first version, and of course, feel free to use it and modify it in the way you want.

I have uploaded this branding at my public SharePoint Online site with help of the WSP file, take a look here: http://swe-public.sharepoint.com

Download the HTML Mockup
Download the Design Manager Converted files
Download the WSP

You can upload the branding files with a WSP file in SharePoint, but if this is about SharePoint Online and a public web site, you will not find any link to the user solution page through the browser, you need to specify this in the URL field: https://-public.sharepoint.com/_catalogs/solutions a public SharePoint online is a bit limited compared to an Intranet site collection in the cloud, but we can count of an evolution in the future.

Next step, detaching the HTML file

I’ll write more about how you can detach the HTML file from its corresponding master page in the next article. Detaching is necessary if you want to include the branding in a Visual Studio branding feature or if you want do edit for example the master page with SharePoint Designer 2013.

Next post [Part IV]

There’s a lot of stuff to cover about the Design Manager, preliminary next up will cover more on snippets and how you can wrap ASP.Net and you own controls into an converted HTML page, how to include web part zones and how to detach the HTML file from its Master Page.

Christian

Advertisements