Customize the style of the Developer portal pages

There are three most common ways to customize the Developer portal in Azure API Management:

In this tutorial, you learn how to:

  • Customize the style of elements on pages of the Developer portal
  • View your change

customize style


To navigate to your APIM instance, follow these steps:

  1. Sign in to the Azure portal.
  2. Select arrow.
  3. Type "api" in the search box.
  4. Click API Management services.


  5. Select your APIM service instance.


Add API Management (APIM) to your favorites in the Azure portal by clicking the star.
This adds the APIM icon to the menu on the left of the portal. To see all your APIM services, click the icon (APIM icon).

Customize the Developer portal

  1. Select Overview.
  2. Click the Developer portal button on the top of the Overview window. Alternatively, you can click the Developer portal URL link.
  3. On the upper left side of the screen, you see an icon comprised of two paint brushes. Hover over this icon to open the portal customization menu.

    customize style

  4. Select Styles from the menu to open the styling customization pane.

    All elements that you can customize using Styles appear on the page

  5. Enter "headings-color" in the Change variable values to customize developer portal appearance: field.

    The @headings-color element appears on the page. This variable controls the color of the text.

    customize style

  6. Click on the field for the @headings-color variable.

    Color picker drop-down opens.

  7. From the color pickers drop-down select a new color.


    Real-time preview is available for all changes. A progress indicator appears at the top of the customization pane. After a couple seconds the header text changes in color to the newly selected.

  8. Select Publish from the lower left on the customization pane menu.

  9. Select Publish customizations to make the changes publicly available.

View your change

  1. Navigate to the Developer portal.
  2. You can see the change that you made.

Next steps

In this tutorial, you learned how to:

  • Customize the style of elements on pages of the Developer portal
  • View your change