Personnalisation des thèmes du portail

Le thème par défaut de vos portails peut être personnalisé : les configurations de style sont gérées depuis la page Portail > Style dans votre back office.

L’en-tête contient un menu déroulant Action en cours permettant de gérer la version du thème (voir Thèmes de contrôle de version ci-dessous). Trois boutons importants sont également affichés dans l'en-tête :

1. Enregistrer enregistre les nouvelles configurations

2. Aperçu ouvre un aperçu dans un nouvel onglet, et qui montre votre portail avec les configurations nouvellement appliquées

3. Rendre cette version active applique les configurations nouvellement appliquées et met à jour le thème en direct sur votre portail

Un bloc composé de quatre onglets permet ensuite de configurer les différentes parties du thème (voir Personnaliser un thème de portail ci-dessous) :

1. Thème du portail : une interface d’édition sans code qui permet d’ajuster les éléments via le panneau de gauche tout en visualisant le rendu en direct à droite

2. Feuille de style : pour ajouter plus de style au portail avec CSS

3. En-tête : pour modifier l'en-tête avec du code HTML

4. Pied de page : pour modifier le pied de page avec du code HTML

Les thèmes du portail sont versionnés, ce qui signifie que chaque nouveau thème personnalisé possède un numéro de version qui lui est attribué. Une fois qu'un thème est terminé et mis en ligne, une autre version est automatiquement créée, qui est le nouveau brouillon de thème sur lequel travailler jusqu'à ce qu'il soit prêt à être mis en ligne.

L'action en cours Le menu déroulant affiché dans l'en-tête indique la version en cours de création. Il permet de sélectionner le thème précédent qui a déjà été mis en ligne.

Une fois qu'un thème est en ligne, il est verrouillé et ne peut plus être modifié. Seule la dernière version brouillon peut être modifiée.

En travaillant sur la dernière version préliminaire du thème du portail, il est possible de prévisualiser à quoi ressemblera le portail avec ce nouveau thème. Le bouton Aperçu ouvre un nouvel onglet qui montre à quoi ressemblera le portail configuré avec le thème préliminaire.

Seuls les utilisateurs autorisés à modifier les propriétés de l'espace de travail peuvent prévisualiser la dernière version du thème. Si vous partagez l'URL avec d'autres utilisateurs qui n'ont pas reçu les autorisations appropriées, ils verront simplement le portail avec le thème actif actuel.

Le thème du portail est structuré en trois blocs. Chaque bloc comprend un éditeur à gauche et un aperçu en direct à droite. L’aperçu se met à jour instantanément au fur et à mesure de vos modifications, ce qui vous permet de garantir la cohérence de votre charte graphique en harmonisant les couleurs et la typographie avec l’identité de votre organisation.

Vous pouvez interagir librement avec les éléments de l’aperçu pour visualiser leur comportement — par exemple au survol ou lors d’un clic.

La section Générale comporte deux onglets.

L’onglet Apparence générale permet de configurer l’aspect global du portail :

• Accent définit la couleur principale de la palette (utilisée pour les états actifs ou au survol des éléments interactifs). Cette couleur s’adapte automatiquement sur l’ensemble du portail. Vous pouvez également copier les codes couleur pour maintenir la cohérence visuelle dans les autres parties du thème.

• Fond détermine la couleur de fond des pages.

• Section ajuste la couleur de fond des zones de contenu, comme les blocs regroupés à l’intérieur d’une page.

• Séparateur contrôle la couleur des lignes servant à structurer la page, ainsi que des bordures encadrant les différentes sections.

• Arrondi des coins définit le niveau d’arrondi appliqué aux composants du portail. Quatre options sont proposées, allant des angles droits aux coins totalement arrondis.

• Bordure personnalise la couleur des contours des champs de formulaire. Elle permet également de garantir un contraste suffisant pour une meilleure accessibilité.

L’onglet Typographie permet de configurer le style du texte :

• Sélectionnez votre police dans le menu Police de caractères, dans les sections Titres et Les textes. Les options suivantes sont disponibles :

  • Police système : la police par défaut de votre navigateur.

  • Google Fonts : notamment Roboto, Raleway, Poppins, Overpass, Open Sans, Noto Sans, Montserrat, Figtree et Archivo.

  • Polices personnalisées : les polices ajoutées dans Portail > Images & Polices de caractères. Elles apparaissent avec le label "Polices personnalisées" sous leur nom.

Si vous avez déjà défini des polices dans votre feuille de style CSS, nous vous recommandons de les supprimer et d’utiliser cette configuration no code. Elle est plus simple à gérer et se met automatiquement à jour.

• Définissez le poids, la taille et la couleur pour les titres (H1, H2, H3), ainsi que la taille et la couleur pour les textes primaires et secondaires. Les liens héritent de la taille du texte environnant (primaire ou secondaire).

