Me & My SharePoint [FrontEnd]

© Christian Stahl – All about SharePoint branding & customizations

Design Manager in SharePoint – Part II — August 31, 2013

Design Manager in SharePoint – Part II

This is the second post in my series about the Design Manager in SharePoint 2013. Please read the first post before you go on to this post. Design Manager in SharePoint 2013 – Part I

Before uploading your design files to SharePoint, be sure you follow this recommendations:

  • Valid and XML-compliant HTML
  • No inline CSS, style tags will be removed by the design manager. Use an external CSS file
  • Use an external JS file referenced from the HTML file

I do also recommend you to have SharePoint in your mind when you creating the HTML outside SharePoint, create empty containers for the components and controls much as close to how SharePoint works. Add comments so you know where you should put the snippets etc.

When you upload your design files (HTML/CSS/Images/JS) to the Master Page Gallery, keep all your files in one single folder. In this example I have named my folder to HQ Design.

Map Master Page Gallery

Soon as your branding files are ready to be uploaded in SharePoint, map a network drive to the folder where the master pages lives, the Master Page Gallery (_catalogs). Take a look how to map a drive here: http://msdn.microsoft.com/en-us/library/office/jj733519(v=office.15).aspx this will makes it easier to upload and work with the branding files later on. The path would be something like \\YourSite\_catalogs\masterpage
netdrive
When you have map the master page folder, drop the folder with your branding files in this drive. Once this are done, it’s time to try out the design manager!

Convert an HTML file with the Design manager

  • Use the browser and go your publishing site’s site settings and click the link Design Manager
  • In the left navigation, click ‘4. Edit Master Page’
  • Click ‘Convert an HTML file to a SharePoint master page’
  • In the dialog, click at your folder (HQ Branding) and then click at the index.html file and click the insert button. If everything ok you should see the status ‘conversion successful’.
  • Click at the dots next to index, and the dots in the dialog and select Publish a Major Version. Select OK.
    PublishMaster
  • Open a new tab in the browser and go the start page of your site. Go to site settings and click Master page. Specify the new master page in both as site master and system master. Mark both reset check boxes and click OK.

Your branding should now be applied onto the SharePoint user interface. Use the browser to see the files, Site settings > Master pages and page layouts. Open your folder to view the files. It’s perhaps easy to get lost in the user interface now when the new branding are applied. Remember that everything related to the Design manager for example snippets will be found from the Design manager start page /_layouts/15/DesignMasterPages.aspx.

Then it’s just to click at your file to get it open in the preview mode. You’ll find the Snippets as a link right to the top of the page. Ok, now on to the next step, add the necessary SharePoint controls and content sections in your HTML file.
snippetsRibbon

Create snippets

  • Go to the preview page of your branding,  /_layouts/15/DesignMasterPages.aspx and click at the filename for example index
  • Click at Top Navigation and copy the HTML
  • Open your index HTML file in the master page gallery from the mapped network drive. You can use for example Dreamweaver or the tool of your choice.
  • Locate the section in the markup where you want to put the snippet and just paste the snippet here
  • Save the HTML file, open the browser and verify that your changes have been updated
  • You’ll also need to create some CSS for all controls you add onto the page, use IE developer toolbar or Firebug to see the HTML that renders and the name of the CSS classes
  • Once your done with the first snippet it’s just to get on with the next snippet, for example the Search Box

WSP

When you are done with your branding you can create a package of all your branding files into one single WSP file (User solution).

  • Use the browser and go to the Design manager
  • Click at the last step in the left navigation, Create Design Package
  • Click Create, now it can take some time to build this. After a while you will see a new link named ‘Your package is ready…’ Click at the link to download the file
  • The solutions you have created or uploaded can be found from Site settings > Solution /_catalogs/solutions/Forms/AllItems.aspx

Is Design manager the replacement for SharePoint Designer & Visual Studio?

As so often in the world of SharePoint, it depends. See the design manager as a new alternative to the traditional approaches, it’s up you and it depends of scenario. You don’t have to use the Design manager if you already are experienced with branding in SharePoint 2010 and before with SPD or VS, but it could be a great option for you when it comes to creations of quick mockups in SharePoint or if you just prefer to build the HTML wireframes outside SharePoint. I do also think the design manager is great and valuable for a public faced site upon SharePoint online because it’s possibilities to just upload the design as a user solution.

Next post [Part III]

In the next post I’ll publish a example branding including a few SharePoint components you can download and try out and I’ll upload a WSP of this as well. The next post will also include some tips & tricks about Snippets that I think can be useful for you.

Design Manager in SharePoint – Part III

Christian