Personalización del estilo de las páginas del portal para desarrolladoresCustomize the style of the Developer portal pages

Existen tres maneras comunes de personalizar el portal para desarrolladores en Azure API Management:There are three most common ways to customize the Developer portal in Azure API Management:

En este tutorial, aprenderá a:In this tutorial, you learn how to:

  • Personalizar el estilo de los elementos de las páginas del portal para desarrolladoresCustomize the style of elements on pages of the Developer portal
  • Ver el cambioView your change

Personalizar el estilo

Requisitos previosPrerequisites

DisponibilidadAvailability

Importante

Esta característica está disponible en los niveles Premium, Estándar, Básico y Desarrollador de API Management.This feature is available in the Premium, Standard, Basic and Developer tiers of API Management.

Personalización del portal para desarrolladoresCustomize the Developer portal

  1. Seleccione Información general.Select Overview.

  2. Haga clic en el botón Portal para desarrolladores en la parte superior de la ventana Información general.Click the Developer portal button on the top of the Overview window. También puede hacer clic en el vínculo de la dirección URL del portal para desarrolladores.Alternatively, you can click the Developer portal URL link.

  3. En el lado superior izquierdo de la pantalla, verá un icono formado por dos pinceles.On the upper left side of the screen, you see an icon comprised of two paint brushes. Mantenga el puntero sobre este icono para abrir el menú de personalización del portal.Hover over this icon to open the portal customization menu.

    Personalizar el estilo

  4. Seleccione Estilos en el menú para abrir el panel de personalización del estilo.Select Styles from the menu to open the styling customization pane.

    En la página aparecen todos los elementos que se pueden personalizar con Estilos.All elements that you can customize using Styles appear on the page

  5. Escriba "headings-color" en el campo Change variable values to customize developer portal appearance: (Cambiar valores de variables para personalizar la apariencia del portal para desarrolladores).Enter "headings-color" in the Change variable values to customize developer portal appearance: field.

    El elemento @headings-color aparece en la página.The @headings-color element appears on the page. Esta variable controla el color del texto.This variable controls the color of the text.

    Personalizar el estilo

  6. Haga clic en el campo correspondiente a la variable @headings-color.Click on the field for the @headings-color variable.

    Se abre la lista desplegable del selector de colores.Color picker drop-down opens.

  7. En esta lista, seleccione un nuevo color.From the color pickers drop-down select a new color.

    Sugerencia

    Existe una versión preliminar en tiempo real disponible de todos los cambios.Real-time preview is available for all changes. Un indicador de progreso aparece en la parte superior del panel de personalización.A progress indicator appears at the top of the customization pane. Al cabo de unos segundos, el color del texto del encabezado cambia al que se acaba de seleccionar.After a couple seconds the header text changes in color to the newly selected.

  8. Seleccione Publicar en la parte inferior izquierda del menú del panel de personalización.Select Publish from the lower left on the customization pane menu.

  9. Seleccione Publish customizations (Publicar personalizaciones) para que los cambios estén disponibles públicamente.Select Publish customizations to make the changes publicly available.

Ver el cambioView your change

  1. Desplácese hasta el portal para desarrolladores.Navigate to the Developer portal.
  2. Puede ver el cambio que ha realizado.You can see the change that you made.

Pasos siguientesNext steps

En este tutorial aprendió lo siguiente:In this tutorial, you learned how to:

  • Personalizar el estilo de los elementos de las páginas del portal para desarrolladoresCustomize the style of elements on pages of the Developer portal
  • Ver el cambioView your change

También podría estar interesado en aprender cómo personalizar el portal para desarrolladores para Azure API Management mediante plantillas.You might also be interested in learning how to customize the Azure API Management developer portal using templates.