Table of Contents

Templates

Contents


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 in I am a designer the template gives 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.
Ok, so 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).
  • {stylesheet} - This must be between the <head> tags. It links all the stylesheets that you have attached to your template. If you forget this your page will appear without styles. If you rather want to use external stylesheets you can add a normal <link/> tag in the header.
  • {metadata} - will add the meta data you can set in the Global Settings
  • {content} - This 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'} 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} - This 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).
  • {$content_obj->GetPropertyValue('image')} - This will be replaced with the image filename selected on the Edit Page screen under Image. (use <img src="uploads/images/{$content_obj->GetPropertyValue('image')}" /> for immediate results.).
  • {breadcrumbs} - Will be replaced by a path to the selected content.
  • {menu} - This 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}, {stylesheet} and {breadcrumbs}. Click on their Help links to see how they are used.
  • Adduserdefinedtag.png
    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 {cms_module module='modulename'}. 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?

<elijahlofgren> Is there an easy way to access the title of the page using a smarty variable? I want to call: {Products category={title}} but is there a way to store the contents of {title} into a $page_title variable so that I can do {Products category=$page_title} ?
<calguy1000> elijahlofgren: {capture assign='mytitle'}{title}{/capture}
<bigcalm> elijahlofgren: look at {capture}{title}{/capture}

Attaching stylesheets

Layouttemplate.png
To style the elements of your template and to position the div elements, you attach one or more stylesheets to your template. In the list of templates "Layout/Templates", click on the CSS icon to the right of a template. Select the stylesheets to attach to the template from the available stylesheets in the dropdown list and click "Add Stylesheet".


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.
On this page we will walk through the template, piece by piece, to explain what it is and what you may want to change.
The style and appearance is then modified in the stylesheets that are attached to each template.

Declaring DOCTYPE and specifying language =

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"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 

<head>

<title>{sitename} - {title}</title>
{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.
{stylesheet} is a tag that links to all stylesheets that you have attached to a template. It means that you only have to add this tag once and all attached stylesheets will be linked to.
{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 

<body>
<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 

<div id="header">
  <h1>{cms_selflink dir="start" text="$sitename"}</h1>
  <hr class="accessibility" />
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 

<!-- Start Breadcrumbs -->
<div class="breadcrumbs">
  {breadcrumbs starttext='You are here' root='Home' delimiter='»'}
<hr class="accessibility" />
</div>
<!-- End 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: 
Home >> Section page >> Sub-section page
In CMS Made Simple there is a tag that automatically adds the breadcrumbs for each page: {breadcrumbs}. delimiter="&raquo;" means that » is used as the delimiter between each level.
initial='1' means that the breadcrumbs starts with a delimiter. If left out or set to '0', no delimiter will be displayed before the first level.
How to customize it:
  • Look for div.breadcrumbs in one of the stylesheets with a name beginning by Layout. There you can customize the font, background etc.
  • To read about how to use the {breadcrumbs} tag, click the Help link for Breadcrumbs in "Extensions/Tags" in the Admin Console.
The rest of the default template is currently being updated to the latest version.

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 SpecialOffer1. 

{content block="SpecialOffer1" assign="offer1"}
{if !empty($offer1)}
    <div id="SpecialOffer1">
        {content block="SpecialOffer1"}
    </div>
{/if}


This page in: English - Deutsch - Español - Français - Italiano - Lietuvių - Nederlands - Norsk - Polski - Česky - Русский - Svenska - Tiếng Việt - عربي - 日本語 简体中文

Retrieved from "http://wiki.cmsmadesimple.org/index.php/User_Handbook/Getting_Started/Designer/Templates"

User Handbook/Getting Started/Designer/Templates

From CMSMS

A2 Hosting