Personalizzare gli stili nel portale per sviluppatori in Gestione API di Azure

Per personalizzare il portale per sviluppatori in Gestione API di Azure ci sono tre modalità principali:

Modificare lo stile degli elementi di una pagina

I colori, il tipo di carattere e le dimensioni, la spaziatura e altri elementi relativi allo stile di ogni pagina del portale sono definiti da regole di stile.

La modifica delle regole di stile viene eseguita dal portale per sviluppatori quando vi si accede come amministratore. Per accedervi, aprire prima il Portale di Azure e fare clic su Portale di pubblicazione nella barra degli strumenti del servizio dell'istanza di Gestione API.

Portale di pubblicazione

Quindi fare clic su Portale per sviluppatori in alto a destra.

Collegamento al Portale per sviluppatori nel portale di pubblicazione

Per aprire la barra degli strumenti per la personalizzazione spostare il mouse sull'icona della personalizzazione (o selezionarla) e quindi fare clic su "stili" dalla barra degli strumenti.

Pulsante della barra degli strumenti di personalizzazione

È possibile modificare le regole di stile in due modi principali: esaminare l'elenco di tutte le regole di stile ovunque venga visualizzato per impostazione predefinita e modificare uno stile in base alla necessità oppure scegliere Select an element on the page (Selezionare un elemento nella pagina) e quindi fare clic in un punto qualsiasi della pagina per visualizzare solo gli stili per l'elemento specifico.

Barra degli strumenti Personalizzazione

Fare clic sull'opzione Select an element on the page (Selezionare un elemento nella pagina) per questo esempio. Man mano che il puntatore del mouse passa sugli elementi, questi vengono evidenziati per indicare gli stili dell'elemento che si possono modificare facendo clic su di essi. Spostare il mouse sul testo nell'intestazione (in genere qui è presente il nome della società) e quindi fare clic. Nell'editor dello stile viene visualizzato un set di regole di stile denominate e categorizzate. Ogni regola rappresenta una proprietà di stile dell'elemento selezionato. Ad esempio, per il testo dell'intestazione selezionata sopra, la dimensione del testo è pari a @font-size-h1, mentre il nome del tipo di carattere con le alternative si trova in @headings-font-family.

Se si ha familiarità con Bootstrap, queste regole sono in effetti variabili LESS nel tema bootstrap usato dal portale per sviluppatori.

A questo punto, verrà modificato il colore del testo dell'intestazione. Selezionare la voce nel campo @headings-color e digitare #000000. Questo è il codice esadecimale per il colore nero. Durante l'operazione, viene visualizzato un indicatore di colore quadrato all'estremità della casella di testo. Se si fa clic su questo indicatore, viene visualizzato uno strumento di selezione dei colori che consente di scegliere un colore.

Selezione colori

L'anteprima delle modifiche viene visualizzata in tempo reale durante l'inserimento delle modifiche, che risultano tuttavia visibili solo agli amministratori. Per rendere queste modifiche visibili a tutti, fare clic sul pulsante Pubblica nell'editor dello stile e confermare le modifiche.

Menu Pubblica

Per modificare le regole di stile applicate a qualsiasi altro elemento della pagina, seguire la stessa procedura usata per l'intestazione. Fare clic su Select an element on the page (Selezionare un elemento nella pagina) nell'editor di stile, selezionare l'elemento desiderato e iniziare a modificare i valori delle regole di stile mostrati sullo schermo.

Passaggi successivi