Creating a template using Master pages

You can use Master pages to define placeholders in the layout together with more complex HTML structure in case the Layout editor cannot satisfy your needs.

Place your .master files in: ~/App_Data/Sitefinity/WebsiteTemplates/YourTemplate/App_Master/

Creating the HTML structure

The .master file is a simple HTML file with few additional specific .NET tags.

The following is a simple code of a .master page:

File: ~/App_Data/Sitefinity/WebsiteTemplates/YourTemplate/App_Master/yourtemplate.master
 
<%@ Master Language="C#" AutoEventWireup="true" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
 
        <div id="Header">
            <asp:contentplaceholder id="Header" runat="server" />
        </div>
        <div id="Content">
            <asp:contentplaceholder id="Content" runat="server" />
        </div>
        <div id="Footer">
            <asp:contentplaceholder id="Footer" runat="server" />
        </div>
    </form>
</body>
</html>

The code above has the following differences from the standard HTML page:

  • The head line before the DOCTYPE declaration.
  • All of the body content is inside the form tag.
  • In the form tag there is a ScriptManager responsible for the loading of the script and the styles in your .master file.
  • Content placeholders are placed inside some of the elements.
    Content placeholders are ASP.NET native tags that will tell Sitefinity where you want to have an editable area. Content placeholders are making the element that wrap them into a layout element.

    IMPORTANT: Master pages that will be used as Sitefinity templates, must not have <asp: ContentPlaceHolder> controls declared inside the <head> tag of the master page (by default Visual Studio will include one when creating a new master page). When changing a template, some of the widgets might have their placeholders missing on the new template. In this case, they become orphaned and will be placed in the first available placeholder on the page. If there is a ContentPlaceHolder declared in the head tag, this will be the first available placeholder, and the orphaned controls will be placed there. This might cause problems with the page rendering in edit mode, since the template parser does not support Sitefinity content inside the head tag.

Adding an existing Master page in Sitefinity

If you already have a Master page and you want to use it in Sitefinity, perform the following:
  1. Place the file in folder ~/App_Data/Sitefinity/WebsiteTemplates/YourTemplate/App_Master/.
  2. Go to Sitefinity’s backend (http://<yoursite>/sitefinity)
  3. In the main menu, click Design » Page Templates.
  4. Click Create a Template.
  5. In Name input field, enter a name for your template.
  6. Select Use template and click Select another Template.
  7. Click Use your own .master file.
  8. Browse the file in your App_Master folder and select the .master file.
  9. Click Use Selected » Create this template.

NOTE: When you are working with Visual Studio in development environment, instead of the ~/App_Data folder of your website, you can create ~/App_Master and ~/App_Theme directly in the root of the project. This will allow you to use Visual Studio templates, because they will not appear when you work under ~/App_Data.
When you are ready with the development and you can go live and distribute the project you can move your files in your ~/App_Data folder, as described in the procedure above.

Next steps

+1-888-365-2779
sales@sitefinity.com

Related topics:

Feedback

How useful is this article?

Tell us more

Submit
Your message was successfully sent.

We appreciate your feedback.

Your message could not be sent.

OK