Create CMS Website

Create an own template

The Beginner's Tutorial
How To Create Own Website with CMS Made Simple

How to create an own template?

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 at least one template and one stylesheet. Additional templates for different modules can be part of the theme as well.

To create a theme in CMS Made Simple, you should have some knowledge of HTML and CSS. There is no way to do it without basic knowledge in the languages listed above. 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:

  • Template includes HTML source of the website and Smarty tags (place holders for the dynamic parts of the website, such as title, content or navigation)
  • Stylesheet includes pure CSS, no special knowledge is needed
  • Theme is a term that 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 console go to Layout → Templates and click on Add new Template at the bottom of the list. Type in any name for the template and replace the whole content of the field "Content" with the HTML code you have created. Click on “Submit”. The template is added to the list of available templates.

Add Smarty tags (place holders)

Your template is static, there is no dynamic content in it. The page title, the heading and the content in the template have to be replaced with the actual information of every 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:

  • {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:

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

Save the template.

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.

The dynamic parts indicated 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 therefore you can create your stylesheet in any CSS editor. In the admin console 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 styles to HTML. But you can not use this tag here since there is no file name for the stylesheet. To attach 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 {cms_stylesheet} at the place where you normally would add a HTML tag <link>.

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

Click on “Apply”. This Smarty tag will be replaced by the HTML tag <link> when the page is viewed in front end. 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 click on “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 combine HTML, Smarty and CSS to create a new theme in CMS Made Simple. Everything that you have to learn now is what other Smarty tags are available in the templates. Good start is to investigate the suggested HTML source code when you create a new template in CMS Made Simple.


Comments to "How to create an own template?"

  1. savapokhari December 28, 2009, 7:26 am

    i like it


del.icio.us digg stumbleupon buzzup BlinkList mixx myspace linkedin facebook reddit.com ma.gnolia.com newsvine.com furl.net google yahoo technorati.com

CMS Made Simple Beginner's Guide
Loading...