Create Your Own Skin (ILIAS 3.8 - 4.4)

Step 1: Create skin directory

To create a new skin, first add a new subdirectory to directory Customizing/global/skin, e.g. Customizing/global/skin/myskin.

Step 2: Create template.xml File

One file that must exist in every skin is the file template.xml. E.g. Customizing/global/skin/myskin/template.xml:

<?xml version = "1.0" encoding = "UTF-8"?>
<template xmlns = "http://www.w3.org"
	version = "1" name = "MySkin">
	<style 	name = "MyStyle"
			id = "mystyle"
			image_directory = "images"/>
</template>

Every skin can contain multiple styles. This example defines one style called MyStyle. This skin/style combination will be listed as MySkin/MyStyle in the ILIAS Style and Layout administration. The ILIAS administration is the place where you can activate/deactivate styles, and where you can assign users from one skin to another.

Step 3: Add css File

The id attribute of the style tag defines the name of the corresponding style sheet (css) file. This css file must also be added to the skin directory (here: Customizing/global/skin/myskin/mystyle.css). You should start with a copy of the default css file located at templates/default/delos.css. The best way to see which styles are used on a given ILIAS screen is to open the HTML source of the screen.

If your css file contains references to (background) images, these images must be present at their defined locations. If you copied the default css file, the image paths will not be correct anymore. You can either copy them to your skin directory, change the css definitions or provide your own image files.

Step 4: Add Icons (Optional)

If you want to replace the default icons coming with ILIAS, you can add new representations of them to your skin. They must be stored in a subdirectory named like the image_directory attribute of the style tag in the template.xml file.

E.g. if you want to replace the default icon for categories templates/default/images/icon_cat.gif, and your template file defines image_directory = "images" as in the example above, the new version must be stored as Customizing/global/skin/myskin/images/icon_cat.gif.

Step 5: Change Layout (Optional)

ILIAS 4.3.0+

The layout is specified in HTML template files. Some standard default template files can be found in directory templates/default. Other template files are stored within subdirectories of the Modules or Services directories. Most ILIAS screens use more than one template file. Some template files are reused in many ILIAS screens (e.g. the template file that defines the layout of the main menu).
 
To replace a template file for your skin, you have to create a new one in your skin directory. Please note, that your skin should only contain template files that are modified. You do not need to copy all default template files to your new skin. Examples:

• To replace the template for the standard screen layout defined in templates/default/tpl.adm_content.html, create a new version at Customizing/global/skin/myskin/tpl.adm_content.html.

• Module/Service related template files must be stored in a similar subdirectory structure (omit the templates subdirectory). E.g. to replace the template file Services/MainMenu/templates/tpl.main_menu.html create a new version at Customizing/global/skin/myskin/Services/MainMenu/tpl.main_menu.html.

The following list contains some standard template files, that are often changed in skins.

• Main Menu: Services/MainMenu/templates/default/tpl.main_menu.html

• Startup Screens (Login, Registration, ...): Services/Init/templates/default/tpl.startup_screen.html

• Locator (Bread Crumbs): Services/Locator/templates/default/tpl.locator.html

• Standard Screen Layout (used on many screens): templates/default/tpl.adm_content.html

Older Versions

The basic customizing concepts exists since ILIAS 3.8.0 however in older versions the template files may be located in different directories, e.g.:

• Main Menu: templates/default/tpl.main_buttons.html

• Login Screen: templates/default/tpl.login.html

• Locator (Bread Crumbs): templates/default/tpl.locator.html

Please make sure, that your Apache system user has read permission to all adapted template files, icons, images and css files.

Additional Information

Style and template changes of different ILIAS releases are published in the chapter Additional Release Information of the Roadmap and Release module.