Personnaliser le thème

Vous consultez la documentation d'Apigee Edge.
Consultez la documentation Apigee X.
en savoir plus

Un thème est un ensemble de fichiers qui définit l'apparence d'un site. Au départ, le portail de services pour les développeurs est défini avec un thème par défaut que vous pouvez personnaliser. Vous pouvez ainsi sélectionner vos préférences concernant l'apparence de votre portail. Plus spécifiquement, vous pouvez modifier la couleur des liens, des arrière-plans, du texte et d'autres éléments du thème. Vous pouvez également modifier le message de bienvenue qui s'affiche sur la page d'accueil de votre portail des développeurs.

Vous pouvez personnaliser le thème via l'interface utilisateur du portail des développeurs ou en écrivant du code dans un fichier de thème personnalisé pour remplacer le fichier de thème par défaut.

Selon la version du portail des développeurs, vous avez le choix entre plusieurs thèmes:

Thème Description

Thème Apigee Responsive

Basé sur Bootstrap 3, le thème par défaut pour les versions ultérieures du portail. Ce thème est compatible avec les appareils dont la largeur est comprise entre 768 et 1 400 pixels. Toutes les fonctionnalités de Bootstrap 3 sont disponibles dans ce thème.

Remarque: Pour utiliser le thème Apigee Responsive, assurez-vous que le thème Bootstrap 7.x-3.0 est activé.

Thème Apigee DevConnect

Thème de portail par défaut antérieur au thème Apigee Responsive.

Les portails existants peuvent être mis à niveau vers le nouveau thème Apigee Responsive, mais vous devez d'abord vous assurer que tous les blocs, modèles et autres contenus sont compatibles avec Bootstrap 3, et que le thème Bootstrap 7.x-3.0 est activé.

Thème de base Apigee

Thème parent du thème Apigee DevConnect qui n'est pas destiné à être utilisé seul.

Définir le thème par défaut

Si votre portail utilise toujours l'ancien thème Apigee DevConnect, un avertissement peut s'afficher sous la forme suivante:

"Apigee DevConnect theme" is out of date 

Vous pouvez suivre la procédure suivante pour définir le thème par défaut du portail. Vous devez toujours tester un nouveau thème sur un système hors production avant de le déployer en production.

Pour définir le thème par défaut:

  1. Connectez-vous à votre portail en tant qu'utilisateur disposant des droits d'administrateur ou de création de contenu.
  2. Sélectionnez Appearance (Apparence) dans le menu d'administration de Drupal. La liste des thèmes activés s'affiche.
  3. Pour le thème que vous souhaitez utiliser par défaut, sélectionnez Définir par défaut.
    Pour utiliser le thème Apigee Responsive, assurez-vous que le thème Bootstrap 7.x-3.0 est également activé sur cette page.
  4. Enregistrez la configuration.

Personnaliser le thème Apigee Responsive

Cette section décrit comment configurer le thème Apigee Responsive, y compris:

  • Personnaliser les formulaires modals
  • Personnalisation des paramètres généraux

Pour personnaliser la prise en charge des formulaires modals:

Le portail utilise le module de bac à sable Drupal Bootstrap Formulaires pour afficher les formulaires Drupal sous forme de fenêtres modales. Par défaut, les formulaires de connexion et d'enregistrement fonctionnent comme des fenêtres modales. Vous pouvez désactiver cette fonctionnalité pour que ces formulaires apparaissent en tant que pages individuelles.

  1. Connectez-vous au portail des développeurs en tant qu'utilisateur disposant de droits d'administrateur.
  2. Sélectionnez les formulaires Configuration > Interface utilisateur > Bootstrap Modal dans le menu d'administration de Drupal.
  3. Activez ou désactivez la prise en charge modale des formulaires.
  4. Sélectionnez Enregistrer la configuration.

Pour personnaliser les paramètres généraux du thème Apigee Responsive:

  1. Connectez-vous à votre portail en tant qu'utilisateur disposant des droits d'administrateur ou de création de contenu.
  2. Sélectionnez Appearance dans le menu d'administration de Drupal. La liste des thèmes activés s'affiche.
  3. Dans la zone Apigee Responsive (thème par défaut) de la page, sélectionnez Settings (Paramètres) (ne sélectionnez pas le bouton "Settings" (Paramètres) en haut de la page).
  4. La page des paramètres du thème Apigee Responsive s'affiche.
  5. Le tableau suivant décrit les zones de cette page que vous pouvez utiliser pour configurer le thème. Si vous modifiez l'un de ces paramètres, sélectionnez "Enregistrer la configuration".

    Quartier Section Description

    Paramètres d'amorçage

    Composants

    Contrôlez l'affichage du fil d'Ariane, la position du menu principal (appelé Navbar dans les paramètres) et l'affichage des puits de région:

    • Fil d'Ariane: masquer/afficher le fil d'Ariane, activer/désactiver le lien "Accueil" dans le fil d'Ariane.
    • Navbar: définissez la position de la Navbar (menu principal) sur des positions fixes/statiques/normales, ce qui rend la mise en page plus dynamique.
    • Puces de région: ajoutez une classe de puits à n'importe quelle région du site pour ajouter un arrière-plan plus sombre à la région.

    JavaScript

    Contrôlez l'affichage des ancrages, des fenêtres pop-up et des info-bulles:

    • Ancres: corrigez les positions des ancrages et activez le défilement fluide.
    • Fenêtres pop-up: ces fenêtres ajoutent de petites superpositions de contenu à n'importe quel élément. Activez ou désactivez les fenêtres pop-up et configurez leur utilisation.
    • Info-bulles: configurez la façon dont les info-bulles sont utilisées. Vous pouvez forcer l'affichage de chaque info-bulle à droite, à gauche, en haut ou en bas de chaque élément du formulaire, et définir d'autres options d'affichage.

    Avancées

    Contrôle la manière dont le portail utilise BootstrapCDN pour mettre à jour les fichiers du thème d'amorçage. Vous pouvez désactiver la dépendance du portail à BootstrapCDN, mais vous devez ensuite fournir votre propre implémentation du framework Bootstrap.

    Paramètres DevConnect

    Définissez le message de bienvenue, les couleurs par défaut et la taille du logo qui s'affiche dans le menu principal.

    Remplacer les paramètres généraux

    Activer/Désactiver l'affichage

    Activer et désactiver l'affichage des différentes zones du portail

    Paramètres de l'image du logo

    Spécifie l'image affichée dans le menu principal.

    Paramètres des icônes de raccourci

    Spécifie l'image affichée dans la barre d'adresse d'un navigateur ou comme favori sur le portail.

