Personnalisation des thèmes du portail

Le thème par défaut de vos portails peut être personnalisé, non seulement en termes de mise en page et de couleurs, mais également en ce qui concerne des zones spécifiques telles que l'en-tête, le pied de page et les fiches de catalogue.

Les configurations de style sont gérées depuis la page Portail > Style dans votre back office.

L'onglet Style comporte trois blocs principaux :

1. L'en-tête, qui affiche un menu déroulant « Action en cours » pour gérer le contrôle de version (voir Thèmes de contrôle de version ci-dessous). Trois boutons importants sont également affichés dans l'en-tête :
   1. Enregistrer, pour enregistrer les nouvelles configurations
   2. Aperçu, pour ouvrir dans un nouvel onglet un aperçu de votre portail avec les configurations nouvellement appliquées
   3. Make live, pour appliquer les configurations nouvellement appliquées et mettre à jour le thème en direct sur votre portail

2. La clé API pour le bloc de gestion du développement hors ligne, qui permet l'utilisation et la génération de nouvelles clés API.

   A noter qu'il est possible de créer des feuilles de style en dehors de la plateforme, avec n'importe quel outil de développement web standard, et de les pousser vers la plateforme à l'aide d'une clé API. Pour une utilisation plus simple et plus rapide, le kit de développement du portail Opendatasoft est à votre disposition : il s'agit d'un projet open-source créé par Opendatasoft et téléchargeable sur Github.Pour rechercher et utiliser une clé API de thème, cliquez sur le bloc Clé API pour le développement hors ligne pour le développer. La clé API actuelle s'affiche dans le bloc, prête à être copiée et utilisée.Il est également possible de générer une nouvelle clé API en cliquant sur le bouton Générer une nouvelle clé. Soyez toutefois prudent lors de la génération de nouvelles clés API : seule la clé actuelle peut être utilisée, ce qui signifie que la génération d'une nouvelle clé API annule toutes les clés précédentes.

3. Un bloc de six onglets, chacun permettant de configurer une partie d'un thème de portail Opendatasoft (voir Personnaliser un thème de portail ci-dessous) :

   • Options de mise en page, pour modifier la mise en page générale du portail

   • Couleurs, pour changer les couleurs des arrière-plans, des textes, des bordures, des liens, etc.

   • Feuille de style, pour ajouter plus de style au portail avec CSS

   • En-tête, pour modifier l'en-tête avec du code HTML

   • Pied de page, pour modifier le pied de page avec du code HTML

   • Fiche catalogue, pour modifier les fiches catalogue avec 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 les thèmes précédents qui ont 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.

L'onglet Options de mise en page permet de personnaliser la mise en page du portail, qui repose par défaut sur un système de grille de 12 colonnes hérité du framework CSS Bootstrap.

Plus précisément, dans cet onglet, il est possible de modifier :

• La largeur de la gouttière, qui est l'espace, en pixels, entre les différents éléments qui composent une interface du portail (colonnes, lignes et cases)

• Les points d'arrêt responsive, qui sont les différentes largeurs d'écran, en pixels, auxquelles la mise en page doit changer pour s'adapter à l'espace disponible (par exemple, la mise en page du portail doit différer selon qu'il est utilisé à partir d'un téléphone mobile ou d'un ordinateur de bureau, car l'écran d'un téléphone mobile est beaucoup plus petit que celui d'un ordinateur de bureau). Une interface Web qui s'adapte en fonction de la largeur de l'écran est en effet appelée « responsive ». Il existe trois points d'arrêt configurables entre quatre tailles d'écran standard associées aux appareils courants :

1. Du mobile à la tablette, pour passer d'un écran extra-petit à un petit écran

2. De la tablette à l'ordinateur de bureau, pour passer d'un petit écran à un écran moyen

3. Du bureau au grand bureau, pour passer d'un écran moyen à un grand écran

Les appareils mobiles, tablettes, ordinateurs de bureau et grands ordinateurs de bureau sont utilisés comme référence car ce sont des appareils courants qui illustrent assez bien les quatre tailles d'écran standard (très petit, petit, moyen et grand) que l'on peut rencontrer. Gardez à l'esprit que mobile, par exemple, ne signifie pas que l'utilisateur utilise réellement un appareil mobile, mais plutôt que le navigateur utilisé par l'utilisateur n'offre qu'une zone d'affichage très petite.

Pour modifier une option de mise en page :

1. Écrivez une nouvelle largeur, en pixels, dans la zone de texte choisie.

2. Cliquez sur le bouton Enregistrer dans le coin supérieur droit.

Pour réinitialiser une option de mise en page à sa valeur par défaut, cliquez sur le bouton de la corbeille.

L'onglet Couleurs vous permet de personnaliser les couleurs utilisées dans les textes et les liens, les arrière-plans et les bordures du portail.

Si une feuille de style personnalisée a été créée pour le portail, les règles CSS qu'elle contient auront priorité sur les couleurs définies dans l'onglet Couleurs.

La couleur des éléments suivants d'un portail Opendatasoft peut être configurée dans cet onglet :

Pour modifier la couleur d’un thème :

1. Dans la zone de texte choisie, écrivez le code hexadécimal de la nouvelle couleur ou cliquez sur le bouton de couleur pour choisir une nouvelle couleur en utilisant soit les « Belles couleurs », soit la « Roue chromatique ».

2. Cliquez sur le bouton Enregistrer dans le coin supérieur droit.

Pour réinitialiser la couleur du thème du portail actuellement en ligne, cliquez sur le bouton Réinitialiser.

Les couleurs du thème peuvent être utilisées dans la feuille de style du domaine, en tant que variables CSS : var(--variable-name)Les variables disponibles sont : text, links, titles, page-background, highlight, boxes-background, boxes-border, section-titles, section-titles-background, header-background, header-links, footer-background et footer-links.Ces variables CSS sont compatibles avec tous les navigateurs car la plateforme Opendatasoft remplace automatiquement toutes les variables par leurs valeurs de couleur de thème réelles.

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 télécharger en tant qu'éléments dans la plateforme (voir Ajout d'éléments). 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 Couleurs, ces onglets vous permettent de pousser encore plus loin la personnalisation de ces zones du portail.

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é.

L'onglet Fiche catalogue affiche un éditeur dans lequel ajouter du HTML pur. Il permet de personnaliser les fiches catalogue affichées dans le catalogue du portail, et qui représentent les jeux de données publiés de ce portail (voir Exploration d'un jeu de données à partir du catalogue).

Les directives suivantes permettent de récupérer des informations relatives à un jeu de données, qui pourront être incluses dans la fiche catalogue.

Les directives utilisées dans l'onglet Fiche catalogue sont livrées avec un style standard, qui peut être modifié dans l'onglet Feuille de style.