How to Design a Cliiz Template

Here we explain how to create Cliiz Template using your HTML and CSS skills.

There is a good How To Convert HTML Template to Cliiz Template in Less Than 10 Minutes at scribd website. To read it click here or follow below instruction.

1) Create your normal HTML template

First create your folder structure as below:

default.html is the mandatory template which will be used for all pages by default. There is a list of optional pages you can have to make your layout different for pages such as about, contact or home.

note:

As Cliiz system is case sensitive you should name all these files and folder in lowercase.
Current version of Cliiz is not supporting JavaScript nor Flash. So please avoid adding JS effects in your templates or including Flash header.
Always use relative path in your html or css files:
In this case for including CSS files we have the below relative address:
```
<link href='stylesheets/main.css' media="screen" rel="stylesheet" type="text/css" />
```
Or in CSS files we have this relative address for including image files:
```
background: url(../images/cliiz-logo.png);
```
Or you can download our sample package from here and work on it.

2) Menues

Normally menu is a set of repetitive tags. But in many cases the first or last item is visually different from others.

Below you can see a sample menu with repetitive items. All items including first and last menu item have the same style

    <div class='menu'>
      <a href=''>Home</a>
      <a href=''>About</a>
      <a href=''>Contact</a>
    </div>

Below you can see another menu which has different style for first element. As you see there is a border on left hand of each menu item except the first item.

    <div class='menu'>
      <a href=''>Home</a>
      <a href='' class='with-left-border'>Services</a>
      <a href='' class='with-left-border'>About</a>
      <a href='' class='with-left-border'>Contact</a>
    </div>

And it can even grow by repeating the same tag:

As the first and last menu item might have different styling (in this case first item has no left border) we have separated them from the rest. Knowing this, Cliiz engine can read following menu template and generate above menu:

    <div class='menu' data-cliiz='menu'>
      <a href='#cliiz' data-menu='first'>#cliiz</a>
      <a href='#cliiz' data-menu='loop' class='with-left-border'>#cliiz</a>
      <a href='#cliiz' data-menu='last' class='with-left-border'>#cliiz</a>
    </div>

As you see we have just added some special tags which are interpreted by Cliiz engine:

data-cliiz=’menu’ indicates it is block of menu items. Therefore Cliiz engine looks for three type of items: first, loop and last items and uses them as the structure to clone and make real menu items.
data-menu=’first’ and data-menu=’last’ are used to create the first and last menu item. data-menu=’loop’ is used as the template to create all middle menu items.
#cliiz and href=’#cliiz’ will be replaced automatically with correct menu name and menu url at the run-time.

Selected Class

Cliiz system adds the 'selected' class to the current selected menu item. To make current selected item different from other elements define '.selected' in your CSS.

In this case we have defined '.selected' as below:

    .menu .selected{
        background: #3A5663;
        color: #B8D3E1;
    }

3) Partitions

Partitions are used to load content at runtime. Usually a partition is a DIV tag. To make a tag act as a partition, you have to add partition atrribute to it.

    <div data-partition='1'></div>

Having following HTML structure:

    <div>
      <div class='main'></div>
      <div class='leftPanel'></div>
    </div>

By adding data-partition='priorityIndex' you can tell Cliiz engine to load content in them at run-time:

    <div>
      <div class='main' data-partition='1'></div>
      <div class='leftPanel' data-partition='2'></div>
    </div>

data-partition=’1’ is mandatory as your template should have at least one area to load content.
data-partition=’2’, data-partition=’3’ and data-partition=’...’. If you have more than one place to load content you can add as many data-partition you want but remember to increase the priority index each time.
It doesn’t matter if you have different template for home.html and about.html. You should start the main area for each of them by data-partition=’1’ and increase it as your partitions are increasing in each of them. For example you may end up having data-partition=’1’, data-partition=’2’ and data-partition=’3’ for home.html; and data-partition=’1’ and data-partition=’2’ for about.html.

4) Special tags

Mandatory tags

You know the important of the tags such as title and meta tags such as description and keywords. Add them to your HEAD tag with the following format and Cliiz engine will put right value instead of #title, #description and #keywords at run-time.

    <title>#title</title>
    <meta name="description" content="#description" />
    <meta name="keywords" content="#keywords" />

Company name and logo

It is good to let users to show their company name in their template. In order to have this feature you should create a DIV or SPAN tag with data-cliiz="info" data-info="name" attributes as below.

    <div class='company-name' data-cliiz="info" data-info="name"></div>

You can also let the user to assign their logo with the same technique but this time use data-info="logo".

    <div class='company-logo' data-cliiz="info" data-info="logo"></div>

note: We strongly recommend using both of them as most of the users love to have their name and logo to be displayed on their website.

Social tags

Connecting a website to social medias are important. And the implementation can vary based on the targeted website. The complexity of the implementation is handled by Cliiz engine at the run-time. The only thing you have to do is to create the right tag as described below:

Connect to Twitter

You can connect let users connect their site to twitter by adding the data-cliiz=’twitter’ data-twitter=’follow’ to you’re A tag. This A tag can contains any text or image you like and you can use display: block; or inline-block to position it nicely. Cliiz engine will add right functionality to this A tag to connect the site to twitter account at run-time.
```
    <a data-cliiz="twitter" data-twitter="follow">follow us @ twitter</a>
    <a data-cliiz="twitter" data-twitter="follow"><img src="images/twitter-icon.jpg"></a>
```
Add Facebook like button

To add like button to your template you should create a DIV tag with following attributes:
```
    <div data-cliiz="facebook" data-facebook="like"
         data-width="450" data-show-faces="false"></div>
```
As Facebook is loading content in this area you should set data-width and data-show-faces carefully.
- We recommend choosing data-width equal to 450 or more.
- Also set data-show-faces=’true’ only if you have enough space vertically in your layout.

Start now

If you are ready to start your first template, download our sample package and modify it.

We are here to help

Do not feel alone. If you have any question contact us at developers@cliiz.com or our facebook page at http://www.facebook.com/cliiz