Personnaliser le thème Apigee DevConnect

Le thème Apigee DevConnect est le thème par défaut du portail pour les anciennes versions du portail. Il peut être mis à niveau vers le nouveau thème Apigee Responsive. Toutefois, vous devez d'abord vous assurer que tous les blocs, modèles et autres contenus sont compatibles avec Bootstrap 3 avant d'effectuer la mise à niveau.

Pour personnaliser les paramètres généraux du thème Apigee DevConnect:

  1. Connectez-vous à votre portail en tant qu'utilisateur disposant des droits d'administrateur ou de création de contenu.
  2. Sélectionnez Appearance > Apigee DevConnect theme > Settings (Apparence > Thème Apigee DevConnect > Paramètres) dans le menu d'administration de Drupal. Les paramètres initiaux du thème s'affichent. Les paramètres de couleur sont spécifiés au format hexadécimal.

  3. Modifiez les paramètres selon vos préférences.
    Par exemple, ajoutez ou modifiez le message de bienvenue, ou changez la couleur d'arrière-plan de l'en-tête. La couleur d'arrière-plan de l'en-tête est initialement définie sur presque l'orange (#FF4300). Vous pouvez la remplacer par une autre couleur, par exemple le bleu (#0000FF).
  4. Lorsque vous avez terminé de modifier les paramètres, cliquez sur Enregistrer.

Personnaliser un thème en créant un sous-thème

Tous les fichiers et éléments qui définissent les thèmes par défaut fournis avec le portail se trouvent dans le répertoire profiles/apigee/themes dans le répertoire d'installation du portail. Ce répertoire se trouve à l'emplacement /var/www/html/profiles/apigee/themes si vous avez installé le portail à l'emplacement par défaut.

Pour modifier un thème afin de changer l'apparence du site, ne modifiez pas directement les fichiers de thème sous profiles/apigee/themes. Si vous le faites, vos modifications seront écrasées lors de la prochaine mise à niveau du portail.

Créez plutôt un sous-thème du thème que vous souhaitez modifier en copiant les fichiers du thème par défaut dans le répertoire /sites/all/themes. Pour obtenir des instructions sur les sous-thèmes, consultez la documentation Drupal à l'adresse https://www.drupal.org/node/225125.

La documentation Drupal spécifiée ci-dessus contient des informations détaillées sur la création d'un sous-thème, mais les étapes générales sont indiquées ci-dessous pour créer un sous-thème du thème Apigee Responsive:
  1. Copiez le dossier profiles/apigee/themes/apigee_responsive/apigee_responsive_starterkit dans le dossier /sites/all/themes.
  2. Renommez le dossier apigee_responsive_starterkit en YOUR_THEME_NAME.
  3. Renommez le fichier apigee_responsive_starterkit.info en NOM_DE_VOTRE_THÈME.info.
  4. Renommez css/apigee_responsive_starterkit.css en css/NOM_DE_VOTRE_THÈME.css.
  5. Renommez le fichier js/apigee_responsive_starterkit.js en YOUR_THEME_NAME.js.
  6. Modifiez le fichier YOUR_THEME_NAME.info et remplacez les lignes suivantes:

    stylesheets[all][] = css/apigee_responsive_starterkit.css
    scripts[] = js/apigee_responsive_starterkit.js


    par:

    stylesheets[all][] = css/NOM_DE_LA_THÈME_js[.css]
  7. Modifiez le nom du thème dans le fichier YOUR_THEME_NAME.info en remplaçant le kit de démarrage réactif Apigee par NOM DE VOTRE THÈME.
  8. Si vous souhaitez ajouter une capture d'écran à votre thème, remplacez le fichier screenshot.png existant.
  9. Si vous souhaitez ajouter un nouveau logo à votre thème, remplacez le fichier logo.png existant.
  10. Si vous souhaitez ajouter un favicon à votre thème, remplacez le fichier favicon.ico existant.