Design the look & feel of ILIAS

Starting points for the design

There are two types of stylesheets that control the display of ILIAS. Both 

  1. Content styles control how content created with the page editor looks in the objects. For example, the color and size of the page headings of learning modules, tables, frames and captions of media, text blocks, etc. To abbreviate slightly: Content styles control the display of content below the tab navigation. 
  2. System styles control the appearance of the entire installation. These system styles can be designed in an external CSS editor or rudimentarily via the user interface in ILIAS. 

You can run several different system and content styles on your installation. 

Necessary preparatory work

Required software

To customize the appearance of ILIAS with on-board tools, you must first install the necessary tools on your server.nodejs and the mode packet manager are required.after you have installed both, you can install the less compiler.use:
npm install -g less
or
apt-get install node-less

Activate Kitchensink in the setup

The following part of the ILIAS setup is only accessible if you have root access. 

  1. Open the ILIAS setup: In the URL line of your browser, enter http://NAME DERINSTALLATION.DE/setup/setup.php
  2. ILIAS shows you the login page of the set-up:
  3. Log in with the MASTER password.
  4. Select Basic Settings in the navigation on the left-hand side.
  5. Scroll to the bottom of the page. Activate the Manage System Styles checkbox here.
  6. Enter /usr/bin/lessc under Path to less.
  7. Click Save.
  8. ILIAS has now activated the possibility to create skins: Open the Administration entry in the ILIAS main menu.
  9. ILIAS shows you a selection menu.
  10. Select the Layout entry.

Create new system style

What is a system style, skin or theme?

ILIAS themes or skins are managed in the System styles tab and can also be maintained here. Skins or system styles consist of

  • a set of icons
  • one set of fonts
  • HTML templates and
  • CSS/less

These data and specifications determine the appearance of ILIAS, which is delivered in a standard system style "Delos". 

System styles can either apply globally or only to certain areas in the repository.

Create a new system style or skin

Prerequisite: You need access to the global administration, to the Layout area.

  1. Open the Administration main menu.
  2. ILIAS displays a selection menu.
  3. Select the Layout entry.
  4. ILIAS displays the System styles tab.
  5. Click on New system style.
  6. ILIAS shows several accordions.
  7. Under option 1: Create a new System Style in all text input fields: for example, the name of your organization.
  8. Click Save.
  9. ILIAS shows the Settings tab of the new settings.
  10. Activate the System Style activated checkbox so that you can check what your style looks like later.
  11. Also activate the Personal checkbox so that you can check what your style looks like later.
  12. Click Save.

Note: Open a new browser, not just a new tab. Log in with your user. The browser cache of the first browser will prevent you from displaying your changes in the same browser. Change your skin in one browser and view your results in the other. 

Design system style

Change header icon

  1. Open your newly created style by opening the corresponding Actions menu at the end of the line and selecting Edit.
  2. ILIAS shows you the Settings tab.
  3. Open the Icons tab.
    • In the Edit by color sub-tab, you can adjust the colors used in icons to bring them closer to your color scheme.
    • You can replace individual icons in the Edit by icon sub-tab.
    • You can check which icon has which title in the Icon Gallery sub-tab.
  4. W

Coloring things

  • Footer, normal buttons, link texts in List GUI, actions menu >> everything that is dove blue by default in ILIAS = brand-primary in Colors
  • Object titles and important buttons >> everything that is green by default in ILIAS = brand-secondary in Colors
  • Descriptions under object titles and descriptions in List GUI = text-color in Scoffolding
  • Utilities >> top right: Search, Profile, Help, Mail = mid-gray in Colors
  • List GUI Backgrounds >> List of courses in the repository = il-primary-container-bg in Colors
  • Hovering over a list entry in List GUI changes the color >> List of courses in the repository = il-highlight-bg in Colors
  • changes the eyeliner = il-top-bar-bg

Manage system styles

Assign a system style or skin to users

