Personnaliser le thème et l’icône du portail

Important

La personnalisation du thème du portail n’est pas disponible sur les domaines freemium (domaines créés via la page Essayez ODS du site d’OpenDataSoft). Si votre domaine est un domaine freemium mais que vous voudriez tout de même avoir la fonctionnalité de personnalisation de thème activée, écrivez nous !

L’interface de gestion de thèmes d’OpenDataSoft se trouve dans le back office du domaine. Pour y accéder, cliquez sur la section Apparence de la barre de navigation, puis sur le lien thème.

Note

Pour accéder à la page des thèmes, vous devrez être autorisé à changer les propriétés du domaine. Voir Gérer la sécurité de votre domaine pour plus de détails.

../_images/theme__interface--fr.png

À l’aide des différents formulaires de cette page, vous pourrez personnaliser tous les aspects de votre portail : changez simplement les couleurs ou modifiez totalement la disposition de celui-ci.

Versioning

Avant de s’intéresser aux nombreuses manières de personnaliser le thème du portail, il est primordial de comprendre que tout ce que vous ferez sur cette page générera une nouvelle version. En d’autres termes, un numéro de version est attribué à votre travail et vous pouvez en créer une version à tout moment. Vous travaillerez toujours sur la dernière version (considérez-la comme un brouillon), mais vous pouvez décider de mettre en ligne n’importe quelle version (c’est-à-dire, l’appliquer à votre portail). Si vous mettez la dernière version en ligne, une autre version sera créée et deviendra votre nouveau brouillon. Seule la dernière version peut être modifiée, toutes les autres versions sont en lecture seule.

Pendant que vous travaillez sur la dernière version, vous pouvez afficher des aperçus de vos modifications en cliquant sur le bouton Aperçu. Cela ouvrira une nouvelle fenêtre contenant votre portail avec la version actuelle du thème appliquée.

Note

Seuls les utilisateurs habilités à modifier les propriétés du domaine peuvent créer des aperçus de la dernière version du thème. Même si vous partagez l’URL de l’aperçu avec d’autres utilisateurs, ils ne verront que la version qui est en ligne.

Note

Vous pouvez générer un aperçu de la dernière version du thème à tout moment et quelle que soit la page du back office du portail en ajoutant le paramètre stage_theme=true à l’URL.

../_images/theme__versioning--fr.png

Le sélecteur de versions vous indiquera de manière explicite si vous travaillez sur la dernière version ou si vous visualisez une version précédente, et la version qui est en ligne.

Options de personnalisation

Options de disposition

La disposition du portail repose sur une grille à 12 colonnes s’inspirant grandement du framework Bootstrap CSS et inclut donc quelques variables internes utilisées via ses CSS. Cet onglet vous permet de définir la valeur de certaines de ces variables.

../_images/theme__layout-options--fr.png

Les variables pouvant actuellement être écrasées sont la largeur des espacements et les points de rupture responsive.

La largeur des espacements correspond à l’espace qui sépare les colonnes, les lignes et les cadres adjacents.

Les points de rupture responsive sont les largeurs d’écran (en pixels) qui déclenchent un changement de disposition pour mieux correspondre à l’espace disponible. Quatre modes sont disponibles : très petit, petit, moyen et grand. Cela veut donc dire qu’il y a trois points de rupture : de très petit à petit, de petit à moyen et de moyen à grand. Ces modes sont également appelés téléphone, tablette, moniteur et grand moniteur.

Note

Gardez à l’esprit que le mode téléphone ne signifie pas que l’utilisateur utilise un téléphone, mais que l’espace d’affichage disponible dans le navigateur de l’appareil est restreint.

Pour réinitialiser une variable, il vous suffit de cliquer sur le bouton effacer qui se trouve à côté.

Couleurs

Comme pour les options de disposition, la plateforme OpenDataSoft utilise quelques variables de couleur pour le style des éléments du portail. Vous pouvez utiliser les entrées de couleur de cet onglet pour en définir certaines et ainsi personnaliser votre portail aux couleurs de votre marque en quelques clics.

../_images/theme__colors--fr.png

Note

Ces variables écraseront les couleurs du thème par défaut, mais les règles de style personnalisées que vous pouvez indiquer dans l’onglet feuille de style resteront prioritaires sur celles-ci. Vos choix de couleurs peuvent donc rester invisibles si vous avez spécifié des règles CSS plus précises.

Feuille de style

