Create a Template

How to build your own template

Template Name

Your template will be recognized automatically by system. But it has to know, this file is a template. Your template need a name.

Template Filename should be: template_YourTemplateName.html - no spaces, no special characters, just a-z and 0-9
Images folder, has to be named "images", CSS files should be inside "images" folder.
Only when these simple conditions are fine, template will be automatically recognized.

Template Tags

There is couple of Tags, which have to be placed on your template. The most important part of template is Content Area. In most cases, we will define also Dynamic Menu tags. If there are any modules to be displayed, like News, Vote Poll, we will define them too.

Content Tag

This is really simple, just place {%content%} tag on your template. When website is displayed, it will be replaced with real content.

Example:

<div>Header</div>
<div>{%content%}</div>

Will produce:

<div>Header</div>
<div>Welcome To my Website</div>

If there are more Content fields available, you can define them on your template as easy as main content, but with content number, example {%content_2%}, {%content_3%}, etc.

How To Display Dynamic Menu

Dynamic Menu is the most complicated part of your template, but don't worry - this doesn't mean, it's difficult. You can have one menu or more than one menu define don your template. If your menu ID is 1, menu definition will be:

Example:

<ul>
   {%menu_start=1%}<li>
   <a href="{%menu_href%}">{%menu_display%}</a>
   </li>{%menu_end=1%}
</ul>

Will produce:

This few "Menu Tags" allow you to create unlimited styles of menu. You can create simple lists - as on example above, but you can create also TABLE menu, where each menu item is Table Row or Table Cell - if you want your menu to be Horizontal or Vertical.

Example, Table Menu:

<table><tr>
   {%menu_start=1%}<td>
   <a href="{%menu_href%}">{%menu_display%}</a>
   </td>{%menu_end=1%}
</tr></table>

Will produce:

Each menu item is table column...

Example, Table Menu:

<table>
   {%menu_start=1%}<tr><td>
   <a href="{%menu_href%}">{%menu_display%}</a>
   </td></tr>{%menu_end=1%}
</table>

Will produce:

Each menu item is table row...

It was too easy! :)

How To Add Extra Options to Menu

There is a couple of "extra menu tags" - if you need more functionality from your menu: {%count%}, {%menu_ActiveClassName%}, {%menu_ActiveClass%}, {%menu_ActiveClassSpaceName%}

First, {%count%} is simply counting items, and displaying a number, example first subpage, will display "1" , second will display "2", etc.

Why should you use it? You don't have to, but sometimes there is such a need. Example, if you need each menu item to be displayed with different style:

Example:

This would display different background color for item #1 and for item #2

Setting "active" menu item

Sometimes, you may need to have different style for "active" menu items, example if visitor is on Homepage, Homepage menu item will show him, he is on this page now. You can use 3 additional tags, which were listed above: {%menu_ActiveClassName%}, {%menu_ActiveClass%}, {%menu_ActiveClassSpaceName%}

Dynamic menu will create "item_active" class for active item. You can use it in few ways:

	Tag	Result	example usage
1.	{%menu_ActiveClass%}	class="item_active"	<a href="{%menu_href%}"{%menu_ActiveClass%}> {%menu_display%} </a>
2.	{%menu_ActiveClassName%}	item_active	<a href="{%menu_href%}" class="{%menu_ActiveClassName%}"> {%menu_display%} </a>
3.	{%menu_ActiveClassSpaceName%}	item_active (with space)	<a href="{%menu_href%}" class="someClass{%menu_ActiveClassSpaceName%}" > {%menu_display%} </a>

The most popular use is option 1 and option 3, you can use option 3 if you already have some class name attached to menu item, but we recommend not setting any class for menu item, and use Option 1, then just set some class with attributes in your CSS file

Example:

This would underline active menu item.

Website Tags

There are 3 main Website Tags, which displaying Website Name, Website Slogan and Website Footer. These 3 parameters can be modified at anytome from Admin Area, but they have to be set on the template first.

	Tag	Display Result
1.	{%WebsiteName%}	Website Name, example Your Company name. You can manage it from Admin Area > Config
2.	{%WebsiteSlogan%}	Website Slogan. Can be managed from Config too
3.	{%WebsiteFooter%}	Website Footer.

Meta Tags

This is very important part of creating a template, and you shouldn't ignore it. In Admin Area there is Full Meta Tag management, but to set any meta tags from Admin Area, template has to be designed correctly first.

Example:

<html>
<head>
<meta http-equiv="content-type" content="{%MetaCharset%}" />
<meta name="description" content="{%MetaDescription%}" />
<meta name="keywords" content="{%MetaKeywords%}" />
<title>{%MetaTitle%}</title>
</head>
<body>
Some Body Content
</body>
</html>

For better SEO results, Meta Tags configured from Admin Area > Config, can contain additional tags, like {%name%} which will display current subpage name - in the result, each subpage will be partially different.

Additional Tags

Sometimes, you may want to display News or Vote Poll on your template. Just place {%news%} or {%vote%} tag on it.

Use Example Templates

If you plan to build your own template, we strongly recommend to use our current templates as an example. You can see how our dynamic menus are built, etc.

Template Is Ready, What Now

You need to upload the template to your main folder. You will need FTP connection and some FTP software. We recommend Total Commander, it's a shareware software, but there is also many free solutions available.

Create FTP connection (use your FTP hostname - very often it's your domain too, FTP username and FTP password)
Login. Go to your main folder. usually it's called "public_html", "httpdocs", "www", if you see index.php file, you're there.
Copy your template with images.
If your server is Linux, you need to set some permissions to this template - to be writable. Open Permissions dialog, and set "666".
Go to your website Admin Area > Configuration, there is "Default Template" menu, select your template and save changes.

Required Software

To build a HTML template, you will need some HTML Editor. There is a lot of HTML editors available in Internet. You can use Free or Commercial software.

Free Editors:

NVU/Kompozer

Commercial Editors

Adobe Dreamweaver
Microsoft Frontpage - it's usually part of Microsoft Office.

Your question is not listed here?

Please contact us.