In Canvas, puoi utilizzare l' Editor dei Temi per personalizzare il tuo account. Tuttavia, se desideri applicare un ulteriore branding attualmente non supportato nell'Editor dei Temi, puoi caricare file CSS (Cascading Style Sheet) e JavaScript (JS) personalizzati sul tuo account. I file sono ospitati direttamente in Canvas. Qualsiasi tema applicato all'account si applica anche a tutti i sottoaccount, sebbene sia possibile caricare file CSS/JS per singoli sottoaccount.
L'editor dei temi supporta il caricamento di file per desktop e dispositivi mobili. I file CSS/JS standard vengono applicati alle pagine HTML nell'applicazione desktop Canvas, che può includere la pagina di accesso per dispositivi mobili. I file CSS/JS per dispositivi mobili vengono applicati solo ai contenuti utente visualizzati nelle app Canvas per iOS o Android, nonché in app di terze parti che utilizzano l'API Canvas, ma i file per dispositivi mobili non si applicano ai contenuti utente visualizzati nei browser mobili.
I file JavaScript e CSS personalizzati sono soggetti alle stesse regole di ereditarietà del marchio degli account e dei sottoaccount utilizzate quando si crea un tema nell'editor dei temi.
Prima di aggiungere file JavaScript e CSS personalizzati, è necessario contattare il Customer Success Manager per abilitare il branding personalizzato per il proprio account e per tutti gli eventuali sottoaccount. Una volta abilitato il branding personalizzato, l'opzione per caricare file CSS e JS personalizzati sarà disponibile nell'account e in tutti i sottoaccount.
Rischi dei file personalizzati
Se non è possibile utilizzare le opzioni native dell'editor dei temi per il branding, è necessario essere consapevoli dei rischi associati all'utilizzo di file personalizzati, che potrebbero causare problemi di accessibilità o conflitti con futuri aggiornamenti di Canvas:
- È necessario avere una conoscenza avanzata di JavaScript e CSS e saper gestire il proprio codice.
- I file personalizzati potrebbero entrare in conflitto con future modifiche al Canvas DOM (ad esempio: nomi di classi di elementi o struttura HTML) e pertanto non sono supportati. Instructure declina ogni responsabilità per eventuali modifiche apportate ai file di override personalizzati.
- È tua responsabilità esaminare le linee guida sull'accessibilità dei contenuti web per garantire che i tuoi file soddisfino tutti i test di accessibilità web o altri standard di conformità richiesti nella tua giurisdizione. È tua responsabilità rendere le tue modifiche accessibili agli screen reader, agli utenti con esigenze di contrasto del testo e dei colori e agli utenti che utilizzano gli stili a contrasto elevato come impostazione utente .
- Quando si sperimenta un branding personalizzato, è sempre opportuno confermare le modifiche apportate al branding nell'ambiente beta o di test del proprio istituto.
Note:
- L'editor dei temi non è disponibile per gli account Free-For-Teacher.
- Se sei un amministratore di un sottoaccount e il link "Temi" non è visibile nella sezione "Navigazione Account", significa che i Temi non sono stati abilitati per i sottoaccount. Se la scheda "Caricamento CSS/JS" non è visibile, significa che il caricamento dei file non è stato abilitato per i sottoaccount.
00:07: Come faccio a caricare file JavaScript e CSS personalizzati su un account?
00:11: Nella Navigazione globale, fare clic sul collegamento Amministrazione, quindi fare clic sul nome dell'account.
00:17: Nelle Impostazioni account, fare clic sul collegamento Temi.
00:21: Se hai precedentemente creato e salvato un tema, puoi modificarlo in qualsiasi momento. I temi salvati vengono visualizzati nella sezione "I miei temi". Per aprire un tema salvato, passa il mouse sul nome del tema e clicca sul pulsante "Apri nell'editor dei temi".
00:37: Oppure clicca sul pulsante Aggiungi tema. Puoi anche creare un tema basato su un modello salvato.
00:43: Per creare un nuovo tema basato su un tema salvato, fai clic sul pulsante Aggiungi tema e seleziona il nome del tema salvato dall'elenco. Questa opzione ti aiuta a evitare di sovrascrivere il tema salvato in precedenza.
00:56: Nella barra laterale dell'Editor temi, fare clic sulla scheda Carica.
01:00: Per caricare i file per l'applicazione desktop Canvas, individuare le intestazioni del file CSS o del file JavaScript.
01:08: Per caricare file per i contenuti utente nelle app Canvas per dispositivi mobili e di terze parti, individua le intestazioni del file CSS o del file JavaScript dell'app per dispositivi mobili.
01:18: Individua il tipo di file che desideri caricare e fai clic sul pulsante Seleziona, quindi individua il file sul tuo computer.
01:26: Individuare file aggiuntivi da caricare, se necessario.
01:30: Per visualizzare in anteprima il tema, fare clic sul pulsante Anteprima modifiche.
01:34: Canvas genererà l'anteprima dei componenti in base ai file caricati.
01:40: Per gestire i tuoi file, clicca di nuovo sulla scheda Carica.
01:44: Per rimuovere e caricare un nuovo file, clicca sull'icona Rimuovi. Puoi apportare ulteriori modifiche e caricare il file revisionato.
01:52: Per visualizzare il codice del tuo file, clicca sul link Visualizza file.
01:55: Poiché il file è archiviato direttamente in Canvas, se hai bisogno di scaricarlo, usa questo link.
02:02: Una volta che sei soddisfatto delle modifiche apportate al modello, salva il tema cliccando sul pulsante Salva tema.
02:08: Se hai modificato un tema da un modello, l'editor dei temi ne crea una copia. I modelli non possono essere modificati direttamente. Nel campo Nome tema, inserisci un nome per il tema. Fai clic sul pulsante Salva tema.
02:22: Per applicare il tema al tuo account, clicca sul pulsante Applica tema
02:27: Per uscire dal tema e tornare alla pagina Temi, clicca sul pulsante Esci. Puoi aprire il tema e applicarlo al tuo account in qualsiasi momento.
02:36: Questa guida spiega come caricare file JavaScript e CSS personalizzati su un account.
Apri un conto
Nella Navigazione globale, fare clic sul collegamento Amministrazione [1], quindi fare clic sul nome dell'account [2].
Temi aperti
Nella Navigazione account, fare clic sul collegamento Temi .
Nota: se sono stati abilitati i temi per i sottoaccount, ogni sottoaccount include anche un link "Temi" . Per aprire l'Editor Temi per un sottoaccount, clicca sul link "Sottoaccount" per individuare e aprire il sottoaccount, quindi clicca sul link " Temi" del sottoaccount.
Apri modello tema
Se non hai ancora un tema Canvas per il tuo account, utilizza un modello per crearne uno nuovo. Puoi scegliere tra il modello Canvas predefinito, un modello minimalista e un modello State U. Se il tuo Customer Success Manager ha abilitato l'impostazione specifica per la funzione K12, il tema K12 apparirà anche come modello.
Per creare un nuovo tema, passa il mouse su un modello e fai clic sul pulsante Apri nell'editor dei temi [1], oppure fai clic sul pulsante Aggiungi tema [2] e seleziona un modello dall'elenco.
Apri tema salvato
Se hai precedentemente creato e salvato un tema, puoi modificarlo in qualsiasi momento. I temi salvati vengono visualizzati nella sezione I miei temi. Per aprire un tema salvato, passa il mouse sul nome del tema e fai clic sul pulsante Apri nell'editor dei temi [1].
Per creare un nuovo tema basato su un tema salvato, fare clic sul pulsante Aggiungi tema [2] e selezionare il nome del tema salvato dall'elenco [3]. Questa opzione consente di evitare di sovrascrivere il tema salvato in precedenza.
Apri la scheda Carica
Nella barra laterale dell'Editor temi, fare clic sulla scheda Carica .
Carica file personalizzati
Per caricare i file per l'applicazione desktop Canvas, individuare le intestazioni del file CSS/file JavaScript [1]. Per caricare i file per i contenuti utente nelle app Canvas per dispositivi mobili e di terze parti, individuare le intestazioni del file CSS/file JavaScript dell'app per dispositivi mobili [2].
Individua il tipo di file che desideri caricare e fai clic sul pulsante Seleziona [3], quindi individua il file sul tuo computer.
Se necessario, individua altri file da caricare.
Anteprima del tema
Per visualizzare in anteprima il tema, fai clic sul pulsante Anteprima modifiche .
Canvas genererà l'anteprima dei componenti in base ai file caricati.
Gestisci file
Per gestire i tuoi file, clicca nuovamente sulla scheda Carica [1].
Per rimuovere e caricare un nuovo file, fare clic sull'icona Rimuovi [2]. È possibile apportare ulteriori modifiche e caricare il file rivisto.
Per visualizzare il codice del tuo file, clicca sul link Visualizza file [3]. Poiché il file è archiviato direttamente in Canvas, usa questo link se hai bisogno di scaricarlo.
Salva tema
Una volta che sei soddisfatto delle modifiche apportate al modello, salva il tema cliccando sul pulsante Salva tema .
Crea nome tema
Se hai modificato un tema da un modello, l'editor dei temi crea una copia del tema. I modelli non possono essere modificati direttamente. Nel campo Nome tema [1], inserisci un nome per il tema. Fai clic sul pulsante Salva tema [2].
Nota: se hai modificato un tema salvato in precedenza, il salvataggio del tema sovrascrive la versione precedente del tema e utilizza lo stesso nome del tema.
Applica tema
Per applicare il tema al tuo account, clicca sul pulsante Applica tema [1].
Per uscire dal tema e tornare alla pagina Temi, fare clic sul pulsante Esci [2]. È possibile aprire il tema e applicarlo al proprio account in qualsiasi momento.
Nota: se il tuo account consente ai sottoaccount di personalizzare i propri temi, tutte le modifiche applicabili apportate verranno filtrate anche per i sottoaccount associati. Canvas mostra lo stato degli aggiornamenti del tuo Editor dei Temi; una volta completato il processo per ciascun sottoaccount, il sottoaccount scompare dalla finestra di avanzamento. Una volta aggiornati tutti i sottoaccount, l'Editor dei Temi reindirizza alla pagina Temi.
