api-management-customize-styles.md

title	titleSuffix	description	services	documentationcenter	author	manager	editor	ms.service	ms.workload	ms.tgt_pltfrm	ms.custom	ms.topic	ms.date	ms.author
Customize page style on API Management legacy developer portal	Azure API Management	Follow the steps of this quickstart to customize the styling of elements on the Azure API Management developer portal.	api-management		dlepow	cfowler		api-management	mobile	na	mvc	article	11/04/2019	danlep

Customize the style of the developer portal pages

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

• Edit the contents of static pages and page layout elements
• Update the styles used for page elements across the developer portal (explained in this guide)
• Modify the templates used for pages generated by the portal (for example, API docs, products, user authentication)

In this article, you learn how to customize the style of elements on pages of the legacy developer portal and view your changes.

[!INCLUDE api-management-portal-legacy.md]

[!INCLUDE premium-dev-standard-basic.md]

Prerequisites

• Learn the Azure API Management terminology.
• Complete the following quickstart: Create an Azure API Management instance.
• Also, complete the following tutorial: Import and publish your first API.

Customize the developer portal

1. Select Overview.

2. Click the Developer portal (legacy) button on the top of the Overview window.

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.

   

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.

   

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.

   [!TIP] 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

You might also be interested in learning how to customize the Azure API Management developer portal using templates.