Page templates for customizations
In Sense/Net the look of all the content, pages, etc. are highly customizable. If you want to make a custom html layout, page templates help you to achieve it. You can define different columns and rows in every template and place your portlets within these zones, so if you want you can make a different kind of layout and design for every page on your site.
Static content in page templates
Some things on your pages are static or rarely change (logo, site title, menu in the footer area, etc. appear on every page and without page templates you should define them on every single page). You can place them in the html code of the page template, so these predefined elements appear on every page where you use this template.
Page templates and master pages
After you add a new page template to the system an ASP.NET master page is automatically created and when editing one of the templates its master page changes as well. In the master page "asp:contentplaceholder" controls are created. When you add a new page with the page template in the background the master page is used on the content page. The system adds some internal, Sense/Net related controls to the master page (e.g. style manager, script manager, portlet manager, portlet editor zone), so you get these features automatically when using Sense/Net portlet pages (e.g. the portlet editing and drag&drop functionality will automatically work on every page).
Where to find page templates
Page templates are in the /Root/Global/pagetemplates folder. Here can you add, edit or delete them. A page template is a separate content type in the system. You have to create or upload a new page template in the Content Explorer. Do not forget to upload as page template.
From version 6.5.2. Pagetemplates can be skin-related contents, and can be placed under a specific skin-folder. Save it to the /Root/Skins/your-skin/pagetemplates folder
How to choose a page template
When you create a new portlet page choose a template in the page template control. If you want to change the page template of a page, edit the page with Portal Remote Control or in the Content Explorer and on the page properties pick a new page template.
Switching the page template of an existing page
Sense/Net allows you to switch the page template of a page after creation, whenever you want. There is one important thing you will have to remember when switching page templates: the target page template must define all zones that were used in the original page template - by using we mean portlets were put into the zones. Zones are identified by their name attributes.
If you switch to a page template that does not contain a zone with a name that was contained in the original page template, and the zone in the original page templated contained portlets, ghost portlets will appear on pages with the new page template. This means that these portlets will not be visible and will not be editable/removable, but their logic will be running in the background leading to hindered performance and possibly strange, undiscoverable bugs!
<head> <title>Sense/Net 6.1 Demo Site</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="imagetoolbar" content="no" /> <sn:BaseTag ID="BaseTagControl1" runat="server" /> <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" /> </head>
<body class="sn-body sn-layout3 sn-layout-inter sn-inter-<%=snLang%>"> <sn:CssRequest CSSPath="$skin/styles/jqueryui/jquery-ui.css" ID="pageTemplateUIStyleReq" runat="server" /> <sn:CssRequest CSSPath="$skin/styles/sn-layout.css" ID="snLayoutCss" runat="server" /> <sn:CssRequest CSSPath="$skin/styles/skin.css" ID="pageTemplateCssRequest1" runat="server" /> ... <sn:ScriptRequest runat="server" Path="$skin/scripts/init.js" /> </body>
In the body section of the page templates you can define zones where the user can place portlets. They can drag and drop the portlets between zones. Usually zones define the basic layout of the page (header, left column, right column, footer, etc.). The zones have a unique name and a HeaderText property (this will be displayed in the header of the zone when the user edits the page). You can put portlets in zones in the page template directly as well. You can also add a portlet in the page template outside of a zone. If you put them in zones users will be able to change them (edit their properties) while they are editing the page. Portlets that are defined in page templates with markup cannot be removed using the UI, only by changing the page template.
<div class="sn-layout-container ui-helper-clearfix"> <div class="sn-columns ui-helper-clearfix"> <div class="sn-column sn-column1"> <div class="sn-pt-body-border ui-widget-content"> <div class="sn-pt-body"> <div class="sn-breadcrumb"> <snpe:BreadCrumbPortlet BindTarget="CurrentContent" ID="BreadCrumb" runat="server" Separator=" / " ShowSite="True" SiteDisplayName="Home" /> </div> </div> </div> <snpe-zone name="WideCol" HeaderText="Wide Column" PartChromeType="TitleAndBorder"/> <div class="sn-columns ui-helper-clearfix"> <div class="sn-column sn-column1"><snpe-zone name="LeftCol" HeaderText="Left Column" PartChromeType="TitleAndBorder"/></div> <div class="sn-column sn-column2"><snpe-zone name="RightCol" HeaderText="Right Column" PartChromeType="TitleAndBorder"/></div> </div> <snpe-zone name="WideColBottom" HeaderText="Wide Column (Bottom)" PartChromeType="TitleAndBorder"/> </div> <div class="sn-copyright"> <a href="/legal/">Legal</a><span class="sn-separator"> • </span> Powered by <a href="http://www.sensenet.com" title="www.sensenet.com">Sense/Net 6.1</a> </div> </div> </div> </div>
The Portal Remote Control must be defined in the page template too if you want to enable the end users to edit the page. Put the snpe:PortalRemoteControl control in the template at the end of the body section.
<body> ... <snpe:PortalRemoteControl ID="RemoteControl" runat="server" Groups="/Root/IMS/Demo/Developers;/Root/IMS/BuiltIn/Portal/Administrators" /> </body>
- Skin System overview
- The Skin System - for Portal builders
- The Skin System - for End users
- The Skin System - for Developers
- Skin anatomy
- The Sense/Net CSS Framework
- Bundling css and js files
- Portal Remote Control