Dans cette étape, vous allez personnaliser la palette de couleurs. Les modifications de style que vous apportez lors de cette étape affectent les barres de navigation supérieure et inférieure, les boutons et la police du terminal (code) dans l'exemple de portail.
Pour personnaliser la palette de couleurs :
Accédez à la page Thèmes du portail que vous venez de créer.
Interface utilisateur de la console Cloud
Sur la page Portails, cliquez sur le nom du portail que vous venez de créer.
Par exemple, Mon premier portail.
Cliquez sur Thèmes.
Cliquez sur editModifier.
UI classique
Sur la page de destination du portail, cliquez sur Thème pour accéder à l'éditeur de thèmes.
Dans le volet Styles de base :
Définissez la Couleur principale sur Rouge pour régler la couleur des barres d'outils, en-têtes de carte et boutons.
Définissez la Couleur d'accentuation sur Bleu pour ajuster la couleur des textes <pre> et <code>.
Cliquez sur Enregistrer.
Cliquez sur Aperçu pour prévisualiser les modifications apportées au portail dans un nouvel onglet du navigateur.
Cliquez sur Publier pour publier la modification sur votre portail. Confirmez l'opération lorsque vous y êtes invité.
Cliquez sur Afficher le portail pour ouvrir le portail actif dans un nouvel onglet du navigateur.
Ensuite, vous allez personnaliser le logo sur le portail.
Sauf indication contraire, le contenu de cette page est régi par une licence Creative Commons Attribution 4.0, et les échantillons de code sont régis par une licence Apache 2.0. Pour en savoir plus, consultez les Règles du site Google Developers. Java est une marque déposée d'Oracle et/ou de ses sociétés affiliées.
Dernière mise à jour le 2025/09/04 (UTC).
[[["Facile à comprendre","easyToUnderstand","thumb-up"],["J'ai pu résoudre mon problème","solvedMyProblem","thumb-up"],["Autre","otherUp","thumb-up"]],[["Difficile à comprendre","hardToUnderstand","thumb-down"],["Informations ou exemple de code incorrects","incorrectInformationOrSampleCode","thumb-down"],["Il n'y a pas l'information/les exemples dont j'ai besoin","missingTheInformationSamplesINeed","thumb-down"],["Problème de traduction","translationIssue","thumb-down"],["Autre","otherDown","thumb-down"]],["Dernière mise à jour le 2025/09/04 (UTC)."],[[["\u003cp\u003eThis content pertains to customizing the color palette within the Apigee and Apigee hybrid portal.\u003c/p\u003e\n"],["\u003cp\u003eUsers can modify the primary color, affecting elements like toolbars and buttons, and the accent color, impacting code text.\u003c/p\u003e\n"],["\u003cp\u003eChanges to the color palette can be previewed, saved, and then published to the live portal.\u003c/p\u003e\n"],["\u003cp\u003eThe next step following color palette customization involves customizing the portal's logo.\u003c/p\u003e\n"]]],[],null,["# Step 2: Customize the color palette\n\n*This page\napplies to **Apigee** and **Apigee hybrid**.*\n\n\n*View [Apigee Edge](https://docs.apigee.com/api-platform/get-started/what-apigee-edge) documentation.*\n\nIn this step, you will customize the color palette. The style changes you make in this step will affect the top and bottom navigation bars, buttons, and terminal (code) font in the sample portal.\n\nTo customize the color palette:\n\n1. Go to the **Themes** page for the portal you just created.\n\n ### Cloud Console UI\n\n 1. On the **Portals** page, click the name of the portal you just created. For example **My First Portal**.\n 2. Click **Themes**.\n 3. Click edit **Edit**.\n\n ### Classic UI\n\n On the portal landing page, click **Theme** to navigate to the Theme editor.\n2. In the **Basic styles** pane:\n\n - Set the **Primary color** to **Red** to adjust the color of toolbars, card headers, and buttons.\n - Set the **Accent color** to **Blue** to adjust the color of `\u003cpre\u003e` and `\u003ccode\u003e` text.\n3. Click **Save**.\n\n4. Click **Preview** to preview the portal changes in a new browser tab.\n\n5. Click **Publish** to publish the change to your portal. Confirm the operation when prompted.\n\n6. Click **View Portal** to open the live portal in a new browser tab.\n\nNext, you'll **customize the logo** in the portal.\n\n\n[1](/apigee/docs/api-platform/publish/portal/get-started/create-portal)\n\n\n[2](/apigee/docs/api-platform/publish/portal/get-started/customize-color-palette)\n\n\n[(NEXT) Step 3: Customize the logo](/apigee/docs/api-platform/publish/portal/get-started/customize-logo)\n\n\n[4](/apigee/docs/api-platform/publish/portal/get-started/edit-page)\n\n\n[5](/apigee/docs/api-platform/publish/portal/get-started/set-up-navigation)\n\n\n[6](/apigee/docs/api-platform/publish/portal/get-started/publish-api)\n\n\u003cbr /\u003e"]]
