Tutorial: Schriften und Design - Erlebnis-Widget
- Manuela Rojacher
Owned by Manuela Rojacher
Farbe für Ladeanimation
Während die TOSC5 Applikation lädt, wird eine Ladeanimation angezeigt. Die Farben dieser können mittels folgender Einstellung angepasst werden, siehe “loadingAnimationColor”:
<script>
window.dw = window.dw || function () { (dw.q = dw.q || []).push(arguments); };
dw("settings", "32747417-dacd-4af0-88b5-deb964f0726a", {
lang: "de",
loadingAnimationColor: {
main: "#41ffad",
alt: "#d2d2d2"
},
profileOverrides: ["teaser=false"],
context: {}
});
</script>
<script async src="https://web5.deskline.net/start/ACCOWEB/32747417-dacd-4af0-88b5-deb964f0726a/index.js"></script>Laden eigenes CSS
Mittels CSS kann man die Struktur bzw. Gestaltung der Seite beeinflussen. CSS ist für das optische Erscheinungsbild verantwortlich.
Damit die Schriftart am TOSC5 wie gewünscht angezeigt wird, muss dies im Code mittels CSS-Datei integriert werden.
Im folgenden Beispiel wird gezeigt, an welcher Stelle das Laden von CSS Files im Code integriert werden muss, siehe “styleResources”:
<script>
window.dw = window.dw || function () { (dw.q = dw.q || []).push(arguments); };
dw("settings", "32747417-dacd-4af0-88b5-deb964f0726a", {
lang: "de",
styleResources:[
"https://www.example.com/styles1.css",
"https://www.example.com/styles2.css"
],
profileOverrides: ["teaser=false"],
context: {}
});
</script>
<script async src="https://web5.deskline.net/start/ACCOWEB/32747417-dacd-4af0-88b5-deb964f0726a/index.js"></script>Schriftart hinterlegen
Um die Schriftart am TOSC5 zu übersteuern, muss eine CSS Regel gesetzt werden.
Diese müsste je nach Wunsch angepasst werden.
.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;
}