Create your own template
This section has not yet been updated for version 2.0. We're working on it!
In this section you will read about how you can create or customize a template and styling it with stylesheets.
Separating structure and presentation
CMSMS uses smarty templates extensively for controlling the content of each individual component of a page. The primary template is the "Page Template" which defines the structure of your page. The page template can include other templates, and/or call modules (which in turn include templates), etc.
The markup language for templates is good old HTML. The stylesheets are using CSS for styling and formatting the HTML elements, instead of doing this directly in the HTML code. This way the structure and the presentation of your pages are separated, the HTML is kept clean and you get many benefits such as Search Engine Optimization (SEO) and accessibility benefits.
Page templates are attached to a design. As well, so are stylesheets. The combination of stylesheets and the templates that are attached to a design, control the appearance of your page.
The cool thing is that you can actually use one and the same page template and get pages that look completely different, only by changing the CSS. That is how the default templates that come with the default installation of CMS Made Simple work.
Create or customize a template
You saw how the editor picked the template to define how each page will look. How the available templates will look is the work of the designer.
As already mentioned the page template provides only the structure of the page, that is what will be included in a page. Through the stylesheets you can then design that structure, to get the look and feel that you want.
How do you create a template in CMS Made Simple? It's quite simple. You use plain HTML and put placeholders for the content, the menu etc. When a user is visiting your site the page is automatically generated from the template and the placeholders are filled with the content. On this page you will learn how the default templates are built.
This means that you can take a layout from any page that you like and easily make a template for your CMSMS pages.
Common tags used in CMS Made Simple templates
These are the most common tags to use as placeholders in a template:
{sitename} will add the sitename you can set in the Global Settings
{title} will be replaced by the title of the content (You can set title when creating content pages).
{cms_stylesheet} links all the stylesheets that you have attached to your template. This must be between the <head> tags. If you forget this, your page will appear without styles.
{metadata} will add the meta data you can set in the Global Settings
{content} will be replaced by the real content of the selected page, the content that you edit for each page in Content -> Pages (use {content block='another_content_area' label='Your block name'} to add another editable area to the template). Some other info how to add multiple content blocks and modify your template to show block only if it has text.
{content_image} will be replaced with the Image selected in the Edit Page window, at the bottom of the screen with the block name you specify (i.e. MyImage). Use {content_image block='MyImage' dir='images'} for immediate results.
{page_image} will be replaced with the image filename selected on the Edit Page screen under Image.
Use <img src="uploads/images/{page_image}" /> for immediate results.
{cms_breadcrumbs} will be replaced by a path to the selected content.
{menu} is one of the most common menus. The entire menu will be automatically generated from your pages, where you put this placeholder. This tag can also take parameters, depending on how you want to display the menu. For example {menu collapse='1'} to collapse the sub items in the menu, so that only the sub items of the current menu item are shown.
How do you know what placeholders you can use in a template?
- You find a long list of tags in the Extensions -> Tags menu in the Admin Console. Examples of these are {title}, {cms_stylesheet} and {cms_breadcrumbs}. Click on their Help links to see how they are used.
- You can make your own User-defined Tags. Go to "Extensions/User Defined Tags" and click on "Add User Defined Tag". Fill in the Name and the Code and click Submit. Then insert their names like this {userdefinedtag} in the "Content".
- Modules are inserted using either {cms_module module='modulename'} or a custom tag provided by the module. See how they are used in their help files (Extensions -> Modules).
- For many tags and modules you can use parameters, such as {tagname parameter='value'}.
How do you get the contents of tags into variables?
{News category=$mytitle} <!-- Just a simple example -->
Attaching stylesheets
To style the elements of your template(s) and to position the div elements, you attach the templates, and one or more stylesheets to your design. In the "Designs" tab of the Design manager you can click on the appropriate design, and select which templates and stylesheets are associated with that design. Additionally, you can control the order in which stylesheets will be rendered when a page using that design is requested.
Customizing the default templates
All the default templates that come with CMS Made Simple are more or less made of the same HTML code. The only thing differing is what kind of menu that is used and if there are one or more content blocks. The rest is styled purely through CSS.
This is because the CMS Made Simple default templates do not use tables. Instead <div> tags are used to define each block of content in the page. The position and style for each of these div blocks can then be customized through CSS.
The style and appearance is then modified in the stylesheets that are attached to each template.
Declaring DOCTYPE and specifying language
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
This is the DOCTYPE (document type declaration). It tells browsers what version of (X)HTML that your document is using, so that it can interpret it correctly. It is also necessary for validation tools to check the syntax of your code.
The first two lines can be left unchanged. What you may need to change is the language declaration in the <HTML> tag. That's where the language of the content of your page is specified. Change "en" to the two-letter code for your language of preference.
Read more about DOCTYPE at W3C
Codes for the Representation of Names of Languages
Head tags
<title>{title} - {sitename}</title>
{cms_stylesheet}
{metadata}
</head>
What is between the <title> tags is what appears for example in your browser's title bar. {sitename} is defined in "Site Admin/Global Settings". If you also want the name of each page to be displayed, you can add the tag {title}. The {title} tag is a placeholder that is replaced by the name of the current page that you have entered as title for the page in "Content/Pages" when you Add/Edit a page.
{cms_stylesheet} is a tag that links to all stylesheets that you have attached to a design. It means that you only have to add this tag once in your primary page template, and the appropriate HTML code will be generated to include the stylesheets that are attached to the design.
{metadata} will hold all metadata you set in "Site Admin/Global Settings" for global metadata, as well as additional metadata you can set per page in the Options tab in "Content/Pages" when you Add/Edit a page.
The page wrapper
<div id="pagewrapper">
This is the beginning of the div block that the entire page is wrapped in. In the stylesheet you can set the width of the page, if it is to be centered and so on.
How to customize it:
Look for div#pagewrapper in one of the stylesheets with a name beginning by Layout.
The header
<h1>{cms_selflink dir='start' text=$sitename}</h1>
<hr class="accessibility" />
</div>
The header of the page is where you find the CMS Made Simple logo. As you can see there is no information in the template, but all the content of the header is set by CSS. This makes for very clean HTML code. However, if you like you can also add text or other information that you want to appear in the header, directly in the template.
How to customize it:
Look for div#header and div#header h1 a (for the link) in one of the stylesheets with a name beginning by Layout. That's where you set the background color, logo, height etc.
Breadcrumbs
In CMS Made Simple there is a tag that automatically adds the breadcrumbs for each page: {cms_breadcrumbs}.
The breadcrumbs are links to show the visitor what page that he/she currently is on and what the hierarchy of that page is. It can look something like this:
You are here: Home » Section page » Sub-section page
Example
<div class="breadcrumbs">
{cms_breadcrumbs}
<hr class="accessibility" />
</div>
<!-- End Breadcrumbs -->
Hiding empty content blocks
If you would like to hide a content block - for example, if a content editor has not put any content in it - you can achieve this with some simple Smarty code. In our example, we want to hide a content block named SpecialOffer.
Note that for content blocks and parameter "block" you should use names without special characters or spaces. If you need a descriptive text for content block use "label" parameter.
{if isset($offer)}
<div id="SpecialOffer">
{$offer}
</div>
{/if}