How To Create Html Master Page In Sharepoint 2013

Are you looking to create your own HTML master page in Sharepoint 2013? Look no further – we have the ultimate guide for you! In this article, we will provide step-by-step instructions on how to create a custom HTML master page in Sharepoint 2013 using Design Manager or SharePoint Designer. These methods will simplify the management of your digital workspace and unleash your web potential. Let’s get started!

To create a custom HTML master page in Sharepoint 2013, you have two options – Design Manager and SharePoint Designer. With Design Manager, you can convert an existing HTML file into a minimal master page that contains only the necessary elements for Sharepoint to render the page correctly in the browser. Design Manager creates both the .master file and an associated HTML file, giving you the flexibility to work with either file. If you prefer, you can also work directly with the .master file as an ASP.NET developer or SharePoint developer.

To create a minimal master page using Design Manager, follow these steps:

  1. Browse to your publishing site and go to the Design Manager.
  2. In the left navigation pane, choose Edit Master Pages.
  3. Choose Create a minimal master page.
  4. In the Create a Master Page dialog box, enter a name for the master page and choose OK.
  5. SharePoint will create both a .master file and an associated HTML file with the same name in the Master Page Gallery.
  6. Your HTML file will now appear with “Conversion successful” displayed in the Status column.
  7. Follow the link in the Status column to preview the file and make any necessary changes.
  8. The main content block in the HTML file is represented by a <div> tag inside a content placeholder named ContentPlaceHolderMain.
  9. You can edit the HTML file directly on the server using an HTML editor, and any changes will be synced to the associated .master file.
  10. If you want to work only with the .master file, you can break the association between the HTML file and the .master file by clearing the Associated File check box in the HTML file’s properties.

Alternatively, you can create a custom master page using SharePoint Designer. Open SharePoint Designer, navigate to your SharePoint site, and create a new master page by copying a default master page or starting from a blank one. Then, modify the master page in SharePoint Designer to customize the look and feel of your site. Finally, save, check in, publish, and set the custom master page as the default for your SharePoint site.

By following these steps, you will be able to create your own HTML master page in Sharepoint 2013 and fully customize your site’s appearance. Stay tuned for the next sections of this article, where we will dive deeper into the process and provide additional tips and considerations for managing your HTML master page in Sharepoint 2013.

Using Design Manager

Design Manager in SharePoint 2013 offers a convenient way to create a minimal master page from an existing HTML file. Let’s dive into the steps!

  1. Browse to your publishing site and go to the Design Manager.
  2. In the left navigation pane, choose Edit Master Pages.
  3. Choose Create a minimal master page.
  4. In the Create a Master Page dialog box, enter a name for the master page and choose OK.
  5. SharePoint will create both a .master file and an associated HTML file with the same name in the Master Page Gallery.
  6. Your HTML file will now appear with “Conversion successful” displayed in the Status column.
  7. Follow the link in the Status column to preview the file and make any necessary changes.
  8. The main content block in the HTML file is represented by a
    tag inside a content placeholder named ContentPlaceHolderMain.
  9. You can edit the HTML file directly on the server using an HTML editor, and any changes will be synced to the associated .master file.
  10. If you want to work only with the .master file, you can break the association between the HTML file and the .master file by clearing the Associated File check box in the HTML file’s properties.
  11. Now, let’s take a look at an example of the HTML file structure for a minimal master page created with Design Manager:

    HTML Tag Purpose
    <html> Defines the root element of an HTML document.
    <head> Contains meta-information about the document, such as title and style references.
    <body> Represents the content of an HTML document.
    <div> Defines a division or a section in an HTML document.
    <asp:ContentPlaceHolder> Specifies a region in the master page that can be modified by content pages.

    This table provides a basic overview of the HTML tags commonly used in a minimal master page created with Design Manager. By understanding the structure and purpose of these tags, you can easily customize your master page to suit your needs.

    Overall, Design Manager in SharePoint 2013 simplifies the process of creating a minimal master page from an existing HTML file. It allows you to leverage your existing HTML knowledge and streamline the customization of your SharePoint site. Whether you’re a developer or a designer, Design Manager provides the tools you need to create a visually appealing and functional master page.

    Now that you have an understanding of how to create a minimal master page using Design Manager, you can take full advantage of this feature in SharePoint 2013 to enhance the look and feel of your site.

    Using SharePoint Designer

    If you prefer working with SharePoint Designer, this section will walk you through the process of creating a custom master page tailored to your specific needs. With SharePoint Designer, you have more flexibility and control over the design and layout of your SharePoint site.

    To create a custom master page using SharePoint Designer, follow these steps:

    1. Open SharePoint Designer and navigate to your SharePoint site.
    2. In the Site Objects pane, select the Master Pages folder.
    3. Create a new master page by either copying a default master page or starting from a blank one.
    4. Once you have a new master page, you can modify it in SharePoint Designer to customize the look and feel of your site.
    5. Make changes to the HTML, CSS, and JavaScript code to adjust the layout, colors, fonts, and overall design of your site.
    6. Save your changes and check in the master page.
    7. Publish the master page to make it available for use on your SharePoint site.
    8. Finally, set the custom master page as the default for your SharePoint site to ensure all pages use your customized design.

    By using SharePoint Designer, you have the power to create a unique and visually appealing master page that perfectly matches your branding and design requirements.

    Considerations when using SharePoint Designer

    While SharePoint Designer offers great flexibility, it’s important to keep a few considerations in mind:

    • Always backup your original master pages before making any changes, in case you need to revert back to the default design.
    • Ensure that any customizations you make comply with your organization’s branding guidelines and standards.
    • Test your custom master page on different devices and browsers to ensure it is responsive and functions properly across different platforms.
    • Regularly review and update your custom master page as your site evolves to maintain a consistent and professional appearance.

    By following these guidelines and leveraging the power of SharePoint Designer, you can create a custom master page that truly reflects your organization’s unique identity and enhances the user experience on your SharePoint site.

    Advantages of Using SharePoint Designer Considerations
    Greater control over design and layout Backup original master pages
    Ability to customize colors, fonts, and overall design Compliance with branding guidelines
    Responsive design for different devices and browsers Test across different platforms
    Reflect organization’s unique identity Regularly review and update

    Additional Tips and Considerations

    Before we conclude, here are a few extra tips and considerations to help you navigate the process of creating and managing your HTML master page in SharePoint 2013.

    When working with an HTML master page, you have the option to edit the HTML file directly on the server using an HTML editor. This allows you to make quick changes and updates to the layout and content of your master page. Any changes you make to the HTML file will be automatically synced to the associated .master file, ensuring consistency across your SharePoint site.

    If, however, you prefer to work solely with the .master file, you can break the association between the HTML file and the .master file. To do this, simply clear the “Associated File” check box in the HTML file’s properties. This will enable you to make modifications to the .master file without affecting the HTML file.

    It’s important to note that breaking the association between the HTML file and the .master file should be done with caution. This action will prevent any changes made to the HTML file from being reflected in the .master file. Therefore, it’s recommended to use this option only when necessary and with a clear understanding of the potential implications.

Meet the Author

Abdul Rahim has been working in Information Technology for over two decades. Learn how Abdul got his start as a Tech Blogger , and why he decided to start this Software blog. If you want to send Abdul a quick message, then visit his contact page here.