In questo documento vengono illustrati i componenti utilizzati per creare temi Canvas personalizzati per un istituto.
L'Editor Temi consente agli amministratori di creare temi Canvas personalizzati per il proprio istituto utilizzando colori e immagini. Tuttavia, immagini, loghi e filigrane non vengono visualizzati per gli utenti che abilitano l'impostazione utente Stili a Contrasto Elevato. Per assistenza specifica con i file immagine, consultareDocumento di risorse sui modelli di immagini dell'editor del tema Canvas.
I file CSS e JavaScript sovrascritti possono anche essere caricati nell'Editor dei temi, rispettivamente per la visualizzazione HTML e la visualizzazione dell'app Canvas. Tuttavia, tieni presente che i file personalizzati potrebbero sovrascrivere qualsiasi colore supportato per gli stili ad alto contrasto; ad esempio, la modifica del colore di un collegamento in rosso in un file CSS personalizzato verrà visualizzata in rosso anche agli utenti con stili ad alto contrasto, il che potrebbe creare problemi di accessibilità. Come indicato nella finestra di caricamento dell'Editor dei temi, l'utilizzo di file CSS/JS personalizzati è un'opzione, ma significa che sei responsabile della manutenzione di qualsiasi codice che crei un conflitto con ciò che Canvas supporta nell'Editor dei temi.
Salvo diversa indicazione, i seguenti componenti dell'Editor dei temi si applicano alla versione web di Canvas. Alcuni componenti di Global Branding e Global Navigation si applicano anche alle app mobili di Canvas.
Marchio globale
Colore primario del marchio: Colore primario utilizzato in Canvas, mostrato principalmente nei link di navigazione dei corsi e nell'icona di attivazione/disattivazione della Dashboard. Utilizzato nelle app Canvas Student e Canvas Teacher per i colori di Navigazione Globale, Posta in arrivo e selezione dei corsi. Il valore predefinito è #008ee2.
Colore del testo principale: Colore per il testo utilizzato in Canvas. Utilizzato quando si immette testo nella pagina di accesso delle app Canvas Student, Canvas Teacher e Canvas Parent. Il valore predefinito è #2d3b45.
Colore del collegamento: Colore per i collegamenti ipertestuali utilizzati in Canvas. Utilizzato per le icone dei collegamenti esterni e le icone di download. Viene visualizzato anche nel collegamento Password dimenticata della pagina di accesso mobile. Il valore predefinito è #008ee2.
Pulsante primario: Colore per i pulsanti principali in Canvas;Se non viene impostato un colore, il pulsante primario assume il colore primario. Utilizzato per personalizzare pulsanti e link nelle app Canvas Student e Canvas Teacher. Utilizzato anche per il colore del pulsante Accedi nelle app Canvas Student, Canvas Teacher e Canvas Parent.
Testo del pulsante principale: Colore per il testo visualizzato come parte dei pulsanti principali. Utilizzato per il testo del pulsante Accedi nelle app Canvas Student, Canvas Teacher e Canvas Parent. Il valore predefinito è #ffffff.
Pulsante secondario: Colore per i pulsanti secondari in Canvas.Il valore predefinito è #2d3b45.Questo componente non è attualmente utilizzato nell'interfaccia Canvas.
Testo del pulsante secondario: Colore per il testo visualizzato come parte dei pulsanti secondari. Il valore predefinito è #ffffff.Questo componente non è attualmente utilizzato nell'interfaccia Canvas.
Navigazione globale
Sfondo di navigazione: Colore per lo sfondo del menu di navigazione globale. Utilizzato anche per colorare lo sfondo della barra degli indirizzi nei browser web. Il valore predefinito è #394b58.
Icona di navigazione: Colore per le icone nel menu di navigazione globale. Utilizzato anche per colorare le icone Visibilità e Impostazioni in SpeedGrader. Il valore predefinito è #ffffff.
Icona di navigazione attiva: Colore per l'icona attiva (selezionata) nel menu di navigazione globale. Se non viene impostato alcun colore, l'icona di navigazione attiva assume il colore primario.
Testo di navigazione: Colore per il testo nel menu di navigazione globale. Utilizzato anche per colorare il testo della barra di navigazione superiore nelle app Canvas Student e Canvas Teacher. Inoltre, il testo di navigazione viene utilizzato per colorare l'icona del registro in SpeedGrader. Il valore predefinito è #ffffff.
Testo di navigazione attivo: Colore per il testo attivo nel menu di navigazione globale. Se non è impostato alcun colore, il testo attivo di navigazione assume il colore del collegamento.
Bordo avatar di navigazione: Colore utilizzato per il bordo attorno all'icona del collegamento Account. Il valore predefinito è #ffffff.
Badge di navigazione:Colore utilizzato per il badge dei messaggi non letti nell'icona Posta in arrivo. Se non viene impostato alcun colore, il badge di navigazione assume il colore primario.
Badge di navigazione attivo: Colore per il badge attivo (selezionato) nel menu di navigazione globale. Se non viene impostato alcun colore, il badge di navigazione attivo assume il colore primario.
Testo del badge di navigazione: Colore utilizzato per il numero nel badge dei messaggi non letti nell'icona della Posta in arrivo. Se non viene impostato alcun colore, il badge di navigazione assume il colore primario.
Testo del badge di navigazione attivo: Colore per il testo attivo nel menu di navigazione globale. Se non viene impostato alcun colore, il testo attivo del badge di navigazione assume il colore del collegamento.
Sfondo del logo di navigazione: Colore per lo sfondo del logo nel menu di navigazione globale. Il valore predefinito è #394b58.
Logo di navigazione: Logo nella parte superiore del menu di navigazione globale (supporta file svg, png e jpg). Utilizzato anche come logo nella barra di navigazione superiore nelle app Canvas Student e Canvas Teacher sui dispositivi iOS. Il logo predefinito è Canvas.
Filigrane e altre immagini
Filigrana: Immagine di sfondo chiara che appare dietro il contenuto della pagina; le dimensioni di visualizzazione sono soggettive e dipendono dalle dimensioni del file caricato, quindi se l'immagine è troppo piccola o troppo grande per le tue preferenze di design, ridimensionala di conseguenza (supporta file png, svg, gif, jpg). L'impostazione predefinita è nessuna immagine.
Opacità della filigrana:Opacità (trasparenza) della filigrana. Il valore predefinito è 100% (nessuna trasparenza dell'immagine).
Favicon: Piccola icona visualizzata nella scheda del browser (supporta file ico da 16x16, 32x32 e 48x48). L'icona predefinita è Canvas favicon.
Icona della schermata iniziale del dispositivo mobile: Icona visualizzata quando Canvas viene aggiunto ai preferiti da un browser su un dispositivo mobile (supporta file png 180x180). L'icona predefinita è Apple Touch.
Gli utenti delle versioni più recenti di Windows (8+) possono aggiungere siti e app alla schermata iniziale dei loro Windows Phone. I campi di Windows sono facoltativi, ma consentono di offrire opzioni di personalizzazione agli utenti di Windows Phone. Tuttavia, i riquadri di Windows mostrano comunque l'icona preferita impostata nell'Editor dei temi, se presente.
Colore delle piastrelle di Windows: Colore per il riquadro di Windows. Se non è impostato alcun colore, il colore del riquadro di Windows assume il colore primario.
Immagine quadrata delle piastrelle di Windows: Immagine per la versione quadrata del riquadro di Windows (supporta 1,8 volte la dimensione standard del riquadro (file svg, png, jpg, gif 558x558). L'immagine predefinita è il riquadro di Windows.
Immagine Tile di Windows larga: Immagine per la versione ampia del riquadro di Windows (supporta file svg, png, jpg, gif da 558x270). L'immagine predefinita è il riquadro di Windows.
Logo della barra laterale destra: Il logo è visualizzato sopra la barra laterale destra nella dashboard di Canvas, ma quando visualizzato su tablet o in finestre del browser con risoluzioni dello schermo più piccole, il logo non è visibile a causa di limiti di spazio; le dimensioni di visualizzazione sono soggettive e dipendono dalle dimensioni del file caricato, ma la dimensione preferita per l'immagine è 360x140 (supporta svg, png, jpg, gif). L'impostazione predefinita è nessuna immagine.
Schermata di accesso
La pagina di accesso mobile non è attualmente supportata dai componenti della schermata di accesso, ma supporta il branding limitato dai componenti Global Branding. Si prega di notare che i link Single Sign-On ereditano le impostazioni dall'Editor dei temi.
Colore di sfondo:Colore dello sfondo di accesso. Il valore predefinito è #394b58.
Immagine di sfondo:Immagine per lo sfondo di accesso. L'impostazione predefinita è nessuna immagine.
Ombra del corpo:Colore per l'ombra del corpo. Il valore predefinito è #2d3b45.
Logo di accesso:Logo mostrato nella parte superiore della pagina di accesso. Il logo predefinito è Canvas.
Sfondo del bauletto: Colore per il riquadro esterno attorno al logo Canvas, al modulo e al piè di pagina. L'impostazione predefinita è nessun colore.
Bordo della casella superiore:Colore per il bordo della casella superiore. L'impostazione predefinita è nessun colore.
Sfondo della scatola interna: Colore per il riquadro interno attorno al logo Canvas, al modulo e al piè di pagina. L'impostazione predefinita è nessun colore.
Bordo interno della scatola:Colore per il bordo della casella interna. L'impostazione predefinita è nessun colore.
Sfondo del modulo:Colore per lo sfondo dietro l'etichetta di accesso e i campi password, il collegamento Password dimenticata e il pulsante Accedi. L'impostazione predefinita è nessun colore.
Bordo del modulo:Colore per il bordo attorno allo sfondo del modulo. L'impostazione predefinita è nessun colore.
Etichetta di accesso:Colore per l'etichetta di accesso, la password e il testo della casella di controllo "Resta connesso". Il valore predefinito è #ffffff.
Colore del collegamento di accesso:Colore per il contorno del pulsante di accesso, il testo del pulsante di accesso, i link della casella interna, il contorno del pulsante di disconnessione e il testo del pulsante di disconnessione. Il valore predefinito è #ffffff.
Collegamento al piè di pagina di accesso:Colore per i link del piè di pagina. Il valore predefinito è #ffffff.
Collegamento al piè di pagina di accesso Passa il mouse:Colore per i link del piè di pagina visualizzati al passaggio del mouse. Il valore predefinito è #ffffff.
Logo di accesso Instructure:Colore per il logo By Instructure. Il valore predefinito è #ffffff.
È possibile accedere a questa risorsa anche dalle seguenti Guide Canvas: