Comment créer un thème pour un compte à l'aide de l'éditeur de thème ?

En tant qu'administrateur, vous pouvez utiliser l'éditeur de thème pour créer des thèmes personnalisées à votre institution. Ces thèmes sont créés à partir de modèles existants. Tout thème appliqué au compte s'applique également à l'ensemble de sous-comptes liés, bien que l'éditeur de thème puisse être utilisé pour créer des thèmes à destination de sous-comptes individuels. Une fois que vous avez créé et enregistré un thème, vous pouvez l'appliquer à tout moment à votre compte. Vous pouvez également créer de nouveaux thèmes basés sur des thèmes précédemment créés. Découvrez comment gérer les thèmes enregistrés.

Visionnez une vidéo sur l'éditeur de thème.

Héritage de thème

Le branding personnalisé est opéré au niveau du compte et, par défaut, les sous-comptes et leurs cours associés héritent d'un nouveau branding. Vous pouvez toutefois activer les sous-comptes pour utiliser l'éditeur de thème, tout élément qui n'est pas spécifiquement modifié sera hérité au niveau du compte.

Les inscriptions d'utilisateurs sont associées au niveau du compte, et les inscriptions aux cours sont associées au niveau du sous-compte. Une inscription est créée lorsqu'un utilisateur et qu'un cours sont réunis. Si un utilisateur n'est inscrit dans aucun cours, le Tableau de bord présente le branding pour le compte. Cet algorithme est également lié aux pages qui ne sont pas associées à un compte et qui comprennent compte et paramètres utilisateur, calendrier et conversations. Les données utilisateur sont toujours hébergées au niveau du compte, la raison pour laquelle ils ne peuvent pas hériter d'un branding de sous-compte.

Si un utilisateur est inscrit à un cours dans le compte, le Tableau de bord affiche le branding pour ce cours. Si un utilisateur est inscrit dans un cours au sein d'un sous-compte, le Tableau de bord affiche le branding pour le sous-compte. Si un utilisateur est inscrit à des cours avec plusieurs sous-comptes, ou si l'un des cours est dans le compte, le Tableau de bord affiche le branding pour le compte.

Eléments de l'éditeur de thème

Pour plus de détails sur les différents éléments de l'éditeur de thème, notamment ceux affichés dans les applications Canvas, veuillez consulter le document de ressources sur les composants de l'éditeur de thème de Canvas. Pour une aide sur les modèles d'images, veuillez consulter le document de ressources sur les modèles d'image de l'éditeur de thème de Canvas. Les logos, images et filigranes ne sont pas visibles par les utilisateurs qui activent l'option Styles contraste élevé dans les paramètres utilisateur.

Fichiers CSS/JS

Les fichiers CSS ou JS ne sont pas requis, mais sont également supportés dans l'éditeur de thème. Leur fonctionnalité doit être activé par votre manager Customer Success. Avant de téléverser un fichier CSS ou JS personnalisé, informez-vous sur les risques associés, ces derniers pouvant créer des problèmes ou des conflits avec les versions à venir de Canvas. En savoir plus sur les restrictions CSS / JS personnalisées.

 

Remarques :

  • L'éditeur de thème n'est pas disponible pour les comptes Gratuit-Pour-Enseignant.
  • Si vous êtes administrateur d'un sous-compte et que le lien Thèmes n'est pas visible dans la fenêtre de navigation du compte, cela signifie que les thèmes n'ont pas été activés pour les sous-comptes. Si l'onglet Téléverser des fichiers CSS/JS n'est pas visible, les envois de fichiers n'ont pas été activés pour les sous-comptes.
  • Pour prévisualiser le marquage de l'éditeur de thème, vous devez désactiver l'interface utilisateur à contraste élevé.
  • Par défaut, les comptes enfants de consortium héritent du thème appliqué dans le compte parent. Cependant, un compte enfant de consortium peut créer un nouveau thème pour le compte enfant.