Prerequisite: You need access to the global administration, to the Layout area. At least one content style already exists.

  1. Open the Administration main menu.
  2. ILIAS displays a selection menu.
  3. Select the Layout entry.
  4. ILIAS displays the System styles tab. For each system style, the number of users who have currently selected it is displayed.
  5. You can now assign a different system style to all users with a specific system style by selecting one of the other skins from the Style selection menu of the user changes in the relevant line.
  6. Save at the end.

Note: Even if several skins are installed and activated, you can prevent users from freely selecting them (set self-modification rights for the ILIAS account).

Assign skins to individual categories

You can also integrate skins in ILIAS, which are then only used in specific categories of the repository.

To integrate such partial skins, two preparations must be made:

  • The skin must be provided on the server, but in this case the template.xml file must contain an additional specification that defines its property as "Substyle".
  • As soon as the first step has been completed, an "Assign categories" option will appear in the "Actions" column on the far right of the "System styles" tab for the corresponding (main) skin:
    1. Click on "Assign categories" for the corresponding skin.
    2. ILIAS shows a (possibly empty) view of the categories that have been assigned to the partial skin so far, click on "Add assignment" in the top line.
    3. ILIAS shows an overview of the containers of the entire repository; the categories are clickable; now click on the title of the desired category (if necessary, first expand the path to it using the small "+" signs).

ILIAS then returns to the list of skins and displays an entry in the "Style of a sub-area" column, which is made up of the title of the sub-skin and that of the assigned category or categories.

Activate system style or skin

Prerequisite: You need access to the global administration, to the Layout area. 

  1. Open the Administration main menu. 
  2. ILIAS displays a selection menu.
  3. Select the Layout entry.
  4. ILIAS displays the System styles tab. All available system styles / themes are listed in the table:
  5. The default system style is displayed. The default system style is displayed to every ILIAS user who is not yet logged in or has not yet selected a different skin.

It is displayed whether this system style is active. Each system style must first be activated before it can be selected by the user.

Control the appearance of content

Content Styles - Introduction

Call up the Content styles tab. The following operations can be performed there:

  • Create or import stylesheets
  • [could not resolve link target: il_1510_pg_197413]
  • Define stylesheets as standard

Re-branding

You would like to adapt an existing content style to your corporate identity. It is best not to start from scratch, but to take an existing style and rework it: 

  1. [could not resolve link target: il_1510_pg_197411]
  2. [could not resolve link target: il_1510_pg_197412]
  3. [could not resolve link target: il_1510_pg_197413]

Export content style

Prerequisite: You need access to the global administration, to the Layout area. At least one content style already exists. 

  1. Open the Administration main menu. 
  2. ILIAS displays a selection menu.
  3. Select the Layout entry.
  4. Open the Content styles tab. 
  5. Click on the title of a style in the Content styles table. All editable styles have a checkbox and are set in blue. 
  6. ILIAS opens the Style class tab of the selected style. 
  7. Open the Settings tab.
  8. Click on the Export button there.
  9. ILIAS downloads a .zip file to your computer.

Note: Do NOT rename this file. 

Import content style

Prerequisite: You need access to the global administration, to the Layout area. 

  1. In the global administration, open the Content style tab in the Layout area.
  2. Click on the Add content style button.
  3. ILIAS shows several accordions with different options for creating stylesheets. 
  4. Click on option 2: Import stylesheet.
  5. Click on Select file and select an exported style as a .zip file.
  6. Upload your export file and click on Import.
  7. ILIAS displays the imported style in the table.

Adjust colors

Prerequisite: You need access to the global administration, to the Layout area.

  1. In the global administration, open the Content style tab in the Layout area.
  2. Click on the title of a content style.
  3. Customize the title in the Settings tab and click Save.
  4. Open the Colors tab.
  5. For the color you want to change, click on the Edit link in the Actions column to change the color. 
  6. Click on the Add color button at the top to add a color. 
  7. Give the new color a title. 
  8. Select a color value. 
  9. Click Save. 

Customize images

