Bienvenue dans cet article où nous verrons ensemble comment votre plateforme Nudgis peut être modelée graphiquement pour refléter vos couleurs et votre design.
Nudgis possède des fonctionnalités de personnalisation qui vous permettent, entre autres, d'y appliquer la charte graphique de votre organisation. Nous verrons tout d'abord comment ajuster la page d'accueil du site, puis nous verrons les options de personnalisation globales et enfin comment paramétrer le thème du lecteur.
Pour accéder à ces réglages, votre compte utilisateur doit posséder la permission globale "Peut éditer l'apparence du site".
Sommaire
1/ NOTES À PROPOS DU PASSAGE EN VERSION 12.2.0
2A/ LES DIFFÉRENTS TYPES DE WIDGETS
4/ LES COULEURS DU LECTEUR UBICAST
Notes à propos du passage en version 12.2.0
La version 12.2.0 de Nudgis apporte de nombreux changements, dont la possibilité de modifier l'apparence de la nouvelle interface utilisateur (actuellement en version beta).
En attendant que l'interface soit disponible dans sa version finale, vous aurez la main sur les paramètres d'apparence de celle-ci afin de faciliter la transition.
Une fois la mise à jour en 12.2.0 effectuée, il ne sera plus possible de modifier l'apparence de l'ancienne interface. Celle-ci sera cependant toujours disponible.
Le choix de l'utilisation de la nouvelle interface est laissé à l'appréciation de l'utilisateur. Pour activer l'option, celui-ci devra se rendre dans sa page de profil, puis cocher "Utiliser la nouvelle interface utilisateur (bêta)" et sauvegarder.
Il vous sera également possible de forcer la nouvelle interface pour tous les utilisateurs en vous rendant dans les paramètres globaux (il vous faudra pour cela la permission ""). Le paramètre est intitulé "Forcer la nouvelle interface utilisateur pour tout le monde". Le choix d'utiliser la nouvelle interface ou non ne sera plus donné aux utilisateurs si vous activez cette option.
Découvrons maintenant le fonctionnement de la personnalisation graphique de votre Nudgis, à commencer par sa première page.
Page d'accueil
Lorsque vous y accédez pour la première fois, la page d’accueil de Nudgis est pratiquement vide et vous serez en mesure d’ajouter différents types de widgets pour enrichir la disposition de la page pour correspondre à vos besoins. Les widgets sont des blocs contenant des éléments pouvant être déplacés sur une grille.
Pour activer le mode édition et commencer la personnalisation de la grille de widget, cliquez sur le bouton "Personnaliser la page d'accueil" en bas de la fenêtre :
Une fois le mode édition activé, vous pouvez ajouter des widgets, les déplacer librement sur la grille de widgets en utilisant cette icône et les redimensionner à partir du coin inférieur droit.
Les différents types de widgets
Dans le cadre "Ajouter un widget" vous trouverez plusieurs types d'éléments que vous pourrez sélectionner, puis ajouter un à un à la page d'accueil :
-
Liste des chaînes
Ce widget affiche une liste des chaînes principales de votre Nudgis et permet de déplier l'arborescence de ces chaînes.
-
Personnalisé
Ce widget vous permet d'intégrer du contenu personnalisé à l'aide d'un éditeur de texte.
La mise en forme est facilitée par l'éditeur de texte riche :
-
Élément
Le widget Élément permet d'ajouter un élément pour le rendre accessible directement depuis la page d'accueil (vidéo, chaîne,...)
Visionner la liste des lives à l'intérieur : Permet d'afficher une liste de liens pointant vers les diffusions en direct en cours. Cette liste sera le seul élément affiché dans le widget
Grande vignette : Permet d'utiliser la vignette avec la plus grande résolution disponible, cette option n'est à utiliser que si la vignette standard est trop petite
Position de la vignette : Permet de choisir si la vignette de l'élément sélectionné s'affichera à gauche, à droite ou au centre du widget
Afficher le titre : Affiche le titre de l'élément sélectionné dans le widget, sous la vignette. Notez que si vous conservez l'affichage de l'en-tête, le titre sera affiché en double (dans l'en-tête et dans le widget)
Afficher les informations : Affiche des informations sur l'élément sélectionné (chaîne parente, intervenant, date de création,...)
Afficher la description : Affiche dans le widget le contenu du champ description de l'élément sélectionné
Élément à afficher : Permet de déterminer quel élément sera affiché dans le widget. Il pourra s'agir de la vidéo ou la chaîne la plus vue (sur l'ensemble de la plateforme ou uniquement sur le dernier mois), la dernière chaîne ou vidéo ajoutée ou bien un élément spécifique que vous souhaitez voir apparaître sur la page d'accueil
-
Diffusions en direct
Ce type d'élément affiche une liste des diffusions en direct en cours sur la plateforme s'il y en a. Il est redondant avec l'option "Visionner la liste des lives à l'intérieur" du widget Élément.
-
Image
Grâce au type de widget "Image" vous pouvez, comme son nom l'indique, importer une image depuis votre ordinateur vers votre page d'accueil. Le champ "Texte alternatif" du widget permet d'ajouter une brève description de l'image qui sera lue par les lecteurs d'écrans (utilisés principalement par les utilisateurs ayant des déficiences visuelles) ou les moteurs de recherche.
-
Titre
Ce widget permet d'ajouter une barre de titre pour séparer les différents blocs de la page et clarifier la lecture de ces derniers.
-
Liste de vidéos
Ce widget affiche des listes de vidéos réparties en plusieurs onglets. Il vous est possible de choisir quels onglets seront affichés. Les choix sont les suivants : dernières vidéos ajoutées, vidéos les plus vues (depuis toujours ou bien le mois dernier), vidéos les plus commentées (depuis toujours ou bien le mois dernier), ou encore le nuage de mots-clés (généré à partir des mots-clés extraits des vidéos de la plateforme par l'OCR).
Le bouton Afficher plus de vidéos de l'onglet Dernières vidéos ajoutées redirige vers la page des derniers médias.
Tous ces types d'éléments ont des options communes qui peuvent être réglées bloc par bloc.
Vous pouvez accéder aux paramètres d'un widget en cliquant sur cet icône , dans le coin supérieur droit de l'élément :
Les réglages du widget apparaissent, révélant des options communes à tous les types de blocs :
Widget transparent : Permet de rendre le widget transparent (rend l'arrière-plan visible au travers du widget)
Pas d'en-tête de widget : Permet d'obtenir un widget sans titre
Visible pour : Permet de choisir pour quels types d'utilisateurs ce widget sera visible (authentifiés, non-authentifiés ou les deux)
Mode d'affichage : Permet de déterminer pour quelles langues ce widget sera affiché
Titre* : Détermine le titre de votre Widget, affiché en haut de l'élément
Lien* : Contient un lien qui sera ouvert suite à un clic sur le titre. (Avec l'option suivante vous pourrez définir si le lien doit s'ouvrir dans un nouvel onglet ou non)
*Ces deux dernières options seront inopérantes si l'en-tête du widget est désactivé.
Vous savez maintenant comment paramétrer votre page d'accueil, nous allons voir à présent comment fonctionne le paramétrage d'apparence du site.
Personnalisation graphique
Les paramètres de personnalisation graphique globaux se trouvent dans Menu > Administration > Paramètres du site > Personnaliser l'apparence.
Le premier onglet permet de régler les couleurs de la plateforme. Vous remarquerez un encart sur la partie droite de la page. Il permet de visualiser les changements que vous effectuez en direct :
Les changements sont également visibles sur le reste de la page de configuration de l'apparence mais ne seront appliqués que lorsque vous sauvegarderez vos modifications.
Couleur
Nous allons voir tout d'abord le fonctionnement des boutons de choix des couleurs. Ils sont identiques pour tous les paramètres de modification des teintes.
Chaque paramètre est composé de deux blocs : la couleur active (1) et la valeur par défaut (2).
Pour modifier le coloris actif vous pouvez entrer un code couleur dans le champ texte ou bien cliquer sur le bloc coloré et sélectionner une teinte parmi les choix proposés.
Pour revenir à la valeur par défaut il suffit de cliquer sur le bloc coloré correspondant
Pensez bien à sauvegarder vos changements pour qu'ils soient appliqués.
Voyons maintenant à quoi correspond chaque élément.
- Thème : Vous pouvez choisir entre un thème sombre ou clair pour commencer votre paramétrage, ce qui n'était possible dans les anciennes versions qu'en utilisant des CSS personnalisés. Le thème du site est appliqué à tous les utilisateurs.
- Couleur principale : Change la couleur des principaux boutons de Nudgis, dont voici un échantillon ci-dessous (en bleu).
- Couleur principale de contraste : Change la couleur du texte des boutons principaux, ci-dessous en blanc.
- Couleur principale du texte : Change la couleur des liens et des icônes (ici en bleu).
- Couleur secondaire : Change la couleur des messages d'information, du bouton de sauvegarde, et de l'indicateur de stockage utilisé par l'utilisateur (ci-dessous en vert).
- Couleur secondaire de contraste : Change la couleur du texte dans les éléments de la section précédente (en noir ici).
- Couleur du texte secondaire : Change la couleur du bouton de restauration des médias dans la corbeille.
- Couleur d'erreur : Change la couleur des erreurs, notamment la barre de progression des transcodages lorsque ceux-ci échouent (ici en rouge).
- Couleur d'erreur de contraste : Change la couleur du texte des erreurs lorsque celles-ci sont surlignées par la couleur d'erreur (en noir ci-dessous).
- Couleur du texte d'erreur : Couleur du texte d'erreur ou d'avertissement lorsque aucun surlignage n'est présent. On la retrouve notamment sur le bouton Supprimer dans le menu d'actions sur les média lorsqu'on navigue dans le catalogue.
Logo
Cet onglet permet de modifier le logo du site et le favicon en remplaçant ceux existants. Importez votre image (le format recommandé est PNG) qui ne doit pas dépasser 300 pixels de large et 55 pixels de haut.
Après avoir ajouté votre fichier image, la prévisualisation ne fonctionnera pas immédiatement. Il faudra sauvegarder les changements pour que le nouveau logo soit affiché.
Pour revenir au logo par défaut cochez la case "Supprimer l'image courante" puis sauvegardez.
Vous avez également la possibilité de modifier la taille du logo (parmi trois choix : petit, standard et grand), cela affectera également la taille de l'en-tête de la page.
Polices
Vous pouvez utiliser différents types de polices mais celles-ci sont définies par votre navigateur web. Les polices utilisées par défaut sont Lato, Arial et Sans-Serif.
Avancé (CSS)
Sur cet onglet vous aurez la possibilité d'ajouter des fichiers comme des images ou des polices que vous pourrez utiliser dans votre CSS personnalisé.
Dans la section Surcharger le style, vous pouvez ajouter du code CSS personnalisé qui vous permettra d'ajuster les éléments qui ne sont pas disponibles dans les menus vus précédemment.
Les couleurs du lecteur UbiCast
Le dernier onglet de la page de paramétrage de l'apparence concerne le lecteur de Nudgis. Nous allons voir les différents éléments qui peuvent être modifiés ci-après.
Pour visualiser au mieux les changements nous utiliserons la couleur orange pour les captures d'écran dans cette partie.
- Couleur d'arrière-plan du lecteur : c'est l'arrière-plan de votre vidéo, celui qui sera visible entre les sources en mode RichMedia Dynamique.
- Couleur d'arrière plan des contrôles : Ce paramètre modifie la couleur de la barre de contrôle (en bas du lecteur) ainsi que du bouton lecture.
- Couleur des contrôles au survol : c'est la couleur des boutons de contrôle de lecture lorsqu'on les survole avec le curseur de la souris.
- Couleur de la police des contrôles : c'est la couleur des icônes des contrôles ainsi que de l'indicateur de temps.
Couleur de la barre de défilement : Il s'agit de la barre de progression de la lecture située dans les contrôles du lecteur.
Il est également possible d'appliquer ces paramètres à des chaînes ou des médias individuellement. Cela n'impactera pas l'apparence du reste du site.
Merci d'avoir suivi cet article, vous pouvez maintenant modifier l'apparence de Nudgis à votre guise. N'hésitez pas à consulter la section Nudgis de notre documentation pour en apprendre plus sur notre solution.
Commentaires
0 commentaire
Vous devez vous connecter pour laisser un commentaire.