Page templates

Page templates provide the basic structure of HTML used to render a page. The available templates are shared by all page types, with the exception of Header and Footer. They generally contain minimal HTML and DotLiquid, as the majority of the HTML is rendered by widgets and directives. Out of the box, almost all pages will use the "Standard" template shown below:

<div class="row main-row [[Model.CssClass]] [[Model.DynamicCssClass]]">
  <div class="medium-12 large-12 columns">
    [% zone 'Content' %]
  </div>
</div>

This contains some basic HTML and has page specific CSS classes injected. The model used to render the DotLiquid is a ContentItemModel for the corresponding page.

The Theme Configuration file may be used to modify the default template used for pages; otherwise, by page, a different template may be selecting using the CMS.

Page templates exist at ~/Views/Pages/*.liquid

Header/footer

The Header and Footer are special cases. They are treated like Pages in most of the site, but do not share templates with regular pages. They also ignore the DefaultPageTemplate.

Templates for these two pages exist at ~/Views/Pages/[Footer|Header]/*.liquid.

Upgrade existing themes without page templates

To maintain backwards compatibility for git themes - if a theme is loaded and it contains no page templates, then the page templates from the responsive theme will be automatically loaded into it at start up. These page templates will only exist in the database; the git theme itself is not modified.

If a git theme is then modified to include at least one page template, then those responsive page templates will be removed from the theme at start up. Therefore, it is important to add all required page templates to a git theme when it is being upgraded. Adding just a single new custom page template could result in a site that won't render properly.

Legacy templates

There are a number of legacy page templates included in the Responsive theme. These templates ensure that a git theme can be upgraded without any changes required to the theme. The old razor page templates were almost all identical, but had a few variations that could cause issues without these legacy templates. For example, the Legacy-ContentDiv:

<div class="row main-row [[Model.CssClass]]">
  <div class="medium-12 large-12 columns">
    <div class="content">
      [% zone 'Content' %]
    </div>
  </div>
</div>

This variation was used by the ProductComparisonPage and included an extra div with a class of content. The Responsive theme had no styles specific to this div, so it could be safely removed; however, a cloud theme may have a style rule that expected it there:

.product-comparison .columns .content { color: pink; }

Because of this, the legacy templates were created and are used by any existing cloud sites. The pages that use legacy templates can be tested using the default template using CMS. If there are no issues, the change can be published and the legacy templates can be removed.

The following pages make use of legacy templates: