I you like to adjust your ILIAS system to use your own logo or you own corporate design, it is crucial that you do not change the original ILIAS files in order to prevent these file from overwrite during the next system update or maintenance release.
ILIAS offers you a mechanism to define your own skins and styles for an installation. This article gives you a short introduction to complete this task.
Before I go into details, please note that this howto only works with ILIAS versions greater or equal than ILIAS 3.8.0.

Creating your own skin

In order to create your own skin in ILIAS you first have to create a folder for the skin in the filesystem. For this task I assume that you will name our own skin with "company". Therefore you have to create the skin folder under your ILIAS system folder. Please add the following directories (some may already exist):

Customizing/global/skin/company

Now you have to create an XML file template.xml in this directory which contains all the necessary information ILIAS needs to know that this directory contains an ILIAS skin. The file contains the name of the skin and at least one location of a style. You can of course support multiple styles for your skin but in this howto we only create one style. The content of template.xml is:

The text file is available for download.

To create a fully functional skin you now have to create the style file you just defined in the template.xml file. I assume that you do not want to reinvent the wheel so I am showing you now how to add a little variation of the usual ILIAS style (called delos). What I do is to copy the original ILIAS delos style file to the location where the skin expects our new style file. The original delos style is located in

templates/default/delos.css

while your new style has to be named after the id attribute in your template file followed by the extension .css. So the copy of delos.css has to be created into

Customizing/global/skin/company/company.css

The original delos.css file uses some images which are part of the CSS styles. All these images are located in the images directory of the default template directory, so please copy the complete directory

templates/default/images 

into your skin directory. All the images are addressed relative so the styles are working in the new location without any changes.

Activating the skin

That's it (ok, you only have a skin which looks similar to the default ILIAS skin but I will go further in the next part ot the howto). You can test your new skin by activating the skin in ILIAS. Please change into ILIAS, open your personal desktop, select the "Personal Profile" tab and change the Skin/Style selection in the Settings section to "company / company". If you do not see the company skin than something went wrong with the template.xml file or the file may not be readable due to wrong permission settings. After saving the new setting you will recognize that NOTHING changed (hopefully!). The only way to see at this point that ILIAS now runs with your own company skin is to have a look into the source code of an arbitrary ILIAS page. Somewhere in the head of the page you should find the following statement:

... link rel="stylesheet" type="text/css" href="./Customizing/global/skin/company/company.css ...

Changing ILIAS-Templates

To change the color or other style properties you just have to modify the style file company.css. I will not go into details here. This is the job of a web designer. To see which styles are used in some typical ILIAS components you have to look inside the the HTML source code of the pages of interest. There is no external element style documentation. To change existing ILIAS templates, you don't need to modify the template files directly. Just copy the template files you want to change from the templates/default directory into your skin directory.
To show an example I will replace the ILIAS logo with our company logo. Therefore please copy the company logo into the image folder of your skin. In this example, the logo file has a width of 210 pixels, a height of 44 pixels. and it comes with the name company.png:

Now you have to change the ILIAS template that contains the head of the page and the main navigation. Please copy the file

templates/default/tpl.main_buttons.html

into your skin directory and change the code for the embedded logo from

to

Save the file to Customizing/global/skin/company/tpl.main_buttons.html. Now you have to change the background of the main navigation to match the colors of the company logo. Have a look at the HTML code of the template. You will see that the style responsible for the main navigation bar is the style selector "ilMainHeader".

Change the already existing entry div.ilMainHeader in your style file company.css from

to

Together with some other minor changes the result is looking like this if you reload one of the pages in ILIAS:

Important ILIAS template

Below you'll find some of the most important ILIAS templates you might want to change if you create your own company skin:

• templates/default/tpl.main_buttons.html
  ILIAS head with main navigation and logo
• templates/default/tpl.login.html
  ILIAS logon page
  
• templates/default/tpl.locator.html
  ILIAS locator which shows the path to the current page in the repository
  
• templates/default/tpl.adm_content.html
  Main template for most ILIAS pages. This is the "body" for over 90 percent of the output

Overwriting templates and style of ILIAS modules

Not only the ILIAS core templates could be changed. It is also possible to change templates and syles of ILIAS modules such as Test & Assessment. ILIAS modules can be found in the Modules folder of your ILIAS installation.

What you have to do to modify module templates is to create a Modules folder in your skin folder. If you want to modify the template to show the participants of a test in ILIAS Test & Assessment, just copy the responsible template file

Modules/Test/templates/default/tpl.il_as_tst_participants.html

to the new module position in you skin:

Customizing/global/skin/company/Modules/Test/tpl.il_as_tst_participants.html

In other words, you create the folders Modules/Test in your skin folder and copy the desired template file into this newly created folder. In there you can modify the template in the same way as described above.

Conclusion

ILIAS customizing is way to change the ILIAS layout with your individualised CI. These changes could be applied by single users or for all users using the ILIAS system administration. The great advantage of this customization is the independence of your changes from ILIAS bug fixes and minor releases. Of course you should check if a bug fix or a release change changes style definitions or adds/removes styles or content templates. Another advantage is the fact that a skin can be applied simply by copying all the files into the Customizing folder of another ILIAS installation.