In all the previous releases, creating master pages and layouts was definitely not easy for a designer considering the technical aspects of it. The designers would have to understand SharePoint and what components are mandatory on the master page and how they render to make their designs come alive.
In SharePoint 2013, there is a new feature called Design Manager which will help to separate the design aspects from the technical requirements to create a master page. Designer does not need to know which components are necessary on a master page. The Design Manager assists in creating the master page from simple HTML, CSS files. The designer now only has to worry about his design and convert that into HTML, CSS and Images. Once these artifacts are ready, the design manager can process these to generate a master page.
The process to create a master page is really simple:
1. Create the layout that you want using the HTML editor of your choice.
2. Create the CSS file that supports your design.
3. Add the images that are a part of your design.
4. Upload all the files to the Master Page gallery. (There is a very convenient way to do this and make edits while developing and tweaking your HTML).
a. Open your master page gallery in windows explorer.
b. Copy the html, CSS and Images folder to the master page gallery.
5. When you upload the HTML file, assign the HTML master page as the content type. (optional)
6. All other files can be assigned the Design Files content type. (optional)
7. Go to the Site Settings page.
8. Click on Design Manager under the “Look & Feel” category.
9. Or you could click on the new Site Actions button on the right and click Design Manager.
10. Jump to the Import Master Pages.
11. Click on “Convert an HTML file to SharePoint master page” link.
a. This will open up a dialog box for you to select a html file from the master page gallery.
b. Select the html file that you just uploaded.
12. Once you select a file, SharePoint will generate a master page for that design. If any errors are encountered during the conversion process, it will notify you.
13. At this point, the master page has been generated.
14. To customize the master page click on the “Conversion successful” link.
a. This will take you to a preview page. As you can see from the screen shot below SharePoint has converted and created the master page.
Adding SharePoint components to the master page using Snippets Manager:
1. Before we customize the master page, in the windows explorer window where you have opened the master page gallery, open the Html file that you uploaded in the editor of your choice.
2. To add the SharePoint components like the top navigation and other controls, web parts, click on the Snippets link in the top right corner of the preview page.
3. This will open up the snippets gallery page.
4. Let’s say you want to add the top navigation to your master page.
a. Click the Top Navigation button in the ribbon.
b. This will create the HTML snippet you need.
c. Copy the snippet to the clipboard.
d. (You can customize the properties of the top navigation control and click on “Update” to generate the new snippet.
5. Switch to the html file that you have opened up in an editor in step 1.
6. Paste the html snippet wherever you want the top navigation to appear in your design.
7. Save the html file.
8. Refresh the Preview page in your browser and you will see that the master page was generated again and your changes are visible.
9. This way you can quickly create and work on your master page.
10. To publish the master page, select the html file in the master page gallery and publish it. This will automatically publish the master page file also and you will be able to set the master page for the site.
Screen Shot: The generated master page with the top navigation.
Tips:
1. The html file and the master page are associated with each other.
2. SharePoint will not let you delete the master page as long the association is still there.
3. To remove the association, go to the master page gallery.
a. Select the Html file
b. Edit Properties
c. Uncheck the “Associated File” check box.
d. Save
4. Now you can work on the master page directly by editing it.
5. Also, while the html and the master files are associated, you cannot publish the master page file directly. You have to select the html file and publish it. This will publish the master page and you will be able to set the master page for the site.
6. Suggestion: Once you build the master page to your satisfaction, disassociate the html file, package the master page in a wsp and then deploy it to your test, production environments.
Hi,
This article was helpfull 🙂
When create a package there is a way only to select my design?
When i create a package it always come with all i have in the galleries.
There is some way to use SP2010 themes (wsp) in SP2013?
Thanks
Hi, I installed the SharePoint Server 2013 preview, But Design Manager is not shown under the Look & Feel or Site Settings. Even I installed SharePoint Designer 2013 Preview also. How can I get it. Please give me an idea.
Thanks & Regards
HM
to HM>> Design Manager enable only in Publishing Sites
Amol, thank you for this post. Can you halp me? I can’t understand what I should to do to apply my style to top navigation bar. I have my master page html file with custom styles. When I paste snippet code into master page where and what I should change to get the same look like my master page style?
To apply your styles to the top navigation bar:
When you select the top navigation snippet in the snippet manager, in the right pane, expand the properties and add the styles there. Since the menu control gives specific placeholders to apply styles, you might have to tweak your styles to make it look right. This will take some back and forth to get it just the way you want it.
Then as usual, copy and paste the snippet in your master page html and continue this process till it looks okay.
Activate the publishing features.
a. Open your master page gallery in windows explorer. <– how exactly sir?
Open the Master page gallery in the Internet explorer. Click on the Library Tab. Click on the button for “Open in windows explorer”.
Thanks, Amol. That got me there, but now when I click Open in Windows Explorer, it says it is having a problem opening the location and try again after adding the page to IE’s trusted sites. I have added it to the trusted Sites but the warning message persists.