La section Boutons permet de définir l’apparence des boutons afin d’assurer une cohérence visuelle entre les types de boutons primaires, secondaires et tertiaires.

Vous pouvez définir un arrondi des coins spécifique pour les boutons, indépendamment de celui configuré dans la section Générale. Quatre niveaux sont proposés, des angles droits aux coins entièrement arrondis.

Chaque type de bouton dispose de son propre onglet de personnalisation :

• Boutons primaires : ce sont les appels à l’action majeurs. Ils utilisent un fond coloré et un texte bien contrasté pour attirer l’attention.

• Boutons secondaires : ils représentent des actions alternatives. Leur style est plus léger, souvent avec un simple contour, afin de rester visibles sans concurrencer le bouton primaire.

• Boutons tertiaires : ils correspondent aux actions les moins mises en avant. Généralement sans fond ni bordure, ils se présentent sous forme de texte (avec ou sans icône) et conviennent aux actions secondaires ou de faible priorité.

Chaque type de bouton propose ses propres options de personnalisation. Si une option n’apparaît pas, cela signifie que ce style ne s’applique pas à ce type de bouton, afin de garantir une cohérence visuelle et d’éviter les erreurs d’ergonomie.

• Fond définit la couleur de fond dans les états normal et survolé. Seuls les boutons primaires peuvent avoir un fond en état normal. L’état au survol est personnalisable pour tous les types.

• Bordure définit la couleur du contour des boutons secondaires.

• Texte et icône règle la couleur du libellé et des éventuelles icônes. Cette option est disponible pour tous les types de boutons.

La section Cartes du catalogue permet de définir l’apparence des cartes du catalogue, qui constituent la première vitrine de vos assets.

• Fond définit la couleur de fond de la carte, à la fois pour l’état normal et l’état au survol.

• Bordure détermine la couleur du contour de la carte, également personnalisable pour les deux états.

• Arrondi des coins propose quatre niveaux d’arrondi, des angles droits aux coins entièrement arrondis.

La mise en page des cartes se configure dans l’espace dédié Catalogue > Paramètres.

Lors de la personnalisation du thème du portail, une vérification d’accessibilité est effectuée automatiquement. Si certains choix de style présentent un contraste de couleur insuffisant, une bannière d’avertissement s’affiche en haut de la page. Des points rouges indiquent les éléments concernés. Pour corriger ces problèmes, cliquez sur Plus de détails dans le message d’avertissement afin d’obtenir des recommandations.

L’outil vérifie le contraste des couleurs du texte et des éléments visuels selon les normes WCAG niveau AA. Le texte standard doit présenter un ratio de contraste d’au moins 4,5:1 avec son arrière-plan, et les éléments visuels un ratio d’au moins 3:1 avec les couleurs environnantes.

L'onglet Feuille de style affiche un éditeur dans lequel ajouter des règles de style CSS pures. Il permet de pousser encore plus loin la personnalisation d'un thème de portail.

Toutes les règles ajoutées dans cet onglet auront priorité sur les configurations définies dans les autres onglets du thème.

Pour modifier le style d'un élément, recherchez la classe de l'élément et modifiez la propriété CSS souhaitée. Les noms de classe s'écrivent sous la forme block, element, modifier : .ods-block[--blockmodifier][__element][--elementmodifier].

Lorsque vous utilisez des images et des polices spécifiques pour la personnalisation de l'espace de travail, n'hésitez pas à les importer dans Portail > Images et polices de caractères. Cela vous permet de copier facilement les URL des éléments et de les coller dans le code CSS.

Les onglets En-tête et Pied de page affichent chacun un éditeur dans lequel ajouter du code HTML pur. Bien que l'en-tête et le pied de page puissent être partiellement personnalisés via l'onglet Thème de portail, ces onglets vous permettent de pousser encore plus loin la personnalisation de ces zones du portail. Notez que la couleur de fond de l’en-tête et les couleurs des liens se définissent dans les sélecteurs de couleur.

L'en-tête et le pied de page sont tous deux intégrés dans des applications AngularJS indépendantes, ce qui signifie que les directives Angular standard telles que ng-if, ng-class, ng-show et ng-hide peuvent être utilisées.

Pour réduire l'en-tête dans un menu latéral cliquable en dessous d'une certaine largeur de fenêtre d'affichage, utilisez la directive ods-responsive-menu.

Les espaces réservés peuvent également être utilisés lors de la personnalisation de l'en-tête et du pied de page. Ils seront remplacés par le contenu spécifié dans les options de personnalisation de espace de travail telles que les éléments de menu, les sélecteurs de langue et les logos.

Les espaces réservés suivants sont disponibles dans l'onglet En-tête :

Les espaces réservés suivants sont disponibles dans l'onglet Pied de page :

Veuillez noter que JavaScript n'est pas autorisé pour des raisons de sécurité.