Tutorial: Schriften und Design
Farbe für Ladeanimation
Während das Website Widget geladen wird, wird dem Nutzer eine Ladeanimation angezeigt.
Die Farben dieser Ladeanimation können über eine entsprechende Einstellung im Einbaucode angepasst werden.
Konfigurationsmöglichkeit
Über den Parameter loadingAnimationColor lassen sich zwei Farbtöne definieren:
main – Primärfarbe der Ladeanimation
alt – Alternativfarbe (z. B. für Kontraste oder Übergänge)
Beispiel:
<script>
window.dw = window.dw || function () { (dw.q = dw.q || []).push(arguments) };
dw('settings','e4bd6533-da85-4d55-a95d-8485b7ad3346',
{
"lang": 'en',
"target": "ElementID",
"loadingAnimationColor": {
"main": '#41ffad',
"alt": '#d2d2d2'
}
});
</script>
<script async src="https://resc.deskline.net/DW5/start/ATDEMO/e4bd6533-da85-4d55-a95d-8485b7ad3346/index.js"></script>Die angegebenen Farbwerte müssen im HEX-Format definiert werden.
Einbindung eigener CSS-Dateien
Mithilfe von CSS können Struktur und Erscheinungsbild des TOSC5 Widgets gezielt beeinflusst werden.
CSS ist unter anderem für Schriftarten, Farben, Abstände und Layout verantwortlich.
Wenn das Widget optisch an das Design Ihrer Website angepasst werden soll (z. B. Schriftart), müssen die entsprechenden CSS-Dateien explizit eingebunden werden.
Einbindung externer CSS-Ressourcen
Über den Parameter styleResources können eine oder mehrere CSS-Dateien geladen werden.
Beispiel:
<script>
window.dw = window.dw || function () { (dw.q = dw.q || []).push(arguments) };
dw('settings','e4bd6533-da85-4d55-a95d-8485b7ad3346',
{
"lang": 'en',
"target": "ElementID",
"styleResources":[
'https://www.example.com/styles1.css',
'https://www.example.com/styles2.css'
]
});
</script>
<script async src="https://resc.deskline.net/DW5/start/ATDEMO/e4bd6533-da85-4d55-a95d-8485b7ad3346/index.js"></script>Die angegebenen CSS-Dateien werden beim Laden des Widgets automatisch berücksichtigt.
Schriftart überschreiben
Um die im TOSC5 Widget verwendete Schriftart zu übersteuern, muss eine entsprechende CSS-Regel definiert werden.
Diese Regel kann je nach gewünschter Schriftart individuell angepasst werden.
Beispiel für eine globale Schriftdefinition:
.app_root,
body,
dw-app-container,
.mdc-form-field,
.mdc-button.mdc-button--secondary.mdc-button--raised.mdc-ripple-upgraded,
.mdc-button,
.f-bold.ft2 {
font-family: 'Germania One', cursive !important;
}⚠️ Hinweis:
Die Verwendung von !important ist notwendig, um die systemseitig gesetzten Styles zuverlässig zu überschreiben. Änderungen sollten daher sorgfältig getestet werden.