Personnalisation des thèmes du portail
Mis à jour le par Patrick Smith
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 :
- 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 - 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. - 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
Thèmes de versionnage
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.
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.
Personnaliser un thème de portail
Options de mise en page
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 :
- Du mobile à la tablette, pour passer d'un écran extra-petit à un petit écran
- De la tablette à l'ordinateur de bureau, pour passer d'un petit écran à un écran moyen
- Du bureau au grand bureau, pour passer d'un écran moyen à un grand écran
Pour modifier une option de mise en page :
- Écrivez une nouvelle largeur, en pixels, dans la zone de texte choisie.
- 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.
Couleurs
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.
La couleur des éléments suivants d'un portail Opendatasoft peut être configurée dans cet onglet :
Catégorie | Éléments configurables |
Texte |
|
Arrière-plan |
|
Les frontières |
|
Pour modifier la couleur d’un thème :
- 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 ».
- 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.
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.
Feuille de style
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.
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]
.
En-tête et pied de page
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.
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 :
Espace réservé | Information |
| Menu principal, avec liens vers les pages choisies |
| Menu contenant des liens vers la page de connexion et le compte utilisateur |
| Logo du portail configuré dans Branding |
| Marque du portail configurée dans Branding |
| Liens pour changer la langue du portail |
Les espaces réservés suivants sont disponibles dans l'onglet Pied de page :
Espace réservé | Information |
| Lien vers les Conditions Générales définies pour le portail, configurées dans les Mentions légales |
| Lien permettant aux utilisateurs de modifier leurs préférences en matière de cookies. Cet espace réservé est obligatoire pour activer la bannière de cookies. Pour plus d'informations, consultez la rubrique Gestion des informations légales. |
| Sélecteur de langue pour les langues spécifiées pour le portail |
| Logo Opendatasoft |
Fiche catalogue
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.
Directive | Information | ||||||||||||||||||||||||||
| Obligatoire. Enveloppe toute la carte de catalogue pour que les autres directives fonctionnent | ||||||||||||||||||||||||||
| Récupère le thème du jeu de données et inclut l'icône associée | ||||||||||||||||||||||||||
| Offre des solutions pour mettre en forme et gérer les situations complexes (par exemple, jeux de données sans enregistrements | ||||||||||||||||||||||||||
| Récupère le titre du jeu de données | ||||||||||||||||||||||||||
| Récupère les mots-clés définis pour le jeu de données | ||||||||||||||||||||||||||
| Récupère les mots clés définis pour le jeu de données | ||||||||||||||||||||||||||
| Prend des attributs Exemple : Le tableau ci-dessous répertorie toutes les clés d'objet de métadonnées disponibles :
|