Hierzu muss eine Datei im Foundry-Installationsordner ersetzt werden. Dies muss nach jedem Update erneut gemacht werden, deshalb lohnt es sich eine Kopie der personalisierten Datei auf dem eigenen PC zu behalten.
Inhalt
Erste Schritte
Zuerst muss die Datei join-game.hbs heruntergeladen werden. Diese besteht aus HTML-Code, bei dem an einer vorgefertigten Stelle CSS-Code eingefügt werden soll.
Die Datei ist im Github Repository vom Studio VTT Bastler zu finden: https://github.com/Studio-VTT-Bastler/Studio-VTT-Bastler/blob/main/files/join-game.hbs
Personalisieren
Ziemlich am Anfang der Datei befindet sich der folgende Code-Abschnitt:
<style>
/* button.world-id zum einfärben der Buttons einzelner Welten */
/* für weitere Welten, Block kopieren und Welt-ID austauschen */
button.world-id {
background-color: #000000;
color: #ffffff;
}
/* fügt Systemabhängig ein Bild unterhalb des Logins ein */
/* funktioniert nur, wenn login Stil auf Minimal eingestellt ist */
form.system-id.minimal::after {
content: "";
width: 150px;
height: 150px;
background: url(systems/system/bilder/bild.jpg) no-repeat;
}
</style>
Buttons für jede Welt
Der erste Block ist dafür zuständig, das Aussehen der Buttons zu verändern. Der Text world-id soll dafür, durch die Welt-ID ersetzt werden, für die die Buttons ersetzt werden soll.
Die Welt-ID kann ermittelt werden, indem man mit einem Rechtsklick die Welt editiert. Unter dem Punkt „Speicherort“ gibt es zwei Textfelder. Der Linke ist der Welten-Unterordner und lautet für gewöhnlich „Data/worlds/“. Im Rechten steht die Welt-ID.
Hinter dem Doppelpunkt bei background-color kann eine Buttonfarbe eingegeben werden, und hinter dem Doppelpunkt bei color befindet sich die Schriftfarbe
Da es sich hier um CSS-Code handelt, können Kundige diesen natürlich beliebig erweitern.
Beispielsweise kann der Block für die Welt „Test Welt“ mit der ID „test-welt“ so aussehen, wenn ich dunkelblaue Buttons und weißen Text haben möchte:
button.test-welt {
background-color: darkblue;
color: #ffffff;
}
Für weitere Welten kann der Code-Schnipsel einfach dupliziert werden.
Diese Einstellung kann für jede Welt einzeln eingestellt werden. Wird eine Welt nicht explizit eingestellt, bleiben die Buttons Foundry-Orange.
Bild für jedes System
Der zweite Block dagegen fügt ein Bild unterhalb des Login Formulars ein. Dieses Bild kann für jedes System separat festgelegt werden und ist nur sichtbar, wenn die Loginseite auf Minimal eingestellt wurde.
Hierfür muss der Teil system-id durch die System-ID des gewünschten Systems ersetzt werden.
Um ein Bild einzufügen muss der Link unter background: url(...) verändert werden. Hier können zum einen Bilder verwendet werden, die im Web erreichbar sind, zum anderen kann auch auf Bilder im UserDataPath verwendet werden.
Für Bilder im Web wird hier einfach die Web-Adresse eingefügt (https://www.seite.de/bild.png). Für ein Bild aus dem UserDataPath muss ein relativer Link eingefügt werden, der vom UserDataPath aus beginnt.
Als Beispiel wird durch den folgenden Code-Schnipsel das DSA-Auge für das DSA5 System eingefügt:
form.dsa5.minimal::after {
content: "";
width: 150px;
height: 150px;
background: url(systems/dsa5/icons/categories/DSA-Auge-Spieler.webp) no-repeat;
}
Durch width und height kann die Größe des Bilds verändert werden.
Datei in Foundry einfügen
Wenn die Datei personalisiert wurde, muss diese nur noch in Foundry eingefügt werden. Hierzu muss zunächst die originale Datei der Foundry Installation ausfindig gemacht werden.
Im Installationsverzeichnis von Foundry muss in die Unterordner /resources/app/templates/setup/ navigiert werden. dort befindet sich eine join-game.hbs Datei. Diese muss gelöscht und durch die personalisierte Datei ersetzt werden.
Dieser letzte Schritt muss nach jedem Foundry Update erneut durchgeführt werden. Deshalb sollte die personalisierte join-game.hbs Datei noch an einen zweiten Ort gespeichert werden, sodass dieser Schritt einfahc wiederholt werden kann.