6. Customization (Look & Feel)

    6.1 Implementing a Global Template (Recommended for novice webmasters)
    6.2 Customization Basics
    6.3 Template Basics
    6.4 How to edit templates
    6.5 What is the variable words in the templates/HTML files?
    6.6 How to use images in templates
    6.7 General Template Guidelines
    6.8 How to use template includes
          6.8.1 What is template includes?
          6.8.2 How to create a template include
          6.8.3 How to include template includes inside your templates
    6.9 Template Trouble Shooting

6.1   Implementing a Global Template (Recommended for novice webmasters)

Note that this method of customizing is for novices to HTML. If you are an experienced web designer then you may decide not to use this method to customize your templates. Even if you are an advanced webmaster you may also decide to use this method and after this customization has been implemented refine the templates by individually editing them.

With this method of customization you just create one HTML file and it's look and feel is implemented throughout all the templates that ActivDesk uses.

To implement a global template, (customize all pages displayed to customers control panels with your logo and menu bars) go to the Control Panel >> Template Manager >> Implement a Global Template

1. Create an HTML file that will serve as a frame

Create a normal HTML file. This file could contain your company logo, navigational buttons or links, etc. Let's say for example the HTML file you create looks like this:

2. Place the words !!ActivDesk_data!! inside the HTML page you created.

Now insert the word !!ActivDesk_data!! inside the HTML file where you would like ActivDesk to place it's control panel functions & options. The Control Panel functions are the functions that your end-users/customers will use to post new support messages with and to reply & view support messages, etc.

3. Correctly link up images

You must reference images with the full path to where the images are situated. In other words, upload the images to your web site. Then view the source of the HTML file you created above and supply the full URL paths to where you uploaded the images on your web site - for all images.

For example:

<img src="someimage.gif"> will not work.

You have to indicate the entire URL where someimage.gif is located. For example:

<img src="http://www.yourdomain.com/someimage.gif">

The <img is an HTML tag indicating that you want to insert an image in the HTML page. The src= part indicates that you want to specify the location of the image to be inserted. Some web editors will support inserting images from a web url and some won't. If your web editor does not support this, insert the image into the HTML page like usual and, when finished, edit the the HTML source code and manually insert the URL path's to the images. Ensure that the images are on the server for the URL path's you specify.

Example: Editing the HTML source code:

Replace <img src="someimage.gif"> with
<img src="http://www.yourdomain.com/someimage.gif">

4. Upload the file you created.

After you have uploaded the file, all templates used by ActivDesk will be updated with the HTML file you uploaded. In other words, the file you uploaded will be used as the frame for all pages that your end-users (users requesting support and visitors browsing your knowledge bases) will view.

Warning: Uploading your HTML file will replace any previous templates. In other words, if you have made changes to the existing templates then it will be lost.

6.2 Customization Basics

Everything displayed to end-users of your directory and search engine is template driven. The templates can also be thought of as skins. The templates are ordinary HTML files. To edit these templates or skins you may go to the ‘Template Manager’ in the Control Panel.

6.3 Template Basics

The templates that are used by ActivDesk are just ordinary HTML files. The only exception is that the templates or HTML files contain variable words that ActivDesk uses for pointers where it needs to place data. You can basically open the HTML files with your favorite web editor or with what ever you prefer and edit away. The thing that confuses most new users of ActivDesk is that some templates use other templates in combination with each other. This is actually very easy to understand. Some templates combine into each other to form an entire page. (one page)

6.4 How to edit templates

You can edit the templates from the Template Manager. To go to the Template Manager, go to the control panel. Then click the 'Template Manager' tab. Click on any of the template links in the Template Manager to edit templates.

Templates can be edited by copying and pasting the HTML code directly into your web editor when editing templates from the Template Manager. Once you have changed the template contents, you may copy and paste it back into the edit box and save it.

You may also open the template files directly with your web editor to edit them. The templates are stored inside your ‘data’ directory. You can get the file names from the ‘Template Manager’ inside the Control Panel – Click on each template name to get the file name of the template you would like to edit.

