# System Styles The templates folder of ILIAS contains the ILIAS System Styles. System Styles are defined by the set of icons, fonts, html templates and CSS/SCSS files that define the visual appearance of ILIAS. They differ from Content Styles, which enable to manipulate the classes defining the appearance of user generated content. ## Custom Styles System Styles may be customized by creating custom System Styles. Custom styles have to be placed in the `./Customizing/global/skin` directory to be active. One may have multiple substyles which may be active for different branches of the repository. A GitHub Repo for a custom System Style based on the default Delos will be available soon. ### Tools To generate a customized System Style, first install the necessary tools to your server. These tools include nodejs and the node packet manager. After that you can install the sass compiler that is used to turn SCSS into CSS using: ``` npm install -g sass ``` or Download [Dart SASS from Github](https://github.com/sass/dart-sass/releases/) and add it to the machine's PATH. If you want to create system styles throught frontend, make sure, that your webserver has the permission to read and execute your newly installed sass compiler. ### How-To 1 (Through Frontend) #### Step 1: Activate "Manage System Styles" 1. Open the ilias.ini.php file in your ILIAS Administration. 2. Make sure that in the Section [tools] the setting enable_system_styles_management is activated. 3. Make sure, that a lessc is set to your lessc installation: ``` enable_system_styles_management = "1" lessc = "/usr/local/bin/lessc" ``` #### Step 2: Create new System Style 1. Navigate to "Administration -> Layout and Styles" of you ILIAS Installation. 2. Add a new System Style and activate it. 3. Optional: Add a new Sub Style for the created System Style through the frontend 4. Optional: Change the SCSS variables for the new System Style through the frontend 5. Optional: Change the Icon colors of the new System Style through the frontend 6. Optional: Manually add template files for the new System Style (see "Change Layout" below) ### How-To 2 (Manually) #### 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`. In the future, we will provide a base System Style based on the default Delos that you can download from Github and place here. #### 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`: ```