Personalizzazione del tema

Stai visualizzando la documentazione di Apigee Edge.
Vai alla sezione Documentazione di Apigee X. Informazioni

Un tema è una raccolta di file che definisce l'aspetto di un sito. La Il portale Servizi per sviluppatori è inizialmente definito con un tema predefinito, che puoi personalizzare. In questo modo puoi selezionare le tue preferenze relative all'aspetto del tuo portale. Altro in particolare, puoi cambiare il colore di link, sfondi, testo e altri elementi del tema. Tu Puoi anche modificare il messaggio di benvenuto visualizzato sulla prima pagina del tuo portale per gli sviluppatori.

Puoi personalizzare il tema tramite l'interfaccia utente del portale per gli sviluppatori o scrivendo il codice in un del tema per sostituire il file del tema predefinito.

A seconda della versione del portale per gli sviluppatori, avrai a disposizione diversi temi tra cui scegliere da:

Tema	Descrizione
Tema reattivo Apigee	Basato su Bootstrap 3, il tema predefinito per con le versioni più recenti del portale. Questo tema supporta dispositivi con larghezze da 768 pixel a 1400 pixel. Tutte le funzionalità di Bootstrap 3 sono disponibili in questo tema. Nota: per utilizzare il tema reattivo Apigee, assicurati che la funzionalità di bootstrap Il tema 7.x-3.0 è attivato.
Tema Apigee DevConnect	Il tema predefinito del portale precedente al tema Adattabile Apigee. È possibile eseguire l'upgrade dei portali esistenti al nuovo tema Adattabile Apigee, ma devi prima garantire che tutti i blocchi, i modelli e gli altri contenuti siano compatibili con Bootstrap 3, e che il tema Bootstrap 7.x-3.0 sia abilitato.
Tema di base Apigee	Un tema padre del tema Apigee DevConnect e non destinato a essere utilizzato nel suo personali.

Impostazione del tema predefinito

Se il tuo portale utilizza ancora il tema Apigee DevConnect meno recente, potresti visualizzare un avviso nel formato:

"Apigee DevConnect theme" is out of date 

Puoi utilizzare la seguente procedura per impostare il tema predefinito per il portale. Dovresti Testa sempre un nuovo tema su un sistema non di produzione prima di eseguirne il deployment e produzione.

Per impostare il tema predefinito:

1. Accedi al tuo portale come utente con privilegi di amministratore o di creazione di contenuti.
2. Seleziona Aspetto nel menu di amministrazione di Drupal. L'elenco delle i temi.
3. Seleziona Imposta predefinito per il tema che vuoi utilizzare come predefinito.
   Per utilizzare il tema reattivo Apigee, assicurati che il tema Bootstrap 7.x-3.0 sia attivato anche su quella pagina.
4. Salva la configurazione.

Personalizzazione del tema reattivo Apigee

Questa sezione descrive come configurare il tema reattivo Apigee, tra cui:

• Personalizzazione dei moduli modali
• Personalizzazione delle impostazioni generali

Per personalizzare il supporto dei moduli modali:

Il portale usa il Drupal Bootstrap Modulo sandbox delle forme modali per visualizzare i moduli Drupal come modali. I moduli di accesso e registrazione di funzione predefinita come modali. Puoi disattivare questa funzionalità per visualizzare i moduli come singole pagine.

1. Accedi al portale per gli sviluppatori come utente con privilegi amministrativi.
2. Seleziona Configurazione > Interfaccia utente > Si forma il modale di bootstrap nel Menu di amministrazione di Drupal.
3. Attiva o disattiva il supporto modale per i moduli.
4. Seleziona Salva configurazione.

Per personalizzare le impostazioni generali del tema Adattabile Apigee:

