You are here: : Create Website ► Practice ► Create an own template

How to create an own template?

Last updated on August 5, 2009 at 07:58 am

In this article you learn how to create a simple template for CMS Made Simple. To be more precise, in CMS Made Simple you create a theme that consists of templates and stylesheets. Themes can include one or more templates and stylesheets. Additional templates for different modules can be part of the theme as well.

To create a theme in CMS Made Simple, you should understand HTML and CSS. There is no way to do it without basic knowledge in these both terms. This is an absolute requirement, so that I will not explain any HTML or CSS basics in this article. Further you will work with Smarty. No panic – usage of Smarty will be explained here.

This article is not about design and layout, but about building templates. If you would like to learn how you can create good looking website design you need to look for Photoshop tutorials.

For the further steps we have to differ between 3 simple definitions:

Templates include HTML source of the website and Smarty tags (place holders for the dynamic parts of the website, such as title, content or navigation)
Stylesheets include pure CSS, no special knowledge is needed
Theme combines Templates and Stylesheets to the whole design

Create template

Start with simple HTML document that includes page title, heading and content. You can create it in any HTML editor of your choice. I use this simple template:

<html>
<head>
<title>My first template</title>
</head>
<body>
<h1>Title of the page</h1>
<p>Lorem ipsum ubique nostro singulis in vix, vis eu doctus scripserit ullamcorper. His quidam detraxit referrentur ei, affert adolescens intellegam sea in. Eros phaedrum imperdiet vim ei, ex amet voluptatum efficiendi eos, nihil sanctus intellegebat at nec. Adipisci theophrastus ei duo, eos cu conceptam percipitur, an dicta eripuit similique his. Graeci convenire in sit, eum errem laoreet ancillae ut, qui at facilisi periculis. Nec scripta denique percipit in, at inani probatus est.</p>
 </body>
</html>

Save the code above as template in CMS Made Simple. In the admin panel go to Layout → Templates and click on “Add new Template” at the bottom of the list. Type in any name and replace the whole content of the field "Content" with the HTML code you have created. Press “Submit”. The template is added to the list of available templates.

Now create a content page (Content → Pages and click on Add New Content). Add title of the page, menu text and some content. Then switch to the tab Options and in the "Template" drop-down field select the template you have just created. Scroll down and click on “Submit”. The new page is created and can be found in the list of pages. Open the page for edit again and press on the magnifying glass beside the button “Apply” at the top. The page is opened in a new window. In source view you see exactly the HTML code you have added to the template.

Add Smarty tags (place holders)

Your template is static, there is no dynamic content in it. The page title, the heading and the content of the page have to be replaced with the information entered into the actual fields of the page. You need a kind of place holders that will be automatically replaced with the dynamic content when the page is displayed in browser.

Place holders or Smarty tags are indicated by curly brackets. They are already defined:

{title} outputs the title of the page
{menu_text} outputs the menu text
{content} outputs the actual content of the page

Knowing that, open your template in Layout → Templates for edit and replace the static parts with Smarty tags listed above:

<html>
<head>
<title>{menu_text}</title>
</head>
<body>
<h1>{title}</h1> 
<p>{content}</p>
</body>
</html>

Save the template and open the page based on this template in browser again (you can do it from the list of the pages in Content → Pages using magnifying glass at the end of the line). The dynamic parts introduced with Smarty tags are displayed exactly at the same place where they have been added in the HTML source of your template. On the picture below you can see what fields correspond to what smarty tags:

Template Anatomy

Green = page title
Rose = menu text
Blue = the content field

Add stylesheet

With the last step you add stylesheet to the template. Stylesheet is pure CSS as stated above therefeore you can create your stylesheet in any CSS editor. In the admin panel go to Layout → Stylesheets and click on “Add a stylesheet” at the bottom of the list. Type any name and add pure CSS to the field "Content". For example:

Stylesheet

Press “Submit” and stylesheet is added to the list.

Normally, you would use <link> tag in HTML document to add stylesheet definition. But you can not use the tag here since there is no file name for the stylesheet. To add stylesheet to the template you have to customize the template first. Go to Layout → Templates and open your template for edit. Add a Smarty tag {stylesheet} at the place where you normally would add a link tag.

...
<head>
<title>{menu_text}</title>
{stylesheet}
</head>
...

Press “Apply”. This Smarty tag would dynamically add <link> tags for all stylesheets that are attached to the template. To attach a stylesheet to the template, click on the blue CSS button beside the button “Apply”. Choose the stylesheet from the drop-down field and press “Add a stylesheet”. The stylesheet is added to the template.

Tip: you can add more than one stylesheet to the template and even change the order of them.

Your first theme is ready. You have learned how to join HTML, Smarty and CSS to create a new theme in CMS Made Simple. All that you have to learn now is what Smarty tags are available in the templates beside the three tags you used in this workshop. Good start is to create a new template and investigate the suggested by default HTML source code.

◄◄ How to check hosting for CMS Made Simple? || How to use ColorBox effect on my website? ►►