Manuels Canvas (fr)Guide de l’administrateur Comptes et sous-comptesComment puis-je télécharger des fichiers JavaScript et CSS personnalisés vers un compte ?

Comment puis-je télécharger des fichiers JavaScript et CSS personnalisés vers un compte ?

Dans Canvas, vous pouvez utiliser l'éditeur de thème pour le branding de votre compte. Néanmoins, si vous souhaitez appliquer un branding additionnel qui n'est actuellement pas supporté dans l'éditeur de thème, vous pouvez transférer des ficheirs CSS ou JS personnalisés vers votre compte. Les fichiers sont hébergés directement dans Canvas. Un thème appliqué au compte s'applique également à tous les sous-comptes, bien que vous puissiez télécharger des fichiers CSS/JS pour des sous-comptes individuels.

L'éditeur de thème supporte les envois de fichiers bureau/mobile. Les fichiers CSS/JS standard sont appliqués aux pages HTML dans l'application pour bureau de Canvas, qui peuvent inclure la page de connexion pour les périphériques mobiles. Les fichiers CSS/JS pour mobile ne sont appliqués qu'au contenu utilisateur affiché dans les applications iOS ou Android de Canvas, ainsi que dans les applications tierces qui utilisent l'API Canvas, mais les fichiers pour mobile ne s'appliquent pas au contenu affiché par les navigateurs mobiles.

Les fichiers JavaScript et CSS personnalisés sont soumis aux mêmes règles d'héritage de marque de compte et de sous-compte que lors de la création d'un thème dans l'éditeur de thème.

Avant d'ajouter le JavaScript personnalisé et des fichiers CSS, vous devez contacter votre Responsable succès client pour permettre une identification personnalisée de votre compte ou sous-compte.

Risques des fichiers personnalisés

