# 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 `./public/Customizing/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 You may directly use the Sass version shipped with ILIAS. If you want to use your own version, 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. ### Access available Styles through Frontend 1. Navigate to "Administration -> Layout and Styles" of you ILIAS Installation. 2. In a table you see all available System Styles. 3. You may assigne users to styles via Actions Dropdown 4. You may set Sub Styles for certain sections of the repository via Actions Dropdown ### How-To #### Step 1: Create skin directory To create a new skin, first add a new subdirectory to directory `./public/Customizing/skin`, e.g. `./public/Customizing/skin`. 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. `./public/Customizing/skin/myskin/template.xml`: ```