Select a site

IMPORTANT: This version of Sitefinity CMS is out of support and the respective product documentation is no longer maintained and can be outdated. Use the version selector to view a supported product version.

Create a template using a Master page

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. Using ASP.NET Master Pages is the common way to add consistent layout for .NET developers. You can use this approach in case you need more complex HTML layout or you need logic in code-behind files. 

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" %>
 
<%@ Register TagPrefix="telerik" Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" %>
  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
<telerik:RadScriptManager ID="ScriptManager1" runat="server"></telerik:RadScriptManager>
  
        <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 CMS where you want to have an editable area. Content placeholders are making the element that wrap them into a Create a template using the Layout editor.

    IMPORTANT: Master pages that will be used as Sitefinity CMS 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 CMS 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 CMS, 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.

Back To Top

Next: Sort and filter page templates in the backend