Personnaliser les thèmes du portail

Le thème par défaut de tous les portails Opendatasoft peut être entièrement personnalisé : vous pouvez modifier la disposition, les couleurs, mais aussi des zones spécifiques comme les en-têtes, les pieds de page et les cartes de catalogue. Les configurations du thème sont gérées depuis la sous-section Apparence > Thème de l'interface d'administration.

../../_images/theme_interface.png

L'interface Thème se compose de 3 blocs principaux.

  • L'en-tête (1), qui affiche le titre de l'interface et un menu déroulant Action en cours pour gérer le versionnage (voir Versionner des thèmes). 3 boutons importants sont également présents dans l'en-tête :

    • Enregistrer, pour enregistrer les nouvelles configurations

    • Aperçu, pour ouvrir le portail Opendatasoft avec les configurations nouvellement appliquées dans un nouvel onglet

    • Rendre cette version active, pour définir les configurations nouvellement appliquées en tant que nouveau thème actif disponible sur le portail Opendatasoft

  • Le bloc de gestion Clé d'API pour le développement hors connexion (2), qui permet d'utiliser et de générer de nouvelles clés d'API (voir la remarque ci-dessous pour plus d'informations).

Remarque

Vous avez la possibilité de créer des feuilles de style en dehors de la plateforme (avec un outil de développement web standard, par exemple) et de les transmettre à la plateforme via une clé d'API. Pour une utilisation simplifiée 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 chercher et utiliser une clé d'API de thème, cliquez sur le bloc Clé d'API pour le développement hors connexion pour le développer. La clé d'API actuelle s'affiche dans le bloc pour que vous puissiez la copier et l'utiliser.

Vous pouvez également générer une nouvelle clé d'API en cliquant sur le bouton Générer une nouvelle clé. Faites toutefois preuve de vigilance lorsque vous générez de nouvelles clés d'API : seule la clé actuelle peut être utilisée, ce qui signifie que la génération d'une nouvelle clé d'API révoque toutes les clés précédentes.

Versionner des thèmes

../../_images/theme_versioning.png

Les thèmes du portail font l'objet d'un versionnage. Cela signifie que chaque nouveau thème personnalisé se voit attribuer un numéro de version. Dès qu'un thème est terminé et actif, une autre version est automatiquement créée : il s'agit du nouveau thème préliminaire sur lequel vous allez travailler jusqu'à ce qu'il soit actif.

Le menu déroulant Action en cours, situé dans l'en-tête, indique la version sur laquelle vous travaillez actuellement. Vous pouvez également y sélectionner d'anciens thèmes déjà actifs.

Important

Dès qu'un thème est actif, il est complètement verrouillé : il est impossible d'apporter d'autres modifications. Seule la dernière version préliminaire peut être modifiée.

Lorsque vous travaillez sur la dernière version préliminaire du thème du portail, vous pouvez obtenir un aperçu du portail avec ce nouveau thème. En effet, un bouton Aperçu, situé entre les boutons Rendre cette version active et Enregistrer, vous permet d'ouvrir un nouvel onglet avec le portail configuré avec le thème préliminaire.

Remarque

Seuls les utilisateurs disposant des droits de modification des propriétés du domaine peuvent prévisualiser la dernière version du thème. En cas de partage de l'URL avec d'autres utilisateurs n'ayant pas les permissions appropriées, le portail s'affichera avec le thème actif.

Personnaliser un thème du portail

Options de disposition

../../_images/theme_layout-options.png

L'onglet Options de disposition permet de personnaliser la disposition du portail. Par défaut, elle repose sur un système de grille à 12 colonnes, hérité du Bootstrap CSS framework.

