Basic example template
Below is a basic HTML template example. You can see the CMSMS tags between the structure of the regular HTML components.
This code can be pasted into the 'Default' template in the Design Manager.
The CSS code below can be pasted into a new stylesheet called 'CustomCSS' in Design Manager/Stylesheets.
Both the 'Default' template and the 'CustomCSS' stylesheet can then 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 *}
{/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>
<main class="container">
<div class="row">
<div class="col-12">
<!-- This is the page's main content -->
<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>
</main>
<footer class="container">
<div class="row">
<div class="col-12">
<!-- This is the footer that is used across all the pages of our website -->
<p>
© Copyright 2050 by CMSms. All rights reversed.
</p>
</div>
</div>
</footer>
</body>
</html>
Basic Custom Stylesheet
Copy and paste this CSS into a new stylesheet called 'CustomCSS' in Design Manager/Stylesheets.
This stylesheet will be used for all three examples.
body, html {
background-color:#DDDDDD;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
left: 0;
top: 0;
font-size: 100%;
font-family: 'Open Sans', sans-serif;
font-weight: 300;
color:#333333;
}
.container {
max-width: 940px;
background-color:#FFFFFF;
}
header {
padding:0 0 10px 0;
background-color:#FFFFFF;
}
nav {
padding:10px;
background:#CCCCCC;
}
nav ul {
white-space:nowrap;
height: 1em;
width: 100%;
}
nav li {
display:inline;
padding-right: 20px;
}
#breadcrumbs {
padding:10px;
background-color:#CCCCCC;
}
main.container {
padding-bottom: 10px;
}
aside {
padding:10px;
background:#CCCCCC;
}
footer {
text-align: center;
margin-top: 20px;
background-color:#CCCCCC;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Open Sans', sans-serif;
font-weight: 700;
color:#001A66;
}
/* TYPOGRAPHY */
h1 {font-size: 2.5rem; margin: unset;}
h2 {font-size: 2rem;}
h3 {font-size: 1.375rem;}
h4 {font-size: 1.125rem;}
h5 {font-size: 1rem;}
h6 {font-size: 0.875rem;}
/* POSITIONING */
.left {text-align: left;}
.right {text-align: right;}
.center {
text-align: center;
margin-left: auto;
margin-right: auto;
}
.justify {text-align: justify;}
/* ==== GRID SYSTEM ==== */
.container {
width: 90%;
margin-left: auto;
margin-right: auto;
}
.row {
position: relative;
width: 100%;
}
.row [class^="col"] {
float: left;
margin: 0.5rem 2%;
min-height: 0.125rem;
}
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
width: 96%;
}
.col-1-sm {width: 4.33%;}
.col-2-sm {width: 12.66%;}
.col-3-sm {width: 21%;}
.col-4-sm {width: 29.33%;}
.col-5-sm {width: 37.66%;}
.col-6-sm {width: 46%;}
.col-7-sm {width: 54.33%;}
.col-8-sm {width: 62.66%;}
.col-9-sm {width: 71%;}
.col-10-sm {width: 79.33%;}
.col-11-sm {width: 87.66%;}
.col-12-sm {width: 96%;}
.row::after {
content: "";
display: table;
clear: both;
}
.hidden-sm {
display: none;
}
@media only screen and (min-width: 33.75em) { /* 540px */
.container {
width: 80%;
}
}
@media only screen and (min-width: 45em) { /* 720px */
.col-1 {width: 4.33%;}
.col-2 {width: 12.66%;}
.col-3 {width: 21%;}
.col-4 {width: 29.33%;}
.col-5 {width: 37.66%;}
.col-6 {width: 46%;}
.col-7 {width: 54.33%;}
.col-8 {width: 62.66%;}
.col-9 {width: 71%;}
.col-10 {width: 79.33%;}
.col-11 {width: 87.66%;}
.col-12 {width: 96%;}
.hidden-sm {
display: block;
}
}
@media only screen and (min-width: 60em) { /* 960px */
.container {
width: 75%;
max-width: 60rem;
}
}