Think about a visual language for your content. Customize style classes Customize the following classes:
Text (block)

  • Headline 1
  • Headline 2
  • Headline 3
  • Additional
  • Alternatives
  • Checklist
  • Citation
  • Example
  • List
  • Mnemonic

Sign

  • Accent
  • Comment
  • Important
  • Quotation

Set up page

  • Top navigation contains the background image, it must be very long
  • BottomNavigation can have a different background than Topnavigation, it just has to contrast well with the color of the navigation links
  • Page Container mainly controls the background color of the page
  • PageFrame controls the frame around the page
  • Left and right navigation:
    • LeftNavigationLink / RightNavigationLink controls the color of the text
    • Navigation image
    • LeftNavigation / Right Navigation controls the size of the text
  • Page title

Layout navigation bar in the learning module

In ILIAS learning modules, a small navigation is displayed above and below the content of the page. You can style this navigation. 

Prerequisite: You need access to the global administration, to the Layout area. 

  1. In the global administration, open the Content style tab in the Layout area.
  2. Click on the title of a content style.
  3. Open the Images tab.
  4. Click on the Add image button and upload an image. Note: The title of the image must not contain any spaces, umlauts or similar. The image should be long to cover different screen widths without repeat.
  5. Open the Style class tab.
  6. Open the link page.
  7. Click the Edit link to the right of TopNavigation.
  8. In the Background section, select the title of the image you have just uploaded from the Background image drop-down menu.
  9. If necessary, select "no-repeat" under Repeat effect or set "Color name" as the background color or move the image using "Background position".
  10. Click Save and update to view your result in the preview.

Apply content styles to magazine

Assign a style to all learning modules

You want to assign a different content style to all learning modules. 

Prerequisite: You need access to the global administration, to the Layout area. At least one content style already exists. 

  1. You are in Administration > Layout > Content styles. 
  2. ILIAS shows in the table Content styles in the column Number of learning modules for each content style in how many ILIAS learning modules it is currently in use. It also shows how many learning modules are assigned to the standard stylesheet or have individual stylesheets.
  3. Select an entry above the table in the Change stylesheets section of the learning modules in the From and To drop-down menu:
    • Set all individually styled learning modules to a standard: From > Custom stylesheets and To > Standard stylesheet
    • give all standard styled learning modules a new look: From > Standard Stylesheet and To > Name Stylesheet
  4. To finish, click Change style in each case.
  5. If an individual style has to be deleted during this process, ILIAS will ask for confirmation. Confirm with OK. 
  6. ILIAS customizes all learning modules. 

Restrict styles to parts of the magazine

By default, stylesheets can be selected throughout the repository. However, you can prevent all styles from being selectable at all locations: You can give your content styles "scopes".

Prerequisite: You need access to the global administration, to the Layout area. At least one content style already exists.

  1. You are in Administration > Layout > Content styles. 
  2. ILIAS shows content styles in the table. 
  3. Select the Set scope option from the associated Actions menu of a stylesheet.
  4. ILIAS shows you all categories of the entire repository. Click on the triangles to go deeper into the tree. Select the category in which the content style should be available by clicking on it.

As soon as a scope has been defined for one of the stylesheets, a corresponding display appears in the Scope column.

Enforce corporate design by style

By default, stylesheets can be selected throughout the repository. You can enforce that only one style is used on the entire platform and that all content can only be created and used in this design.   

Prerequisite: You need access to the global administration, to the Layout area. At least one content style already exists. 

  1. You are in Administration > Layout > Content styles. 
  2. ILIAS shows content styles in the table. 
  3. Select the Forced style for all objects option from the associated Actions menu of a stylesheet.
  4. ILIAS shows "Unit stylesheet (global)" in the Usage column.  

You can ensure that styles can be selected again with the Unfix default action. 

Manage page layouts

Page layouts - Introduction

You can create page templates in the SCORM 2004 editor, which saves a lot of clicks and ensures a certain homogeneity of the pages. the page templates are inserted and contain placeholders of different types, e.g. for text, media objects or questions. these placeholders can then be filled with content very easily. 

Here in the administration you can design and update these page templates.