Update of skin and style description by BettyFromHH · Pull Request #10954 · ILIAS-eLearning/ILIAS

BettyFromHH · 2026-01-21T18:58:23Z

This pull request includes updating the readme.md file from the ./templates directory.

At the same time, we've decided to include the information on creating and editing custom skins and styles in the delos repository. This update now provides more comprehensive information on creating and editing skins and styles, as well as examples. To make it easier for new users to find the documentation for custom skins and styles, the readme.md file and the coding style guides are copied to the delos repository, serving as a central entry point for this topic.

For this reason, the build script had to be adjusted to also copy the necessary .md files.

…s custom style

rfalkenstein

Hi @BettyFromHH ,

I like this a lot since it improves my understanding of the skin/style processes in ILIAS. I added some small remarks.
The next step then might be to adapt the github workflow in ".github/workflows/style-to-repo_trunk.yml" in order to automatically push the delos style for release_11 to its corresponding repo.

Thank you very much!

Best regards,
@rfalkenstein

rfalkenstein · 2026-02-28T17:39:39Z

templates/Readme.md

+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.


Do you have any hint on when/how this "build process" takes place?

In order to inform uses we create a wiki about skins & styles right now.
After this, we update this readme.md and complete all information about the build process.

rfalkenstein · 2026-02-28T17:40:17Z

templates/Readme.md

+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


What do you mean by "even so"?

That's wrong, I fixed it.

rfalkenstein · 2026-02-28T17:41:42Z

templates/Readme.md

+## 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


rfalkenstein · 2026-02-28T17:45:31Z

templates/Readme.md

+
+### Step 1: Create skin directory
+
+If you want to create a new skin on the scratch, you have to go to the skin directory


"from scratch"

rfalkenstein · 2026-02-28T17:50:10Z

templates/Readme.md

-<template xmlns = "http://www.w3.org" version = "1" name = "MySkin">
-        <style name = "MyStyle" id = "mystyle" image_directory = "images"/>
+<template xmlns = "http://www.w3.org" version = "1.0" name = "MySkin">
+        <style name="MyStyle" id="mystyle" image_directory="images"/>


Do we have to be aware of case-sensitivity? Please compare with: https://github.com/BettyFromHH/ILIAS/blob/f3f3560d2aae8b6b86a0b501971ccf0be7014597/templates/Readme.md?plain=1#L145

Yes, folders are always case sensitive.

Should we not change the template.xml example then? Or the path in the directory example? -> https://github.com/BettyFromHH/ILIAS/blob/f3f3560d2aae8b6b86a0b501971ccf0be7014597/templates/Readme.md?plain=1#L145

rfalkenstein · 2026-02-28T17:54:29Z