1. Accedi al tuo portale come utente con privilegi di amministratore o di creazione di contenuti.
2. Seleziona Aspetto nel menu di amministrazione di Drupal. L'elenco dei temi attivati .
3. Nell'area Apigee Reattivo (tema predefinito) della pagina, seleziona Impostazioni (non selezionare il pulsante Impostazioni nella parte superiore della pagina).
4. Viene visualizzata la pagina delle impostazioni per il tema reattivo Apigee.
5. La tabella seguente descrive le aree della pagina che puoi utilizzare per configurare tema. Se modifichi una di queste impostazioni, seleziona Salva configurazione.
   
   

   Area	Sezione	Descrizione
   Impostazioni bootstrap
   	Componenti	Controlla la visualizzazione dei breadcrumb, la posizione del menu principale (chiamato barra di navigazione nelle impostazioni) e la visualizzazione dei pozzi regione: Breadcrumb: nascondi/mostra i breadcrumb, attiva/disattiva il link della home page. all'interno del breadcrumb. Navbar: modifica la posizione della Barra di navigazione (menu principale) in posizioni fisse/statiche/normali, rendendo il layout più dinamico. Pozzi regionali: aggiungi una classe di pozzo a qualsiasi regione del sito per aggiunge uno sfondo più scuro all'area.
   	JavaScript	Controlla la visualizzazione di ancoraggi, popover e descrizioni comando: Ancoraggi: correggi le posizioni di ancoraggio e attiva l'opzione Uniforme. scorrere. Popover: i popover aggiungono piccoli overlay di contenuti a qualsiasi . Attiva/disattiva i popover e configura la relativa modalità di utilizzo. Descrizione comando: configura il modo in cui vengono utilizzate le descrizioni comando. Puoi forzare l'esecuzione da visualizzare a destra, a sinistra, in alto o in basso di ogni elemento del modulo altre opzioni di visualizzazione.
   	Avanzati	Controlla il modo in cui il portale utilizza BootstrapCDN per aggiornare i file dei temi di bootstrap. Puoi disattivare la dipendenza del portale su BootstrapCDN, ma dovrai fornire la tua implementazione il modello di machine learning.
   	Impostazioni di DevConnect	Imposta il messaggio di benvenuto, i colori predefiniti e le dimensioni del logo visualizzato nel menu principale.
   Esegui l'override delle impostazioni globali
   	Attiva/disattiva visualizzazione	Attiva e disattiva la visualizzazione di diverse aree del portale.
   	Impostazioni dell'immagine logo	Specifica l'immagine visualizzata nel menu principale.
   	Impostazioni delle icone delle scorciatoie	Specifica l'immagine visualizzata nella barra degli indirizzi di un browser o per un segnalibro a nel portale.

Personalizzazione del tema Apigee DevConnect

Il tema Apigee DevConnect è quello predefinito per le versioni precedenti del portale. puoi eseguire l'upgrade al nuovo tema Adattabile Apigee. Tuttavia, devi prima assicurarti che tutti blocchi, modelli e altri contenuti siano compatibili con Bootstrap 3 prima di eseguire upgrade.

Per personalizzare le impostazioni generali di Apigee DevConnect tema:

1. Accedi al tuo portale come utente con privilegi di amministratore o di creazione di contenuti.
2. Seleziona Aspetto > Tema Apigee DevConnect > Impostazioni in Drupal menu di amministrazione. Vengono visualizzate le impostazioni iniziali per il tema. Le impostazioni colore sono specificati come valori esadecimali.

   

3. Modifica le impostazioni in base alle tue preferenze.
   Ad esempio, aggiungi o modifica il messaggio di benvenuto o modifica il colore di sfondo dell'intestazione. La il colore di sfondo dell'intestazione è inizialmente impostato su un valore simile all'arancione (#FF4300). Puoi modificare con un altro colore, ad esempio blu (#0000FF).
4. Quando hai finito di modificare le impostazioni, fai clic su Salva.

Personalizzare un tema creando un tema secondario

Tutti i file e le risorse che definiscono i temi predefiniti forniti con il portale si trovano Directory profile/apigee/themes nella directory di installazione del portale. Questa directory si trova all'indirizzo /var/www/html/profiles/apigee/themes se ha installato il portale nel percorso predefinito.

Per modificare un tema e cambiare l'aspetto del sito, non modificare i file dei temi in profile/apigee/themes. In questo caso, le modifiche verranno sovrascritte al successivo upgrade del portale.

Crea invece un tema secondario del tema che vuoi modificare copiando quello predefinito in /sites/all/themes . Per istruzioni sui temi secondari, consulta la sezione documentazione all'indirizzo https://www.drupal.org/node/225125.

1. Copia la cartella profiles/apigee/themes/apigee_responsive/apigee_responsive_starterkit alla pagina /sites/all/themes .
2. Rinomina la cartella apigee_responsive_starterkit a YOUR_THEME_NAME.
3. Rinomina il file apigee_responsive_starterkit.info in YOUR_THEME_NAME.info.
4. Rinomina css/apigee_responsive_starterkit.css in css/YOUR_THEME_NAME.css.
5. Rinomina js/apigee_responsive_starterkit.js in YOUR_THEME_NAME.js.
6. Modifica il file YOUR_THEME_NAME.info e sostituisci le seguenti righe:
   
   fogli di stile[all][] = css/apigee_responsive_starterkit.css
   script[] = js/apigee_reply_starterkit.js
   
   con:
   
   fogli di stile[all][] = css/YOUR_THEME_NAME.css
   script[] = js/YOUR_THEME_NAME.js
7. Cambia il nome del tema nel file YOUR_THEME_NAME.info da Apigee Adaptive Starter Kit con il tuo TEMA NOME.
8. Se vuoi aggiungere un nuovo screenshot per il tema, sostituisci il file screenshot.png esistente.
9. Se vuoi aggiungere un nuovo logo al tema, sostituisci il file logo.png uscito.
10. Se vuoi aggiungere una nuova favicon al tema, sostituisci il file favicon.ico esistente.