Creating a Custom System Style: Step by Step Guide

The visual identity of ILIAS is shaped by System Styles and Content Styles, encompassing HTML templates, CSS/LESS files, icons, and fonts. In this comprehensive guide, we'll walk you through the process of creating a custom System Style in ILIAS to tailor the look and feel of your LMS.

Step 1: Create the Skin Directory

Begin by establishing a dedicated skin directory within the ILIAS customization path:

sudo mkdir /var/www/html/ilias/Customizing/global/skin/customskin

Step 2: Configure the template.xml File

Define essential information about your custom skin by creating and populating the template.xml file:

sudo nano /var/www/html/ilias/Customizing/global/skin/customskin/template.xml

Insert the following content into template.xml:

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

Navigate to ILIAS Administration (Administration » Layout and Styles) to verify that your custom System Style appears in the list of System Styles.

Step 3: Create the Main CSS File

Generate the primary CSS file for your custom skin within its designated directory:

sudo touch /var/www/html/ilias/Customizing/global/skin/customskin/customskin.css

Step 4: Copy the Variables File

Duplicate the variables.less file from the default template to your custom skin directory:

sudo cp /var/www/html/ilias/templates/default/less/variables.less /var/www/html/ilias/Customizing/global/skin/customskin/customskin-variables.less

Step 5: Develop the LESS File

Craft a LESS file to customize your skin's appearance and compile it into CSS. Create the customskin.less file and populate it:

sudo nano /var/www/html/ilias/Customizing/global/skin/customskin/customskin.less

Insert the following content into customskin.less:

@import "../../../../templates/default/delos";
@import "customskin-variables.less";

Step 6: Compile LESS to CSS

Compile the LESS file into CSS to activate your custom System Style:

lessc customskin.less customskin.css

Navigate to ILIAS Setup (Setup » Basic Settings » Manage System Styles) to enable System Style management. Specify the path to lessc (e.g., /usr/bin/lessc).

Once System Style management is enabled, access ILIAS Administration to define and activate your custom System Style. Customize the design of your ILIAS installation by editing the LESS file and compiling it into CSS.

Enhance the visual appeal of your ILIAS LMS with a unique System Style tailored to your organization's branding and user experience needs. Stay tuned for more ILIAS customization tips and tutorials!