From f3f3560d2aae8b6b86a0b501971ccf0be7014597 Mon Sep 17 00:00:00 2001 From: BettyFromHH Date: Wed, 21 Jan 2026 19:49:07 +0100 Subject: [PATCH] Update of skin and style description and of the build script for delos custom style --- scripts/Style-To-Repo/build.sh | 51 ++--- templates/Readme.md | 403 ++++++++++++++++++++++++++++----- 2 files changed, 362 insertions(+), 92 deletions(-) diff --git a/scripts/Style-To-Repo/build.sh b/scripts/Style-To-Repo/build.sh index a31db3bb7980..c3943f31131c 100755 --- a/scripts/Style-To-Repo/build.sh +++ b/scripts/Style-To-Repo/build.sh @@ -23,43 +23,32 @@ function build() { rm -rf ${BUILD_BASE_FOLDER} fi - mkdir -p ${BUILD_BASE_FOLDER} + mkdir -p ${BUILD_BASE_FOLDER}/delos + cp -r ./templates/default/* ${BUILD_BASE_FOLDER}/delos - mkdir ${BUILD_BASE_FOLDER}/UI - mkdir ${BUILD_BASE_FOLDER}/Services - mkdir ${BUILD_BASE_FOLDER}/Modules + mkdir -p ${BUILD_BASE_FOLDER}/fonts + cp -r ./components/ILIAS/UI/resources/fonts/* ${BUILD_BASE_FOLDER}/fonts - cp -r ./templates/default/* ${BUILD_BASE_FOLDER} - cp -r ./src/UI/templates/default/* ${BUILD_BASE_FOLDER}/UI + mkdir -p ${BUILD_BASE_FOLDER}/images + cp -r ./components/ILIAS/UI/resources/images/* ${BUILD_BASE_FOLDER}/images - - declare -a SERVICES - - SERVICES=($(find **/*/templates/default -type d | grep ^Services)) - - for SERVICE in "${SERVICES[@]}" + declare -a DEFAULT_TEMPLATE_FOLDERS + DEFAULT_TEMPLATE_FOLDERS=($(find ./components -type d -ipath '*templates/default*' | grep -v ^'./public/')) + for DEFAULT_TEMPLATE_FOLDER in "${DEFAULT_TEMPLATE_FOLDERS[@]}" do - NAME=$(echo ${SERVICE} | cut -d'/' -f2- | rev | cut -d'/' -f3- | rev) - if [[ "${NAME}" == *\/* ]] - then - continue - fi - mkdir -p ${BUILD_BASE_FOLDER}/Services/${NAME} - cp -r ${SERVICE}/* ${BUILD_BASE_FOLDER}/Services/${NAME} + NAME=$(echo "${DEFAULT_TEMPLATE_FOLDER}" | sed -e 's|/templates/default||') + mkdir -p "${BUILD_BASE_FOLDER}"/"${NAME}" + cp -r "${DEFAULT_TEMPLATE_FOLDER}"/*.html "${BUILD_BASE_FOLDER}"/"${NAME}" &> /dev/null done - declare -a MODULES + if [[ -d "./components/ILIAS/Mail/templates/default/img" && -d "${BUILD_BASE_FOLDER}/components/ILIAS/Mail" ]]; then + cp -r "./components/ILIAS/Mail/templates/default/img" "${BUILD_BASE_FOLDER}/components/ILIAS/Mail" &> /dev/null + fi - MODULES=($(find **/*/templates/default -type d | grep ^Modules)) + mv ${BUILD_BASE_FOLDER}/delos/template.xml ${BUILD_BASE_FOLDER}/template.xml - for MODULE in "${MODULES[@]}" - do - NAME=$(echo ${MODULE} | cut -d'/' -f2- | rev | cut -d'/' -f3- | rev) - if [[ "${NAME}" == *\/* ]] - then - continue - fi - mkdir -p ${BUILD_BASE_FOLDER}/Modules/${NAME} - cp -r ${MODULE}/* ${BUILD_BASE_FOLDER}/Modules/${NAME} - done + sed -i 's/Delos/SkinRepoDelos/' ${BUILD_BASE_FOLDER}/template.xml + + cp -r ./templates/Readme.md ${BUILD_BASE_FOLDER}/Readme.md + cp -r ./templates/Guidelines_SCSS-Coding.md ${BUILD_BASE_FOLDER}/Guidelines_SCSS-Coding.md } \ No newline at end of file diff --git a/templates/Readme.md b/templates/Readme.md index 205259384563..115fa35ec3ed 100755 --- a/templates/Readme.md +++ b/templates/Readme.md @@ -1,16 +1,31 @@ -# System Styles +# Skins and Styles for ILIAS -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. +The total representation of ILIAS' graphical user interface is defined by +its Skin and Style. The Skin contains all the necessary files (CSS/SCSS, images, +icons, fonts, templates) to define the visual appearance of ILIAS. A Skin contains +one or more Styles, which may differ in colors, fonts, spacing and other visual +aspects. The default Skin of ILIAS is called Delos and contains one Style also +called Delos. -## 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. +## ILIAS System Style DELOS + +The template folder of ILIAS contains the CSS/SCSS files and templates, which are +necessary to build the default System Style of ILIAS called Delos. Due to the +new build process of ILIAS, the fonts, images and icons are no longer part of +this folder. They are now initially located in the components/ILIAS/UI/resources +folder and copied to the public/assets folder during the build process. +Even so all template files are still located in the templates folder of each +component. All files together 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 Skins and Styles + +System Styles may be customized by creating custom skin and style. Custom skins +must be placed in the directory `./public/Customizing/skin`. A custom skin have +to contain one style and may include further sub-styles. The sub-styles may be +active for different branches of the repository. ### Tools @@ -35,34 +50,95 @@ system style here: [Delos Repository](https://github.com/ILIAS-eLearning/delos) At the point of writing, it does require modification to be recognized as a custom System Style as outlined later in this document. -### Access available Styles through Frontend +### Access available Skins and 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 assign users to styles via Actions Dropdown 4. You may set Sub Styles for certain sections of the repository via Actions Dropdown -### How-To +# Creating a custom skin and style + +## Quick-Build from the delos repository + +### Step 1: Create skin directory + +If you want to create a new skin quickly, you can use the delos repository as a +starting point. To do so, first go to the directory `./public/Customizing/skin`. + +``` +cd ./public/Customizing/skin +``` -#### Step 1: Create skin directory +### Step 2: Clone delos repository -To create a new skin, first add a new subdirectory to directory -`./public/Customizing/skin`, e.g. `./public/Customizing/skin/myskin/`. +Then clone the delos repository from GitHub into a new directory, e.g. `MyDelosSkin`. +Please note that the correct branch must be selected to match the ILIAS version being +used. -#### Step 2: Create template.xml File +``` +git clone https://github.com/ILIAS-eLearning/delos.git MyDelosSkin +``` + +### Step 3: Switch to correct branch + +To Switch to the correct branch you have to change into the Skin-Directory and switch +to the branch you need, e.g. release_10 for ILIAS 10.xx: + +``` +cd MyDelosSkin +git switch release_10 +``` + +### Step 4: Finish + +Now the Skin is ready to be used and you can activate it in the ILIAS administration. + +> **Note:** +> The Delos repository contains all CSS, templates, and resource files in their latest +> versions. Template changes can lead to malfunctions, so it is recommended to update +> custom skins immediately after an ILIAS update. + +> **Note:** +> It's not recommended to modify the delos.css directly. Instead, modify the SCSS files +> and compile with sass pre-processor. + + + +## Create a custom skin from scratch + +### Step 1: Create skin directory + +If you want to create a new skin on the scratch, you have to go to the skin directory +in the public folder. In the skin folder you have to create a new subdirectory for +your skin, e.g. MySkin. + +``` +cd ./public/Customizing/skin +mkdir MySkin +``` + +### 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`: +`./public/Customizing/skin/MySkin/template.xml`. This file contains all necessary +information about the skin and its styles. An example file could look like this: ``` -