We need your assistance to make the documentation accurate, user friendly and understandable. Therefore we welcome any tips or suggestions regarding documentation. Thank you in advance for your contribution.
However, we will not respond to technical support questions submitted using this form. If you are having difficulty with CMSMS and cannot find the solution on this website, please submit your question appropriately on our support forum at: http://forum.cmsmadesimple.org. Please remember to follow the forum rules when posting.
CMS Made Simple™ Partner
Template Inheritance uses a 'parent' or 'base' template that contains the basic elements of your site and defines blocks that 'child' templates will override.
Below is a basic Parent/Base template created using a 'Core::Page' template type in Design Manager.
This is a simple layout with just one column. Template Inheritance allows child templates to build upon this.
This template should not be used as a page template. Only child templates should be used in the Content Manager.
The CSS code from the Basic Example Template can be used with this template. It should be pasted into a new stylesheet called 'CustomCSS' in Design Manager/Stylesheets.
The 'CustomCSS' stylesheet should be added to the default design in Design Manager/Designs.
{strip}
{process_pagedata}{* 'process_pagedata' is a required CMSMS tag. It adds page specific metadata *}{* These are Smarty comments *}
<!-- 'top' Content Block can be appended in child templates -->
{block name='top'}
{$content = "{content}" scope=global}
{/block}
{/strip}<!DOCTYPE HTML>
<html lang="{cms_get_language}"><!-- Check languages here: https://www.w3schools.com/tags/ref_language_codes.asp -->
<head>
<title>{title} | {sitename}</title> <!-- Title of the page is from 'Content/Content manager/Page_Name' | Site Name is from 'Site Admin/Settings - Global Settings' -->
{metadata} <!-- Adds Global Metadata to the page. Check admin page 'Site Admin/Settings - Global Settings' -->
<link rel="preconnect" href="https://fonts.googleapis.com"><!-- Adds Google Fonts to the page. -->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><!-- Adds Google Fonts to the page. -->
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;700&display=swap" rel="stylesheet"><!-- Adds Google Fonts to the page. -->
{cms_stylesheet} <!-- Adds attached stylesheets to the page. Check admin page 'Design Manager', and tab 'Stylesheets' -->
</head>
<body>
<header class="container">
<div class="row">
<div class="col-4">
<h1>{sitename}</h1>
<!-- Site Name is from 'Site Admin/Settings - Global Settings' -->
</div>
<div class="col-8">
<nav>
{Navigator}
<!-- Outputs all the menu links. Use 'Navigator::Navigation' template in Design Manager -->
<!-- A Search form is another way to navigate through your website. -->
{Search}
<!-- Use 'Search::Search Form' template in Design Manager. Check admin page 'Extensions/Search' -->
</nav>
</div>
</div>
<div class="row">
<div class="col-12">
<div id="breadcrumbs">
{nav_breadcrumbs}
<!-- Show breadcrumbs pagelinks. Use 'Navigator::Breadcrumbs' template in Design Manager -->
</div>
</div>
</div>
</header>
<!-- This is the page's main content area -->
<main class="container">
{block name='content'}
<div class="row">
<div class="col-12">
<article>
<h2>{title}</h2>
<!-- Title of the page is from 'Content/Content manager/Page_Name' Title field -->
{$content}
<!-- Page content is from 'Content/Content manager/Page_Name' Content field -->
</article>
</div>
</div>
{/block} </main>
<!-- If the footer is created here, in the parent template, it will remain unchanged in all child templates. -->
<footer class="container">
<div class="row">
<div class="col-12">
<p>
© Copyright 2050 by CMSms. All rights reversed.
</p>
</div>
</div>
</footer>
</body>
<!-- If child templates require jQuery scripts, this block is ready for them. -->
{block name='jquery'}{/block}
</html>
Child Template 1. Full Width Content Column
Blocks in child templates will either add-to or replace blocks of the same name in parent templates. The rest of the code from the parent template, that isn't in blocks, will be inherited as-is.
A child template is created using a 'Core::Page' template type in Design Manager.
This template will inherit all the code of the parent template except the 'title' block, which gets replaced.
<!-- This template will keep everything from the Parent template except the 'title' block. -->
{extends file='cms_template:Base Page Template'}
{block name='title'}My Page Title{/block}<!-- This Title text will replace the 'title' block in the Parent template. -->
Child Template 2. Two Columns - Content and Sidebar
In this child template a new content field is added (appended) to the 'top' block using a second content tag.
The original content tag and the second content tag get used in the 'content' block. The 'title' block gets replaced.
This child template will inherit the rest of the code from the parent template.
<!-- This template will keep everything from the Parent template except the 'title' block, and add a sidebar column. -->
{extends file='cms_template:Base Page Template'} {block name='title'}My Page Title{/block}
<!-- This Title text will replace the 'title' block in the parent template. -->
{block name='top' append}
<!-- The contents of this block will be added (appended) to the 'top' block in the parent template. -->
{$content2 = "{content block='content2'}" scope=global} {/block} {block name='content'}
<!-- The contents of this block will replace the 'content' block in the parent template. -->
<div class="row">
<!-- Main column content. -->
<div class="col-8">
<article>
<h2>{title}</h2>
<!-- Title of the page is from 'Content/Content manager/Page_Name' Title field -->
{$content}
<!-- Page content is from 'Content/Content manager/Page_Name' Content field -->
</article>
</div>
<!-- Sidebar column content. -->
<div class="col-4">
<aside>{$content2}</aside>
</div>
</div>
{/block}
Child Template 3. Two Columns - Content and Sidebar + Hero Banner Image + jQuery
In this child template the second content field is added (appended) to the 'top' block plus a content_image field to be used as a hero banner.
The original content tag, the second content tag and the content_image get used in the 'content' block. The 'title' block gets replaced.
This child template introduces new content for the 'jquery' block, which is empty in the parent template.
<!-- Same as Child Template 2, with a Hero Banner image and adding jQuery. -->
{extends file='cms_template:Base Page Template'} {block name='title'}My Page Title{/block}
<!-- This Title text will replace the 'title' block in the parent template. -->
{block name='top' append}
<!-- The contents of this block will be added (appended) to the 'top' block in the parent template. -->
{$HeroBanner = "{content_image block='HeroBanner'}" scope=global} {$content2 = "{content block='content2'}" scope=global} {/block} {block name='content'}
<!-- The contents of this block will replace the 'content' block in the parent template. -->
<div class="row">
<div class="col-12 center">
{$HeroBanner}
</div>
<!-- Hero Banner Image content. -->
</div>
<div class="row">
<!-- Main column content. -->
<div class="col-8">
<article>
<h2>{title}</h2>
<!-- Title of the page is from 'Content/Content manager/Page_Name' Title field -->
{$content}
<!-- Page content is from 'Content/Content manager/Page_Name' Content field -->
</article>
</div>
<!-- Sidebar column content. -->
<div class="col-4">
<aside>{$content2}</aside>
</div>
</div>
{/block} {block name='jquery'}
<!-- This block will replace the empty 'jquery' block in the parent template. -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
{/block}
