Theme - Weboberfläche

Eigenes Theme erstellen

Kopiere das Default Theme jedhoc im Ordner /usr/share/jedhoc/webapp/VAADIN/themes/jedhoc in einen neuen Ordner im gleichen Verzeichnis, z.B. /usr/share/jedhoc/webapp/VAADIN/themes/meinTheme (Name frei wählbar).

cp -a /usr/share/jedhoc/webapp/VAADIN/themes/jedhoc /usr/share/jedhoc/webapp/VAADIN/themes/meinTheme

Unter Docker muss der Ordner /app/webapp zusätzlich als volume auf das Host System gemountet werden. Von dem Speicherort müssen die Änderungen dann weiterhin so vorgenommen werden.


Lösche nun folgende Dateien im neu erstellten Ordner:

styles.scss.cache
styles.css


In der Datei /etc/jedhoc/jedhoc.xml das Theme auswählen.

/etc/jedhoc/jedhoc.xml
<theme>meinTheme</theme>


jEDHOC Dienst neustarten

service jedhoc restart


Anpassung des Theme

Um das Theme nach eigenen Wünschen anzupassen, wird primär die Datei styles.scss verwendet. Diese importiert widerum CSS Klassen aus der Datei jedhoc.scss. Hier sind alle Styles des Standard Themes definiert.

Änderungen am Theme können während der Laufzeit erfolgen.
Nachdem die Dateien styles.scss oder jedhoc.scss verändert wurden, muss in jEDHOC der Button SCSS kompilieren im Menü Administration → Theme geklickt werden. Dadurch wird das Cache File styles.scss.cache neu generiert.
Kommt es zu Darstellungsproblemen, kann ein Löschen der Datei styles.scss.cache Abhilfe schaffen.

Bei Versionsupdates von jEDHOC können aufgrund neuer Funktionen Darstellungsprobleme auftreten!
Somit muss das Theme überarbeitet werden.