Tutorial: Caratteri e Design - Widget Esperienze

Colori della rotella di caricamento

Durante il caricamento dell’applicazione TOSC5, viene visualizzata una rotella di caricamento. I colori della rotella possono essere modificati utilizzando la seguente impostazione (“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>

Caricare il proprio CSS

I CSS possono essere utilizzati per modificare la struttura o il design della pagina e sono i responsabili dell’effetto grafico.

Per garantire che il font nel TOSC5 venga visualizzato come desiderato, è necessario integrarlo nel codice utilizzando un file CSS.

Nell'esempio seguente viene mostrato dove deve essere integrato il caricamento dei file CSS nel codice (“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>

Font

Per sovrascrivere il font nel TOSC5, è necessario impostare una regola CSS.
Questa dovrà essere adattata come desiderato.

.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;
}