6.5 What are the variable words in the templates/HTML files?

The variable words are enclosed by !! or %% characters. Examples of such variable words are:
%%date%% or %%pages%% etc...

Variable words are replaced by chunks of data supplied by ActivDesk when users browse your the ActivDesk Support Panel or Knowledge Base. The location of the variables in the templates acts like pointers where ActivDesk substitutes the variable words with data. 

For example: %%date%% is replaced by the current date.

Note: It is very important that most of these variable words are present in your templates. Without them ActivDesk may not function correctly. Only remove variable words if you know what the variable words does.

6.6 How to use images in templates

To make use of images in the templates, you must use a URL link to indicate their locations. For example:
<img src="someimage.gif"> will not work. You have to indicate the entire URL where someimage.gif is located. For example:
<img src="http://www.yourdomain.com/someimage.gif">

6.7 General Template Guidelines

A lot of the templates work in combination with each other and others work independently where they are not combined with other templates.

The moment you open (with your web editor) a template you should know or have a good idea where it is to be used. Probably the easiest and best way to know exactly how the templates work is to experiment and play around with them. If something goes wrong you can just go back and restore the default templates that were present when you first installed ActivDesk. You can go back to the original templates by clicking the ‘Restore Default’ button when editing templates from the ‘Template Manager’.

Also look carefully at the templates that were present when ActivDesk was first installed to get a good idea of how they work and what each variable word does. You can find these in the .zip installation file.

6.8 How to use template includes

6.8.1 What is template includes?

Template includes works with ActivDesk like SSI (server side includes) would work with a web-server/web-site. Template includes is pieces of HTML code that you can include in any of the templates used by ActivDesk. The pieces of HTML code could be menu bars, footers, headers, search boxes, etc.

You could for example create a template include that will be a menu bar that you would like placed on the left side of all the pages of the Knowledge Base. Without template includes you would have to open each template and insert the menu bar. With template includes you just insert a variable word inside any template and the HTML code that is contained within the template include is replaced by the variable. In the event where something of your menu bar changes, you just edit the template include and the rest of the templates containing the menu bar via the template include changes.

6.8.2 How to create a template include

Go to the Control Panel and click on the Template Manager tab. Now click on the ‘Create/Edit Template Includes’ link. A popup window will appear.

Go to the ‘Add New Template Include’ form in the popup window and enter a name and some text or HTML code to the text box. Then click the ‘Add new Template Include’ button.

6.8.3 How to include template includes inside your templates

Template includes will be listed in the Template Include Popup Window when template includes has been added. With all the template include listings there will be a field or section that displays a ActivDesk variable. The variable is a word enclosed by %% characters. Use this variable inside any of your templates to include the contents of the Template Include in the templates of your choice. To use template includes inside your templates, go to the template manager and edit your templates by adding the include variable at the location where you would like the contents of the include to be displayed.

6.9  Trouble Shooting

Everything worked but when I customized my templates a lot of things stopped working.

In the event where things are not working as they should after editing a template, you can restore the default template or templates that came with ActivDesk to try editing it again. To restore the default templates of ActivDesk go to the Template Manager in the Control Panel. Click on the template name that you edited in the template manager. A popup window will appear with the template's HTML code. There will be a button called 'Restore Default'. Press this button and the original working template will be restored. Try editing this template again.

Also ensure that you have the correct variable words inside your templates. These are the words enclosed by %% and !! - If the necessary variable words are not present then some things might not function correctly.

Also open the templates (the .html files situated in the 'data' directory) that came with the .zip archive you downloaded, for an example of what should be present. Note that all fill in box names used in the templates must stay the same. A fill in box is used in conjunction with a form where end-users fill in data.

HTML errors can also cause template problems. Your web editor (if you are using a decent one like Dream Weaver or Front Page) will usually fix any HTML errors automatically when editing the templates.

Images does not want to display with the templates that I edited

See: 6.6 above.

I don't know how to edit the templates

Remember that the templates are ordinary HTML files. These files can be edited by using your web editor. See 6.4