Ce document décrit les composants utilisés pour créer des thèmes Canvas personnalisés pour une institution.
L'éditeur de thèmes permet aux administrateurs de créer des thèmes Canvas personnalisés pour leur établissement, en utilisant des couleurs et des images. Cependant, les images, logos et filigranes ne s'affichent pas pour les utilisateurs ayant activé l'option « Styles à contraste élevé ». Pour obtenir de l'aide concernant les fichiers image, veuillez consulter la documentation.Document de ressources sur les modèles d'images de l'éditeur de thèmes Canvas.
Il est également possible de charger des fichiers CSS et JavaScript personnalisés dans l'éditeur de thèmes, respectivement pour l'affichage HTML et l'application Canvas. Cependant, veuillez noter que ces fichiers personnalisés peuvent écraser les couleurs prises en charge par les styles à contraste élevé ; par exemple, si vous modifiez la couleur d'un lien en rouge dans un fichier CSS personnalisé, il apparaîtra également en rouge pour les utilisateurs disposant de styles à contraste élevé, ce qui peut engendrer des problèmes d'accessibilité. Comme indiqué dans la fenêtre de chargement de l'éditeur de thèmes, l'utilisation de fichiers CSS/JS personnalisés est une option, mais vous êtes alors responsable de la maintenance de tout code en conflit avec les fonctionnalités prises en charge par Canvas dans l'éditeur de thèmes.
Sauf indication contraire, les composants suivants de l'éditeur de thèmes s'appliquent à la version web de Canvas. Certains composants de marque globale et de navigation globale s'appliquent également aux applications mobiles Canvas.
Marque mondiale
Couleur principale de la marqueCouleur principale utilisée dans l'ensemble de Canvas, notamment pour les liens de navigation des cours et l'icône d'activation/désactivation du tableau de bord. Utilisée dans les applications Canvas Étudiant et Canvas Enseignant pour la navigation globale, la boîte de réception et les couleurs de sélection des cours. Valeur par défaut : #008ee2.
Couleur du texte principalCouleur du texte utilisé dans Canvas. Utilisée lors de la saisie de texte sur la page de connexion des applications Canvas Étudiant, Canvas Enseignant et Canvas Parent. Valeur par défaut : #2d3b45.
Couleur du lienCouleur des hyperliens utilisés dans l'ensemble de Canvas. Utilisée pour les icônes de liens externes et les icônes de téléchargement. Apparaît également sur le lien « Mot de passe oublié » de la page de connexion mobile. La valeur par défaut est #008ee2.
Bouton principal: Couleur des boutons principaux dans Canvas;Si aucune couleur n'est définie, le bouton principal adopte la couleur principale. Ce thème est utilisé pour personnaliser les boutons et les liens dans les applications Canvas Étudiant et Canvas Enseignant. Il est également utilisé pour la couleur du bouton de connexion dans les applications Canvas Étudiant, Canvas Enseignant et Canvas Parent.
Texte du bouton principalCouleur du texte des boutons principaux. Utilisée pour le texte du bouton « Se connecter » dans les applications Canvas Étudiant, Canvas Enseignant et Canvas Parent. Valeur par défaut : #ffffff.
Bouton secondaire: Couleur des boutons secondaires dans Canvas.La valeur par défaut est #2d3b45.Ce composant n'est actuellement pas utilisé dans l'interface Canvas.
Texte du bouton secondaireCouleur du texte affiché dans les boutons secondaires. La valeur par défaut est #ffffff.Ce composant n'est actuellement pas utilisé dans l'interface Canvas.
Navigation globale
Arrière-plan de navigationCouleur d'arrière-plan du menu de navigation global. Utilisée également pour la couleur d'arrière-plan de la barre d'adresse des navigateurs web. Valeur par défaut : #394b58.
Icône de navigationCouleur des icônes du menu de navigation global. Utilisée également pour colorer les icônes de visibilité et de paramètres dans SpeedGrader. Valeur par défaut : #ffffff.
Icône de navigation activeCouleur de l'icône active (sélectionnée) dans le menu de navigation global. Si aucune couleur n'est définie, l'icône active du menu de navigation prend la couleur principale.
Texte de navigationCouleur du texte du menu de navigation global. Utilisée également pour colorer le texte de la barre de navigation supérieure dans les applications Canvas Étudiant et Canvas Enseignant. De plus, la couleur du texte de navigation détermine la couleur de l'icône du carnet de notes dans SpeedGrader. La valeur par défaut est #ffffff.
Texte de navigation actif: Couleur du texte actif dans le menu de navigation global. Si aucune couleur n'est définie, le texte actif du menu de navigation prend la couleur du lien.
Bordure d'avatar de navigationCouleur utilisée pour la bordure de l'icône du lien Compte. La valeur par défaut est #ffffff.
Badge de navigation :Couleur utilisée pour le badge de message non lu dans l'icône de la boîte de réception. Si aucune couleur n'est définie, le badge de navigation prend la couleur principale.
Badge de navigation actifCouleur du badge actif (sélectionné) dans le menu de navigation global. Si aucune couleur n'est définie, le badge de navigation actif prend la couleur principale.
Texte du badge de navigationCouleur utilisée pour le nombre de messages non lus dans l'icône de la boîte de réception. Si aucune couleur n'est définie, la couleur principale est utilisée par défaut.
Texte du badge de navigation actif: Couleur du texte actif dans le menu de navigation global. Si aucune couleur n'est définie, le texte actif du badge de navigation prend la couleur du lien.
Fond du logo de navigationCouleur de fond du logo dans le menu de navigation global. Valeur par défaut : #394b58.
Logo de navigationLogo en haut du menu de navigation global (compatible avec les fichiers svg, png et jpg). Également utilisé comme logo dans la barre de navigation supérieure des applications Canvas Étudiant et Canvas Enseignant sur les appareils iOS. Le logo Canvas est utilisé par défaut.
Filigranes et autres images
FiligraneImage de fond claire apparaissant derrière le contenu de la page ; sa taille est subjective et dépend de la taille du fichier téléchargé. Si l’image est trop petite ou trop grande, redimensionnez-la en conséquence (formats PNG, SVG, GIF et JPG compatibles). Par défaut, aucune image n’est affichée.
Opacité du filigrane :Opacité (transparence) de votre filigrane. Par défaut : 100 % (aucune transparence de l’image).
FaviconPetite icône affichée dans l'onglet du navigateur (compatible avec les fichiers ICO 16x16, 32x32 et 48x48). Par défaut : favicon Canvas.
Icône de l'écran d'accueil mobileIcône affichée lorsque Canvas est ajouté aux favoris depuis un navigateur sur un appareil mobile (prend en charge les fichiers png 180x180). Par défaut, il s'agit de l'icône tactile Apple.
Les utilisateurs de versions récentes de Windows (8 et supérieures) peuvent épingler des sites et des applications à l'écran d'accueil de leur téléphone Windows. Les champs Windows sont facultatifs, mais permettent d'offrir des options de personnalisation aux utilisateurs de téléphones Windows. Toutefois, les vignettes Windows affichent toujours l'icône (favicon) définie dans l'éditeur de thèmes, le cas échéant.
Couleur des tuiles Windows: Couleur de la vignette Windows. Si aucune couleur n'est définie, la couleur de la vignette Windows prend la couleur principale.
Image carrée de vignette WindowsImage pour la version carrée de la vignette Windows (compatible avec une taille 1,8 fois supérieure à la taille standard (558 x 558 px, fichiers svg, png, jpg, gif)). L'image par défaut est celle de la vignette Windows.
Image de vignette Windows largeImage pour la version large de la vignette Windows (compatible avec les fichiers svg, png, jpg et gif de 558 x 270 pixels). L'image par défaut est celle de la vignette Windows.
Logo de la barre latérale droiteLe logo s'affiche au-dessus de la barre latérale droite du tableau de bord Canvas. Cependant, sur les tablettes ou dans les navigateurs avec une résolution d'écran inférieure, il n'est pas visible par manque d'espace. La taille d'affichage est subjective et dépend de la taille du fichier téléchargé, mais la taille d'image recommandée est de 360 x 140 pixels (formats SVG, PNG, JPG et GIF pris en charge). Par défaut, aucune image n'est affichée.
Écran de connexion
La page de connexion mobile n'est actuellement pas compatible avec les composants de l'écran de connexion, mais prend en charge une personnalisation limitée via les composants de marque globale. Veuillez noter que les liens d'authentification unique héritent des paramètres de l'éditeur de thème.
Couleur de fond :Couleur de l'arrière-plan de la fenêtre de connexion. La valeur par défaut est #394b58.
Image de fond :Image d'arrière-plan pour la connexion. Par défaut, aucune image.
Ombre corporelle :Couleur de l'ombre portée. Valeur par défaut : #2d3b45.
Logo de connexion :Logo affiché en haut de la page de connexion. Par défaut, il s'agit du logo Canvas.
Fond de la boîte supérieureCouleur du cadre extérieur autour du logo Canvas, du formulaire et du pied de page. Par défaut : aucune couleur.
Bordure supérieure de la boîte :Couleur de la bordure de la boîte supérieure. Par défaut : aucune couleur.
Fond de la boîte intérieure: Couleur de la boîte intérieure autour du logo Canvas, du formulaire et du pied de page. Par défaut, aucune couleur.
Bordure intérieure du cadre :Couleur de la bordure de la boîte intérieure. Par défaut : aucune couleur.
Contexte du formulaire :Couleur de l'arrière-plan derrière le libellé de connexion, les champs de mot de passe, le lien « Mot de passe oublié » et le bouton « Se connecter ». Par défaut, aucune couleur.
Bordure du formulaire :Couleur de la bordure autour du fond du formulaire. Par défaut : aucune couleur.
Libellé de connexion :Couleur du libellé de connexion, du mot de passe et du texte de la case à cocher « Rester connecté ». Valeur par défaut : #ffffff.
Couleur du lien de connexion :Couleur du contour et du texte du bouton de connexion, des liens de la boîte interne, du contour et du texte du bouton de déconnexion. Valeur par défaut : #ffffff.
Lien de connexion en bas de page :Couleur des liens de pied de page. Valeur par défaut : #ffffff.
Lien de connexion en bas de page (survol) :Couleur des liens du pied de page au survol de la souris. Valeur par défaut : #ffffff.
Logo de connexion Instructure :Couleur du logo By Instructure. Valeur par défaut : #ffffff.
Cette ressource est également accessible depuis les guides Canvas suivants :