Dans cet onglet, vous pouvez notamment modifier les éléments suivants :

  • la largeur des espacements, qui correspond à l'espace (en pixels) entre les différents éléments qui composent une interface du portail (colonnes, lignes et cadres), et

  • les points de rupture responsive, qui correspondent aux diverses largeurs d'écran (en pixels) qui déclenchent un changement de disposition pour mieux correspondre à l'espace disponible (par exemple, si vous accédez au portail depuis un ordinateur de bureau ou un téléphone, sa disposition devrait changer, puisque l'écran d'un téléphone est beaucoup plus petit que celui d'un ordinateur de bureau). De fait, une interface web qui s'adapte en fonction de la largeur de l'écran est qualifiée de "responsive". Il existe 3 points de rupture configurables entre 4 tailles d'écran standard associées aux périphériques courants :

    • Téléphone vers tablette : pour passer d'un écran très petit à un petit écran

    • Tablette vers bureautique : pour passer d'un petit écran à un écran moyen

    • Bureautique vers bureautique large : pour passer d'un écran moyen à un grand écran

Remarque

Téléphone, Tablette, Bureautique et Bureautique large sont utilisés comme références puisqu'il s'agit de périphériques courants qui illustrent plutôt bien les 4 tailles d'écran standard (très petit, petit, moyen et grand) disponibles. Gardez à l'esprit que Téléphone ne signifie pas que l'utilisateur se sert d'un périphérique mobile, mais que son navigateur offre une zone d'affichage très petite.

Pour modifier une option de disposition :

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

  2. Cliquez sur le bouton Enregistrer en haut à droite.

Pour rétablir la valeur par défaut d'une option de disposition, cliquez sur le bouton icon-trash.

Couleurs

../../_images/theme_colors.png

L'onglet Couleurs permet de personnaliser les couleurs utilisées dans les textes et les liens, les fonds et les bordures du portail.

Important

Si une feuille de style personnalisée a été créée pour le portail, les règles CSS qu'elle contient prévalent 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 :

Catégorie

Éléments configurables

Texte

  • Texte (principal)

  • Liens

  • Liens dans l'en-tête

  • Liens dans le pied de page

  • Titres

  • Titres de section

  • Surlignement (élément actif)

Fond

  • Fond de la page

  • Fond des boîtes

  • Fond des titres de section

  • Fond de l'en-tête

  • Fond du pied de page

Bordures

  • Bordure des boîtes

Pour modifier une couleur de thème :

  1. Dans la zone de texte choisie, ajoutez le code hexadécimal de la nouvelle couleur ou cliquez sur le bouton Couleur pour choisir une nouvelle couleur via Jolies couleurs ou Roue colorimétrique.

  2. Cliquez sur le bouton Enregistrer en haut à droite.

Pour réinitialiser la couleur du thème du portail actuellement actif, cliquez sur le bouton icon-reset.

Remarque

Les couleurs des thèmes peuvent être utilisées dans la fiche de style du domaine en tant que variables CSS :

var(--variable-name)

Les variables suivantes sont disponibles : 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 Internet, car la plateforme Opendatasoft les remplace automatiquement par la valeur réelle de la couleur du thème correspondante.

Feuille de style

../../_images/theme_stylesheet.png

L'onglet Feuille de style affiche un éditeur dans lequel vous pouvez ajouter des règles de style CSS pures. Il vous permet de personnaliser encore davantage un thème du portail. Toutes les règles ajoutées dans cet onglet prévaudront sur les configurations définies dans les autres onglets du thème.

Pour changer le style d'un élément, recherchez sa classe et modifiez la propriété CSS souhaitée. La syntaxe BEM (block, element, modifier) est utilisée pour écrire les noms de classe : .ods-block[--blockmodifier][__element][--elementmodifier].

Remarque

Lorsque vous utilisez des polices de caractères et des images spécifiques pour la personnalisation du domaine, n'hésitez pas à les charger en tant que ressources dans la plateforme (voir Ajouter des ressources). Cela permet de copier et de coller facilement les URL des ressources dans le code CSS.

Carte de catalogue

../../_images/theme_catalog-card.png

L'onglet Carte de catalogue affiche un éditeur dans lequel vous pouvez ajouter du code HTML pur. Il vous permet de personnaliser les cartes de catalogue présentes dans le catalogue du portail et représentant les jeux de données publiés de ce portail (voir Explorer un jeu de données depuis le catalogue).

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

Remarque

Les directives utilisées dans l'onglet Carte de catalogue ont un style standard, qui peut être modifié dans l'onglet Feuille de style.

Directive Information
ods-catalog-card

Obligatoire. Enveloppe toute la carte de catalogue pour que les autres directives fonctionnent

ods-catalog-card-theme-icon

Récupère le thème du jeu de données et inclut l'icône associée

ods-catalog-card-body

Offre des solutions pour mettre en forme et gérer les situations complexes (par exemple, jeux de données sans enregistrements)

ods-catalog-card-title

Récupère le titre du jeu de données

ods-catalog-card-description

Récupère la description du jeu de données

ods-catalog-card-keywords

Récupère les mots-clés définis pour le jeu de données

ods-catalog-card-metadata-item

Prend des attributs item-key``et ``item-title, récupère une propriété de métadonnées correspondant à item-key (voir le tableau ci-dessous) dans le jeu de données et l'inclut dans la page en utilisant item-title comme label. Pour améliorer le style, vous pouvez l'envelopper dans un élément .ods-catalog-card__metadata, mais ce n'est pas obligatoire.

Exemple : <ods-catalog-card-metadata-item item-title="Data" item-key="records_count"></ods-catalog-card-metadata-item>

Le tableau ci-dessous répertorie toutes les clés d'objet de métadonnées disponibles :

Clé d'objet

Information
license

Licence (affichée sous forme de lien si possible)

language

Langue du contenu

modified

Date de dernière modification

publisher

Nom du producteur

references

Lien vers la source originale des données

odi_certificate_url

Lien vers le certificat ODI

records_count

Nombre d'enregistrements dans le jeu de données (indépendamment des filtres)

attributions

Noms des propriétaires des données

source_domain

Pour les jeux de données fédérés uniquement, le nom du domaine duquel provient le jeu de données

source_domain_title

Pour les jeux de données fédérés uniquement, le titre d'origine du jeu de données sur son domaine source

source_dataset

Pour les jeux de données fédérés uniquement, l'identifiant d'origine du jeu de données sur son domaine source

explore.download_count

Nombre de téléchargements de données pour ce jeu de données