Si vous ne pouvez utiliser les options natives de l'Éditeur de thème, vous devez connaître les risques associés à l'utilisation de fichiers personnalisés qui peuvent provoquer des problèmes d'accès ou des conflits avec les futures mises à jour de Canvas :

  • Vous devez disposer de connaissances avancées de JavaScript et CSS et entretenir votre propre code.  
  • Les fichiers personnalisés peuvent être en conflit avec les futures modifications du DOM de Canvas (par ex. nom de classe d'éléments ou structure HTML) et ne sont par conséquent pas supportés. Instructure refuse toute responsabilité pour tout changement effectué sur vos fichiers personnalisés écrasés.
  • Vous êtes responsable pour consulter les directives d'accessibilité aux contenus Web afin de vous assurer que vos fichiers répondent aux tests d'accessibilité Web ou toute autre norme qui pourrait être nécessaire dans votre juridiction. Vous êtes responsable pour rendre vos modifications accessibles aux lecteurs d'écran aux utilisateurs nécessitant des contrastes de texte et de couleurs et aux utilisateurs se reposant sur des Styles à Contraste Élevé.
  • Lorsque vous expérimentez une identification personnalisée, confirmez toujours vos modifications d'identification dans l'environnement bêta de votre institution ou l'environnement test.

 

Remarque :

  • L’éditeur de thème n'est pas disponible pour les comptes Gratuit-Pour-Enseignant.
  • Si vous êtes un administrateur de sous-compte et que le lien Thèmes n'est pas visible dans la navigation du compte, cela signifie que les Thèmes n'ont pas été activés pour les sous-comptes. Si l'onglet d'envoi de fichiers CSS/JS n'est pas visible, les envois de fichiers n'ont pas été activés pour les sous-comptes.

Ouvrir Compte

Ouvrir Compte

Dans Navigation globale, cliquez sur le lien Administrateur (Admin) [1], cliquez ensuite sur le nom du compte [2].

Ouvrir les thèmes

Bouton Ouvrir l’éditeur de thèmes

Dans Navigation du compte, cliquez sur le lien Thèmes.

Remarque : Si des thèmes de sous-compte ont été activés, chaque sous-compte inclut également un lien Thèmes. Pour ouvrir l'éditeur de thèmes pour un sous-compte, cliquez sur le lien Sub-Accounts (Sous-comptes) pour le localiser et ouvrez le sous-compte, puis cliquez sur le lien Themes (Thèmes) du sous-compte.

Ouvrir un modèle de thème

Si vous n'avez pas encore de thème Canvas pour votre compte, utilisez un modèle pour créer un nouveau thème. Vous pouvez choisir le thème Canvas par défaut, un modèle minimaliste ou encore un modèle State U. Si votre responsable Customer Success a activé l'option K12, le thème K12 est également disponible comme modèle.

Pour créer un nouveau thème, survolez un modèle et cliquez sur le bouton Ouvrir dans l'éditeur de thème (Open in Theme Editor) [1] ou cliquez sur le bouton Ajouter thème (Add Theme) [2] et sélectionnez un modèle depuis la liste.

Ouvrir un thème enregistré

Ouvrir un thème enregistré

Si vous avez déjà créé et enregistré un thème, vous pouvez éditer les thèmes enregistrés à tout moment. Les thèmes enregistrés s'affichent dans la section Mes thèmes. Pour ouvrir un thème enregistré, survolez le nom de ce thème et cliquez sur le bouton Ouvrir dans l’éditeur de thème (Open in Theme Editor) [1].

Pour créer un nouveau thème basé sur un thème enregistré, cliquez sur le bouton Ajouter thème (Add Theme) [2] et sélectionnez le nom du thème enregistré depuis la liste [3]. Cette option vous assure de ne pas écraser votre thème précédemment enregistré.

Ouvrir l'onglet Télécharger

Ouvrir l'onglet Télécharger

Dans la barre latérale de l'éditeur de thèmes, cliquez sur l'onglet Télécharger (Upload).

Télécharger fichiers personnalisés

Télécharger fichiers CSS/JavaScript personnalisés

Pour télécharger des fichiers à destination de l'application pour bureau Canvas, localisez les en-têtes du fichier CSS/JS [1]. Pour envoyer les fichiers depuis des applications mobile Canvas ou tiers, localisez les en-têtes du fichier CSS/JS pour application mobile [2].

Localisez le type de fichier que vous souhaitez télécharger et cliquez sur le bouton Sélectionner (Select) [3], puis localisez le fichier sur votre ordinateur.

Localisez les fichiers additionnels pour téléchargement, si nécessaire.

Prévisualiser le thème

Prévisualiser le thème

Pour prévisualiser votre thème, cliquez sur le bouton Prévisualiser vos changements (Preview Your Changes).

Canvas générera un aperçu des éléments en fonction de vos fichiers transférés.

Gestion des fichiers

Gestion des fichiers

Pour gérer vos fichiers, cliquez à nouveau sur l'onglet Télécharger (Upload) [1].

Pour supprimer et transférer un nouveau fichier, cliquez sur l'icône Supprimer (Remove) [2]. Vous pourrez modifier et transférer votre fichier révisé.

Pour voir le code du fichier, cliquez sur le lien Voir le fichier (View File) [3]. Le fichier étant classé directement dans Canvas, utilisez ce lien si vous avez besoin de le télécharger.

Enregistrer le thème

Enregistrer le thème

Une fois que vous êtes satisfait des changements apportés à votre modèle, enregistrez votre thème en cliquant sur le bouton Enregistrer le thème (Save Theme).

Nommer un thème

Nommer un thème

Si vous avez modifié un thème depuis un modèle, l'éditeur de thème crée une copie de ce dernier. Les modèles ne peuvent pas être directement modifiés. Dans le champ Nom du thème (Theme Name) [1], entrez un nom pour votre thème. Cliquez sur le bouton Enregistrer le thème (Save Theme) [2].

Remarque : Si vous avez modifié un thème précédemment enregistré, l'enregistrement de ce thème écrase la version précédente et utilise le même nom de thème.

Appliquer le thème

Appliquer le thème

Pour appliquer votre thème à votre compte, cliquez sur le bouton Apply (Appliquer) [1].

Pour quitter le thème et revenir à la page des Thèmes, cliquez sur le bouton Quitter (Exit) [2]. Vous pouvez ouvrir le thème et l'appliquer à votre compte à tout moment.

Remarque : Si votre compte permet aux sous-comptes de personnaliser leurs propres thèmes, toutes les modifications applicables que vous avez apportées seront également filtrées vers les sous-comptes associés. Canvas affiche l'état des mises à jour de votre Éditeur de Thème ; lorsque le processus pour chaque sous-compte est terminé, le sous-compte disparaît de la fenêtre de progression. Lorsque tous les sous-comptes ont été mis à jour, l'éditeur de thèmes redirige vers la page Thèmes.