Si la personnalisation des couleurs ne vous suffit pas et que vous souhaitez faire des changements plus poussés, vous devrez écrire vos propres CSS. Vous pouvez justement indiquer vos propres règles de style dans cet onglet. Ces règles s’appliqueront en sus des règles par défaut d’OpenDataSoft et prévalent sur celles-ci.

../_images/theme__stylesheet--fr.png

Si vous souhaitez utiliser des images et des polices spéciales, vous pouvez les télécharger sur la plateforme via la page de gestion des ressources. Vous pourrez ensuite copier les URL de ces ressources et les coller dans votre code CSS.

Important

Pour changer le style d’un élément, il vous suffit de trouver la classe de celui-ci et de modifier la propriété CSS souhaitée. Cette opération n’aura aucune autre répercussion (elle agit uniquement sur ce nom de classe) et fonctionne à tous les coups (car l’arborescence est majoritairement plate).

Tout cela est possible car l’intégralité du code CSS d’OpenDataSoft est écrit en suivant la méthodologie BEM et porte le préfixe ods- pour éviter les conflits avec vos styles et faciliter les remplacements. Une excellente introduction à cette méthode est disponible sur le site Web très utile de CSS Tricks.

Pour faire simple, les noms des classes se présentent sous la forme block, element, modifier (donc BEM) .ods-block[–blockmodifier][__element][–elementmodifier]. L’arborescence ne comporte que deux sélecteurs au maximum et les styles sont au plus proche des éléments concernés.

Fiche de catalogue

Sur la page de catalogue de votre domaine, chaque jeu de données est représenté par une fiche de catalogue. Ces fiches présentent quelques éléments standard, mais vous pouvez totalement changer leur apparence, ajouter des liens ou implémenter de nouveaux comportements.

Voici quelques exemples de fiches de catalogue :

../_images/theme__catalog-card-example-central.png ../_images/theme__catalog-card-example-datacorsica.png ../_images/theme__catalog-card-example-toulouse.png

Nous fournissons des directives pratiques pour récupérer et inclure facilement des informations sur un jeu de données. Ces directives sont accompagnées d’un style standard que vous pouvez écraser via l’onglet Feuille de style.

../_images/theme__catalog-card--fr.png

Les directives sont les suivantes :

  • ods-catalog-card doit envelopper toute la fiche 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 pertinente.

  • ods-catalog-card-body offre des solutions pour mettre en forme et gérer les situations complexes (jeux de données sans enregistrements, proxy d’API, etc.).

  • ods-catalog-card-title, ods-catalog-card-description et ods-catalog-card-keywords sont explicites.

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

    <ods-catalog-card-metadata-item item-title="Data" item-key="records_count"></ods-catalog-card-metadata-item>
    
Clés d’objet de métadonnées

Clé d’objet

Titre de l’objet

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

Développement hors connexion

Nous avons vu dans la section précédente que vous pouvez écrire des règles CSS détaillées qui remplaceront le thème par défaut du portail. Néanmoins, tout rédiger dans le navigateur peut se révéler pénible, en particulier pour les développeurs aguerris habitués à utiliser des éditeurs de texte sophistiqués. Étant donné que la plateforme accepte uniquement du code CSS pur, vous devrez vous assurer manuellement que vos règles comportent les préfixes fournisseur corrects et qu’elles ne permettront pas l’utilisation de fonctionnalités que les développeurs d’applications client sont habitués à employer avec des pré-processeurs, telles que les variables et l’imbrication.

C’est précisément pour cela que nous avons créé une API qui permet aux utilisateurs possédant une clé d’API de thème de rédiger localement leurs propres règles de style avec les outils de leur choix. Il leur suffit ensuite de pousser le code CSS résultant sur la plateforme. Nous avons regroupé un client pour cette API, ainsi que des outils courants (moins de pré-processeurs et de préfixeurs automatiques) dans le kit de développement du portail OpenDataSoft.

Le kit de développement du portail ODS est un projet open source distribué gratuitement sur Github, n’hésitez pas à le télécharger et à l’adapter à votre processus de développement.

Clé d’API de thème

Vous trouverez la clé d’API de thème sur la page de personnalisation du thème du portail. Pour obtenir la clé, développez la section Clé d’API pour le développement hors connexion et copiez-la.

../_images/theme__offline-dev--fr.png

Avertissement

En générant une nouvelle clé, vous révoquerez les clés précédemment générées. Par conséquent, les développeurs utilisant une ancienne clé ne pourront plus pousser leur travail sur la plateforme. N’oubliez donc pas de transmettre la nouvelle clé à chaque développeur travaillant sur le thème de votre portail afin d’assurer une continuité optimale du développement.