# iNomads

Templates |

Templates are used to define how your NOMADS panels will be displayed under iNomads. They control the presentation of your application panels within the browser and provide an easy means to externally customize the appearance.

One way to better understand what templates do is to look at some examples. Below are screen shots of Template Maintenance, first as normally rendered in a graphical environment, then using a variety of different templates.

Pictured below is the original Windows image of a NOMADS panel:

The screen shots below illustrate the same panel rendered with different templates.

This is the default template:

The admin template is used by iNomads for internal administration screens:

The ide2020 template uses a similar header but a different panel header and colors:

## Style Sheet Definitions

Style sheets are used throughout iNomads to simplify the layout and presentation. A default style sheet (style.css) located in the templates/default directory contains the standard definitions for all the panels. These standard definitions can be selectively overridden by style.css files in each template directory. See Style Sheet Usage.

#### Note:
When overriding styles, care should be taken to avoid changes that alter the size of some elements, as this could cause unexpected results.

## Template Definitions

Templates define the presentation formatting to use when rendering a NOMADS panel. They include the HTML definitions that are used in the creation of the page layout, the style sheet to be applied to the layout, images to be used within the page layout, overrides for system standard images (!xxxx images) and other configuration information.

Templates are created using the Template Designer Wizard. After the template is created, use Template Maintenance to view and modify the template as needed.

Template Sub-Directory

Each template is defined by a sub-directory within the *plus/inomads/templates directory.

When rendering a page, the system will load and use either the template definitions from the sub-directory or, if not present, use the definition found in the templates/default sub-directory. Generally, each template sub-directory will only contain a few files -- just the files that it needs to override from the standard default template.

The template files contain a suffix of .tpl and contain HTML fragments. The contents of each file will be loaded and used by the system to generate the appropriate HTML document. A parameter passing mechanism is included, allowing for dynamic HTML generation.

Style Sheets

A template directory can also contain a style sheet to be applied after the system default style sheet. This style sheet (style.css) contains information that will be used by the browser to define the presentation of the panels. Generally, this includes font, color and background information. Other information can be included in the style sheet; however, care should be taken when overriding things such as the size and placement of controls, as they can adversely affect the final layout of the panel.

Images

Images used by the template can also be included in the directory along with a sub-directory called sysimages, which can contain any system images to be used. For example, if you wish to override the normal !folder image, simply add a file called folder.xxx to this sub-directory (where xxx would identify the file type such as .jpg, .gif, .png). The system will then use this image instead of its supplied default.

Example:

For this example, three system images in the Halloween template were replaced: