Having decided on your template, you will now have the components of the template in a subdirectory somewhere ready to copy to to your instance of a Cliqon production ready website. You will have installed the instance of Cliqon and can access the dummy home page and the login page to get to the Administration section.

Invoke the new template

Unless we change the defaults in the configuration files and Controllers, the website template that you want to work with should be copied to the /views subdirectory.  The production instance of Cliqon has the supporting files for the dummy index page, stored in the following sub directories: css, img, fonts and js of /views. We recommend that when you copy the files of the template to the same locations and sub directories that are already in use. We stress that there is no absolute requirement to follow this suggestion just convenience. Throughout the next few paragraphs of the documentation, we shall presume that is what you also would do.

For Cliqon.Com we generated a template with Pingendo. As a general rule, template websites are supplied with an index.html as the root or opening page. Whereas, the Cliqon system has an index.tpl as the opening page. Therefore the opening step is to rename the existing index.tpl to index.old and rename index.html to index.tpl.

Depending on your web server, before attempting to see your initial results, you may need to clear the Cliqon cache. If you access your web site again, you should see some form of result but as you will have appreciated the index.tpl now contains links to assets that are no longer in their configured location. We need to amend the template file to account for these changes. You may also wish to change the way the template works in accessing assets. We make the following changes:

Style sheets

We do not configure individual links to style sheets in our templates. As a general rule we have just one style.css that is called from the template in the following way.

<link href="@($viewpath)css/style.css" rel="stylesheet">

You will note how we include the $viewpath variable which has been generated by the Controller for inclusion in any template.

@import url("cliqon_theme.css");

@import url("font-awesome.min.css");

@import url("jspanel.css");

Then we "import" all of the CSS files (and fonts etc.) from style.css.

In line images and other assets


At this point, we have to remind you how Cliqon uses partial templates. When you cleared down the existing assets from the /views subdirectory, you would have left a /partials subdirectory untouched. In that sub-directory are a number of template files. In the production system, there are 6 files automatically provided:

    • cookieconsent.tpl
    • end.tpl
    • footer.tpl
    • header.tpl
    • nav.tpl
    • script.tpl

If you look at index.old in an editor, you will see how the top of the web page template contains references to header.tpl and cookieconsent.tpl. If you like the idea of using a single call to style.css, then all the work of a header has been done for you.

You can amend your new index.tpl by removing everything before the close head tag and replacing it with the call to the header template.

Javascript files

If you have followed the instructions in the previous paragraphs, then you will also have invoked the special way that Cliqon loads Javascript files. In common with all popular recommendations on this subject, all Javascript files are loaded and executed after the footer but before the close body tag. In header.tpl, we load one javascript file called basket.js. This is a simple script loader that caches scripts with localStorage. For a detailed explanation of what basket does, please see the appendix.

You will see from index.old that a call to include script.tpl, appears after footer.tpl but before end.tpl.

Please open script.tpl and study its contents. We enclose a summarised version of its contents:


var sitepath = "http://"+document.location.hostname+"/";

var jspath = sitepath+"includes/js/";

var viewpath = sitepath+"views/";

var jlcd = '@($idiom)', lstr = [], str = [];

// basket.clear(true);


.remove('cliq', 'listr', 'init')


   {url: viewpath+"js/library.js", key: "init", skipCache: true},

   {url: jspath+"phpjs.js", key: "php", skipCache:true},

   {url: jspath+"i18n/cliqon."+jlcd+".js", key: "listr", skipCache: true},  

   {url: viewpath+"js/cliq.js", key: "cliq", skipCache: true}

).then(function(msg) {

   // Javascript language file load

   lstr = str[jlcd];

   // Dropzone.autoDiscover = false;

   var sessid = Cookies.get('PHPSESSID');


}, function (error) {

   // There was an error fetching the script





You will observe the following key points about our instance of basket. We detail a number of files to be loaded. For several of the files we "bust the cache" and require that the files are recalled every time the script is loaded. When you move from Development to Production you will want to comment out the line that commences .remove.

We configure our instance of Basket to report an error in the log if any of the required files, fail to load. But failing to load does not stop execution (but you could configure it to do so ....). The "then" block replaces "document.ready" and anything that you might put in that block would be written there.

What you see above is the requirements that we created for the original production version of Cliqon. We will need to alter this list to reflect the needs of our template. We could amend the list of files above and include as individual files all of the 12 files that the index page loads. Or we could follow a long standing tradition in our company and put all of these libraries into our own main library, where some of the javascript libraries that the new template wants to use, already exist, specifically jquery and bootstrap.

We also noticed as we started the process of incorporating the list of additional javascript files into our library file, that some of these files had not been compressed. Thus we used the opportunity of the process of inclusion in our library as the time to go to jscompress.com and use it facilities to minify the file.

Links and Menus

Created with the Personal Edition of HelpNDoc: Create iPhone web-based documentation