How to Upload Files into SharePoint 2013 Design Manager

One of the new features now available in SharePoint 2013 is the creation of the Design Manager.  The purpose of the Design Manager is to allow designers to create SharePoint Masterpages with little to no experience with SharePoint. In the past, the designer would have to be able to create and edit a Masterpage with SharePoint Designer and know how to create and use the code needed to make the design files work properly in SharePoint.  In this series, I will teach you the ins an out of Design Manager and some simply tricks to help your journey move more smoothly.

How to upload your design files into SharePoint 2013 Design Manager:

1. Create your design files: You will need to  create your HTML, CSS and Javascript files in any editor that you prefer ahead of time.

2. Open Design Manager: You can find design manager under the cog icon located on the top right-hand side of the navigation. This will become a drop down and you will go down and select the “Design Manager”.

 

 

 

 

 

 

 

Once you open the design manager you will see the options for “I’m the Information Architect” and “I’m the Visual Designer” The first step that you will want to do is go to the “Design your Site” link under the “I’m the Visual Designer” section.

 

 

 

 

 

 

 

 

You will see the Design Manager Welcome page. If you look on the left navigation you will see several options as it will walk you through the many different steps in Design Manager. We are going to focus on uploading the design files (HTML, CSS, Javascript) in this article.

 

 

 

 

 

 

3. Go to upload design files: On this page it will ask you to map out your drive so that you will be able to use any HTML editor to access your design files in the future for editing.

 

 

 

 

 

 

4. Once you have mapped your drive, you will want to want to move to the “Edit Master Pages” in the Left Navigation. Once on the page, you will want to click on the link “Convert an HTML file in a SharePoint master page”.

 

 

 

 

 

 

Once you click on the link “Convert an HTML file n a SharePoint master page”, it will open a window a window  where you will see a list of HTML pages that have been uploaded. You will want to click on the link “Add a new item” at the top of the page. It will have you browse to the location of your design files to upload. You will want to upload all of your design  files into the Masterpage Gallery. This is different than in previous version of SharePoint.

 

 

 

 

 

 

 

 

 

5. Once you choose the file that you want to upload, SharePoint will bring up a page where you can change the title and and confirm what type of file you are uploading, (i.e HTML, CSS, Javascript etc.).

 

 

 

 

 

After confirming the information about your file is correct and you press the “Save” button, it will bring you back to the previous page where you will now see your file in the list. Select your file “example.html” and press the “Insert” button at the bottom of the page.

Once you press “Insert” your file will be converted to a masterpage and you will be directed back to the Masterpage Gallery. It may take a moment, but your file will now show up at the top of the list where you will also see the Conversion Status Successful.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

TIP: Any HTML page that you upload must be XML compliant before it will be converted successfully. The Design Manager is not a fan of boilerplate code so you many need to adjust your files prior to upload to help your conversion succeed.