Ouvrir un compte

Ouvrir un compte

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

Ouvrir les thèmes

Ouvrir l'éditeur de thèmes

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

Remarque : Si des thèmes de sous-compte ont été activés, chaque sous-compte inclut également un lien Thèmes (Themes). 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é.

Voir l'éditeur de thème

L'éditeur de thème présente un modèle de page vous permettant de revoir votre marquage client. Ces éléments changeront avec les couleurs et le marquage que vous ajouterez à l'aide de l'éditeur de thème.

Voir l'onglet Téléverser des fichiers CSS/JS

Voir l'onglet Téléverser des fichiers CSS/JS

Si l'option CSS ou JS a été activée pour votre compte, la barre de l'éditeur de thème présente un onglet Modifier (Edit) [1] et un onglet Téléverser (Upload) [2]. Par défaut, l'éditeur de thème est ouvert sur l'onglet Modifier et présente l'ensemble des éléments liés. L'onglet Téléverser vous permet de téléverser des fichiers personnalisés.

Localiser des éléments

Localiser des éléments

L'éditeur de thème comporte quatre groupes d'éléments : Marquage global (Branding global), Navigation globale (Global Navigation), Filigrane & autres images (Watermarks & Other Images) et Écran de connexion (Login Screen). Par défaut, la barre latérale de l'éditeur de thème présente le groupe Marquage global.

Localisez l'élément que vous souhaitez personnaliser. Vous pouvez déployer ou réduire les différents groupes en cliquant sur l'icône en forme de flèche située à côté de leurs en-têtes respectifs.

Sélectionnez Couleur via CSS

Sélectionnez Couleur via CSS

La valeur par défaut de chaque élément est grisée dans le champ de texte.

Pour préciser un élément de couleur, localisez le champ de texte et ajoutez une nouvelle couleur CSS. Vous pouvez entrer les couleurs par code hex, valeur RGB ou encore nom de couleur valide.

Remarque : Les couleurs saisies seront converties et affichйes sous forme de codes hex.

Sélectionnez la couleur via le Sélectionneur de couleur

Sélectionnez la couleur via le Sélectionneur de couleur

Dans les navigateurs qui supportent la saisie de couleurs natives, l'outil de sélection de couleur peut être utilisé pour choisir une valeur. Localisez l'élément et cliquez sur la fenêtre de couleur. Le sélecteur apparaîtra dans la nouvelle fenêtre.

Choisir une couleur

Choisir une couleur

Sélectionnez une couleur dans la fenêtre du sélecteur de couleur [1]. Une fois qu'une couleur a été sélectionnée, l'élément affiche la nouvelle couleur dans la zone [2]. La couleur hex de l'élément est également mise à jour avec la valeur de la nouvelle couleur.

Ajouter des images

Ajouter des images

Pour les éléments qui nécessitent des images, localisez l'élément et cliquez sur le lien Sélectionner une image (Select Image). La description de l'image inclura tous les types de fichiers pris en charge.

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 l'aperçu des éléments en fonction des changements apportés au modèle. Si nécessaire, réalisez des changements additionnels et prévisualisez à nouveau votre thème.

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.

Vérifier l'application de thème

Pour appliquer le thème à l'ensemble de votre compte, cliquez sur le bouton OK [1]. Pour revenir à l'éditeur de thème, cliquez sur le bouton Annuler (Cancel) [2].

Remarque : Si votre compte autorise les sous-comptes à personnaliser leur propre thème, tout changement applicable que vous aurez effectué sera également filtré à destination de tous les sous-comptes associés. Canvas indique le statut de vos mises à jour e l'éditeur de thème. Une fois le processus complété pour chaque sous-compte, ce dernier disparaît de la fenêtre de progrès. Une fois que tous les sous-comptes ont été mis à jour, l'éditeur de thème vous redirige sur la page de thèmes.