templates/Readme.md

 and execute:

 ```
 ./node_modules/.bin/sass delos.scss mystyle.css


I think a hint would be nice that ./node_modules/.bin/sass only comes with the dev packages from package.json

A note can be found under "History > ILIAS 10".

rfalkenstein · 2026-02-28T18:02:37Z

templates/Readme.md

+> The directory can also include the '../' designation and is always used relative
+> to the directory specified with the id.
+
+## Usefull hints


typo ;-) -> "Useful"

🤦‍♀️

rfalkenstein · 2026-02-28T18:06:19Z

templates/Readme.md

+- **Important**:
+  > The location of the skin was moved to `./public/Customizing/skin`
 - System style Management through GUI has been abandoned, see: https://docu.ilias.de/go/wiki/wpage_1_1357
 - Sass is no shipped with NPM, see: https://github.com/ILIAS-eLearning/ILIAS/pull/8115


To be clearer and fix the typo:
Sass is now shipped with NPM in the ILIAS dev-dependencies.

matthiaskunkel · 2026-02-28T18:56:30Z

Hi @Chris-Squirrel, please have a look at the readme file. Thanks!

BettyFromHH · 2026-03-02T09:32:07Z

Hey @rfalkenstein, thanks for your review.

I will place the hints and correct the typos.

Chris-Squirrel · 2026-03-03T18:18:48Z

templates/Readme.md

-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,


ILIAS's graphical user interface is determined by its skin and style (?)

Notes: ILIAS's - apostrophe without an 's' is only for plurals. 'skin' and 'style' don't need to be written with a capital letter do they?

Chris-Squirrel · 2026-03-03T18:19:29Z

templates/Readme.md

-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


I prefer 'determine' to 'define'. This is used multiple times in this text - I appreciate that this might be 'developer' speak - but I feel feel I have to flag it nevertheless.

Chris-Squirrel · 2026-03-03T18:20:49Z

templates/Readme.md

+## 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 


'system style' (?) Does this need to be written with capital starting letters?

Chris-Squirrel · 2026-03-03T18:26:18Z

templates/Readme.md

+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


Even so, all templates.... - if you want to keep 'even so', it requires a comma.

Chris-Squirrel · 2026-03-03T18:29:24Z

templates/Readme.md

+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 


'content styles'? Does this have to be written with capital starting letters?

Chris-Squirrel · 2026-03-03T18:33:51Z

templates/Readme.md

+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.


... which allow the classes determining the appearance of user-generated content to be manipulated (adjusted, modified, tweaked?)

Notes: 'which enable to be manipulated' is grammatically incorrect. 'user-generated' functions as a single adjective - requires the hyphen.

Chris-Squirrel · 2026-03-03T18:38:07Z

templates/Readme.md

+
+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 


'at least one style' - or 'may only contain a single style'?

Chris-Squirrel · 2026-03-03T18:42:48Z

templates/Readme.md

+
+### Step 3: Switch to correct branch
+
+To Switch to the correct branch you have to change into the Skin-Directory and switch


Probably better without the capital 's' - i.e. 'switch'... unless Nintendo is sponsoring us :-D Same goes for 'skin directory'

Chris-Squirrel · 2026-03-03T18:44:57Z

templates/Readme.md

+
+### Step 4: Finish
+
+Now the Skin is ready to be used and you can activate it in the ILIAS administration.


'skin' - in the title of step one it is written with a small 's'.

Chris-Squirrel · 2026-03-03T18:55:47Z

templates/Readme.md

-Every skin can contain multiple styles. This example defines one style called
-MyStyle.
+In this example a custom skin called MySkin is defined, which contains one style 
+called MyStyle. The style has the ID mystyle and uses the subdirectory images to


...and uses the subdirectory 'images' - or "images" - something need to be added to make it clear that 'images' is the title of the folder

Chris-Squirrel · 2026-03-04T09:45:06Z

templates/Readme.md

-Every skin can contain multiple styles. This example defines one style called
-MyStyle.
+In this example a custom skin called MySkin is defined, which contains one style 
+called MyStyle. The style has the ID mystyle and uses the subdirectory images to


...and uses the subdirectory 'images' - or "images" - something needs to be added to make it clear that 'images' is the title of the folder

Chris-Squirrel · 2026-03-04T09:59:13Z

templates/Readme.md

-new skin. 
+new skin.

 Since ILIAS 5.3 we move aim to move most of the UI towards the UI Components. They


...we move aim to move....?

"Since ILIAS 5.3 we have been aiming to move..."?

Chris-Squirrel · 2026-03-04T10:01:34Z

templates/Readme.md

 Since ILIAS 5.3 we move aim to move most of the UI towards the UI Components. They
-are located in src/UI. To overwrite those you need to add the respective tpl files 
-in your skins folder. 
+are located in src/UI. To overwrite those you need to add the respective tpl files


How about 'which are located in' instead of 'They are located in'?

To overwrite 'these'

Chris-Squirrel · 2026-03-04T10:02:03Z

templates/Readme.md

-are located in src/UI. To overwrite those you need to add the respective tpl files 
-in your skins folder. 
+are located in src/UI. To overwrite those you need to add the respective tpl files
+in your skins folder.


'to' your skins folder. (?)

Chris-Squirrel · 2026-03-04T15:29:20Z

templates/Readme.md

+  subdirectory structure (omit the `templates` subdirectory). E.g. to replace the
+  template file `components/ILIAS/XYZ/templates/tpl.xyz.html` create a new
+  version at `./public/Customizing/skin/myskin/components/ILIAS/XYZ/tpl.xyz.html`. A template of a UI Component located in
+  `src/UI/templates/default/XYZ/tpl.xyz.html` can be customized by creating a


'customised'

Chris-Squirrel · 2026-03-04T15:35:20Z

templates/Readme.md

- Standard Layout: components/ILIAS/UI/templates/default/Layout/tpl.standardpage.html, the frame of the DOM for the complete ILIAS page. 
-Also checkout the according scss variable under section Layout (UI Layout Page).
+- Standard Layout: components/ILIAS/UI/templates/default/Layout/tpl.standardpage.html, the frame of the DOM for the complete ILIAS page.
+  Also checkout the according scss variable under section Layout (UI Layout Page).


'check out'

I have no idea how to read the rest of this. I feel that something needs to be clarified. Is it the 'according' scss variable, or the 'according scss' variable?

under section Layout? This could also be clearer - 'in the section "Layout"'?

Chris-Squirrel · 2026-03-04T15:37:36Z

templates/Readme.md

-Also checkout the according scss variable under section Layout (UI Layout Page).
+- Standard Layout: components/ILIAS/UI/templates/default/Layout/tpl.standardpage.html, the frame of the DOM for the complete ILIAS page.
+  Also checkout the according scss variable under section Layout (UI Layout Page).
 - Meta Bar: components/ILIAS/UI/templates/default/MainControls/tpl.metabar.html, the Bar on the top holding Notification, Search User Avatar, etc.


'at the top'?

holding? Might be better as 'containing'?

Chris-Squirrel · 2026-03-04T15:40:04Z

templates/Readme.md

+  Also checkout the according scss variable under section Layout (UI Layout Page).
 - Meta Bar: components/ILIAS/UI/templates/default/MainControls/tpl.metabar.html, the Bar on the top holding Notification, Search User Avatar, etc.
-Also checkout the according metabar scss variables.
+  Also checkout the according metabar scss variables.


'check out'. Explanation. 'checkout' is a noun. 'check out' is the verb.

What does 'according' mean? 'corresponding'? 'respective'? 'appropriate'? Or is it the name of something? In which case some apostrophes around the names might help in all of these similar sentences.

Chris-Squirrel · 2026-03-04T15:42:14Z

templates/Readme.md

 - Meta Bar: components/ILIAS/UI/templates/default/MainControls/tpl.metabar.html, the Bar on the top holding Notification, Search User Avatar, etc.
-Also checkout the according metabar scss variables.
+  Also checkout the according metabar scss variables.
 - Main Bar: components/ILIAS/UI/templates/default/MainControls/tpl.mainbar.html, the Bar on the left holding triggers for opening the slates for


'bar' - doesn't need to be written with a capital 'b'.

holding? - maybe 'containing' would be better?

for opening - I think 'to open' sounds better?

Chris-Squirrel · 2026-03-04T15:47:39Z

templates/Readme.md

 - Main Bar: components/ILIAS/UI/templates/default/MainControls/tpl.mainbar.html, the Bar on the left holding triggers for opening the slates for
-accessing Repository, Dasbhoard etc. Content.
-Also checkout the according mainbar scss variables.
+  accessing Repository, Dasbhoard etc. Content.


'Dashboard' - not dasbhoard!

a comma is required before 'etc' - i.e. ... 'Repository, Dashboard, etc.'

'content'.

Chris-Squirrel · 2026-03-04T15:49:37Z

templates/Readme.md

-accessing Repository, Dasbhoard etc. Content.
-Also checkout the according mainbar scss variables.
+  accessing Repository, Dasbhoard etc. Content.
+  Also checkout the according mainbar scss variables.


'check out' (please forgive me if checkout is 'developerish' and is widely used in coding. In normal English, it is a noun when written together).

Chris-Squirrel · 2026-03-04T15:50:13Z

templates/Readme.md

-Also checkout the according mainbar scss variables.
+  accessing Repository, Dasbhoard etc. Content.
+  Also checkout the according mainbar scss variables.
 - Slate: components/ILIAS/UI/templates/default/MainControls/Slate/tpl.slate.html, the Slates triggered by opening items of the Main Bar.


Chris-Squirrel · 2026-03-04T15:51:16Z

templates/Readme.md

+  Also checkout the according mainbar scss variables.
 - Slate: components/ILIAS/UI/templates/default/MainControls/Slate/tpl.slate.html, the Slates triggered by opening items of the Main Bar.
-Also checkout the according slate scss variables.
+  Also checkout the according slate scss variables.


-'check out'-

Again - no idea what is meant by according. Is it maybe a noun? In which case, check out the 'according slate' (?) scss variables.

Chris-Squirrel · 2026-03-04T15:56:22Z

templates/Readme.md

 - Slate: components/ILIAS/UI/templates/default/MainControls/Slate/tpl.slate.html, the Slates triggered by opening items of the Main Bar.
-Also checkout the according slate scss variables.
+  Also checkout the according slate scss variables.
 - Breadcrumbs: components/ILIAS/UI/templates/default/Breadcrumbs/tpl.breadcrumbs.html, Breadcrumbs working as locator on the top of the page.


Breadcrumbs working as locator on the top of the page. - I don't get this. How about 'Breadcrumbs work as locators at the top of pages'?

Chris-Squirrel · 2026-03-04T15:56:34Z

templates/Readme.md

+  Also checkout the according slate scss variables.
 - Breadcrumbs: components/ILIAS/UI/templates/default/Breadcrumbs/tpl.breadcrumbs.html, Breadcrumbs working as locator on the top of the page.
-Also checkout the breadcrumb scss variables.
+  Also checkout the breadcrumb scss variables.


'check out'?

Chris-Squirrel · 2026-03-04T15:59:00Z

templates/Readme.md

+
+### &lt;style>-Tag
+
+The style tag defines the main style. This must include at least the parameters name, id, and 


The id is one of the three divisions of the psyche in psychoanalytic theory - unless there is a clear programming reason, we should use 'ID' (i.e. identification).
-This might be nicer as ...the parameters 'name', 'ID' and 'image directory'. ? Generally speaking, if you agree, all referenced names in this text should be treated this way.

In this case 'id' is a tag parameter and must be written in lowercase.

Chris-Squirrel · 2026-03-04T16:09:10Z

templates/Readme.md

+
+### ILIAS 10
+- **Important**:
+  > The location of the skin was moved to `./public/Customizing/skin`


'has been moved to'? ILIAS 10 is still the current version!

Chris-Squirrel · 2026-03-04T16:10:14Z

templates/Readme.md

+### ILIAS 10
+- **Important**:
+  > The location of the skin was moved to `./public/Customizing/skin`
 - System style Management through GUI has been abandoned, see: https://docu.ilias.de/go/wiki/wpage_1_1357


'management'

Chris-Squirrel · 2026-03-04T16:12:12Z

templates/Readme.md

-#### ILIAS 9
-A proposal for better structuring the System Styles has been provided and accepted by the JF in 2021, 
+### ILIAS 9
+A proposal for better structuring the System Styles has been provided and accepted by the JF in 2021,


'A proposal on how to better structure the system styles was made and accepted by the JF in 2021'

Chris-Squirrel · 2026-03-04T16:14:56Z

templates/Readme.md

 see: https://github.com/ILIAS-eLearning/ILIAS/blob/trunk/src/UI/docu/sass-guidelines.md

-With ILIAS 9 the SCSS as been restructered according to the ITCSS structure suggested by this proposal, 
+With ILIAS 9 the SCSS as been restructered according to the ITCSS structure suggested by this proposal,


'In ILIAS 9 the SCSS was restructured according to....' ??

Chris-Squirrel · 2026-03-04T16:18:15Z

templates/Readme.md

 and the depencency to less from Bootstrap has mostly been removed. However, the change from less to SCSS
 and the abandonment from Bootstrap means, that System Styles from 8 and lower are NOT compatible with ILIAS 9.
-They can not be imported, be used, or compiled. 
+They can not be imported, be used, or compiled.


'They cannot be imported, used or compiled'

Cannot = not possible
Can not = it is possible to not do something

Chris-Squirrel · 2026-03-04T16:19:03Z

templates/Readme.md


-With ILIAS 9 the SCSS as been restructered according to the ITCSS structure suggested by this proposal, 
+With ILIAS 9 the SCSS as been restructered according to the ITCSS structure suggested by this proposal,
 and the depencency to less from Bootstrap has mostly been removed. However, the change from less to SCSS


Is 'less' a thing? I really don't get this sentence...

LESS = Leaner Style Sheets

Now we use SASS (Syntactically Awesome StyleSheets)

Chris-Squirrel · 2026-03-04T16:20:25Z

templates/Readme.md

-With ILIAS 9 the SCSS as been restructered according to the ITCSS structure suggested by this proposal, 
+With ILIAS 9 the SCSS as been restructered according to the ITCSS structure suggested by this proposal,
 and the depencency to less from Bootstrap has mostly been removed. However, the change from less to SCSS
 and the abandonment from Bootstrap means, that System Styles from 8 and lower are NOT compatible with ILIAS 9.


'to abandon from' is not a verb... What is meant here?

'..... means that' - comma not needed in English.

Chris-Squirrel · 2026-03-04T16:21:15Z

templates/Readme.md

-They can not be imported, be used, or compiled. 
+They can not be imported, be used, or compiled.

 However, note, that most of the css should still work. Also less and scss are not that far appart. Best read


'However, note that most of...' - second comma not needed.

BettyFromHH · 2026-03-12T17:29:16Z

@rfalkenstein
@Chris-Squirrel

Thanks a lot for your hints and advice.
I tried to implement everything as best I could. However, this wasn't possible in some cases.

@matthiaskunkel
I'll merge this on friday.

Update of skin and style description and of the build script for delo…

f3f3560

…s custom style

BettyFromHH assigned rotegras and BettyFromHH Jan 21, 2026

BettyFromHH added improvement documentation Pull requests that only update or add documentation. css/html Pull requests that propose changes to CSS/SCSS or HTML files. labels Jan 21, 2026

rfalkenstein reviewed Feb 28, 2026

View reviewed changes

matthiaskunkel requested a review from Chris-Squirrel February 28, 2026 18:55

Chris-Squirrel reviewed Mar 3, 2026

View reviewed changes

Chris-Squirrel reviewed Mar 4, 2026

View reviewed changes

Update templates/Readme.md

4fdae53


		### Step 1: Create skin directory

		If you want to create a new skin on the scratch, you have to go to the skin directory


		### Step 3: Switch to correct branch

		To Switch to the correct branch you have to change into the Skin-Directory and switch


		### Step 4: Finish

		Now the Skin is ready to be used and you can activate it in the ILIAS administration.


		### <style>-Tag

		The style tag defines the main style. This must include at least the parameters name, id, and

Conversation

BettyFromHH commented Jan 21, 2026

Uh oh!

rfalkenstein left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

matthiaskunkel commented Feb 28, 2026

Uh oh!

BettyFromHH commented Mar 2, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Chris-Squirrel Mar 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Chris-Squirrel Mar 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

rfalkenstein left a comment •

edited

Loading

Chris-Squirrel Mar 3, 2026 •

edited

Loading

Chris-Squirrel Mar 4, 2026 •

edited

Loading

Chris-Squirrel Mar 4, 2026 •

edited

Loading

Chris-Squirrel Mar 4, 2026 •

edited

Loading

Chris-Squirrel Mar 4, 2026 •

edited

Loading