Personalizzazione del tema

Stai visualizzando la documentazione di Apigee Edge.
Vai alla documentazione di Apigee X. informazioni

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

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

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

Tema	Descrizione
Tema adattabile Apigee	Basato su Bootstrap 3, il tema predefinito per le release successive del portale. Questo tema supporta dispositivi con larghezze da 768 a 1400 pixel. Tutte le funzionalità di Bootstrap 3 sono disponibili in questo tema. Nota: per utilizzare il tema adattabile Apigee, assicurati che il tema Bootstrap 7.x-3.0 sia abilitato.
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 deve 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 per il tema Apigee DevConnect e non destinato a essere utilizzato da solo.

Impostazione del tema predefinito

Se il tuo portale utilizza ancora il tema Apigee DevConnect precedente, 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. Devi sempre testare un nuovo tema su un sistema non di produzione prima di eseguire il deployment del tema in produzione.

Per impostare il tema predefinito:

1. Accedi al portale come utente con privilegi di amministratore o per la creazione di contenuti.
2. Seleziona Aspetto nel menu di amministrazione di Drupal. Viene visualizzato l'elenco dei temi attivati.
3. Seleziona Imposta predefinito per il tema che vuoi utilizzare come predefinito.
   Per utilizzare il tema adattabile Apigee, assicurati che sia abilitato anche il tema Bootstrap 7.x-3.0 in quella pagina.
4. Salva la configurazione.

Personalizzazione del tema adattabile Apigee

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

• Personalizzazione dei moduli modali
• Personalizzazione delle impostazioni generali

Per personalizzare il supporto del modulo modale:

Il portale utilizza il modulo sandbox Drupal Bootstrap Modal moduli per visualizzare i moduli Drupal come modale. Per impostazione predefinita, i moduli di accesso e di registrazione funzionano come modale. Puoi disattivare questa funzionalità in modo che i moduli vengano visualizzati come singole pagine.

1. Accedi al portale per gli sviluppatori come utente con privilegi di amministratore.
2. Seleziona i moduli Configuration > User Interface > Bootstrap Modal (Configurazione > Interfaccia utente > Modalità 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 portale come utente con privilegi di amministratore o per la creazione di contenuti.
2. Seleziona Aspetto nel menu di amministrazione di Drupal. Viene visualizzato l'elenco dei temi attivati.
3. Nell'area Apigee Adattabile (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 adattabile Apigee.
5. La tabella seguente descrive le aree della pagina che puoi utilizzare per configurare il tema. Se modifichi una di queste impostazioni, seleziona Salva configurazione.
   
   

   Area	Sezione	Descrizione
   Impostazioni di bootstrap
   	Componenti	Controlla la visualizzazione dei breadcrumb, la posizione del menu principale (chiamato Navbar nelle impostazioni) e la visualizzazione dei pozzetti delle regioni: Breadcrumb: nascondi/mostra il breadcrumb, attiva/disattiva il link Home all'interno del breadcrumb. Barra di navigazione: modifica la posizione della barra di navigazione (menu principale) in posizioni fisse/statiche/normali per rendere il layout più dinamico. Pozzi delle regioni: aggiungi una classe dei pozzi a qualsiasi area del sito per aggiungere uno sfondo più scuro all'area.
   	JavaScript	Controlla la visualizzazione di ancoraggi, popover e descrizioni comando: Ancoraggi: correggi le posizioni degli ancoraggi e attiva lo scorrimento fluido. Popover: i popover aggiungono piccoli overlay di contenuti a qualsiasi elemento. Abilita/disabilita i popover e configurane l'utilizzo. Suggerimenti per gli strumenti: configura la modalità di utilizzo delle descrizioni comando. Puoi forzare la visualizzazione di ogni descrizione comando a destra, a sinistra, in alto o in basso di ogni elemento del modulo e impostare altre opzioni di visualizzazione.
   	Avanzati	Controlla il modo in cui il portale utilizza BootstrapCDN per aggiornare i file del tema di Bootstrap. Puoi disattivare l'affidamento del portale su BootstrapCDN, ma poi devi fornire la tua implementazione del framework Bootstrap.
   	Impostazioni DevConnect	Imposta il messaggio di benvenuto, i colori predefiniti e le dimensioni del logo che viene 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 del logo	Specifica l'immagine visualizzata nel menu principale.
   	Impostazioni dell'icona della scorciatoia	Specifica l'immagine visualizzata nella barra degli indirizzi di un browser o per un segnalibro del portale.

Personalizzazione del tema Apigee DevConnect

Il tema Apigee DevConnect è quello predefinito per le release precedenti del portale e può essere eseguito l'upgrade al nuovo tema adattabile Apigee. Tuttavia, prima di eseguire l'upgrade, devi assicurarti che tutti i blocchi, i modelli e gli altri contenuti siano compatibili con Bootstrap 3.

Per personalizzare le impostazioni generali del tema Apigee DevConnect:

1. Accedi al portale come utente con privilegi di amministratore o per la creazione di contenuti.
2. Seleziona Aspetto > Tema Apigee DevConnect > Impostazioni nel menu di amministrazione di Drupal. Vengono visualizzate le impostazioni iniziali del tema. Le impostazioni dei colori vengono specificate come valori esadecimali.

   

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

Personalizzazione di un tema creando un tema secondario

Tutti i file e gli asset che definiscono i temi predefiniti forniti con il portale si trovano nella directory profiles/apigee/themes sotto la directory di installazione del portale. Questa directory si trova all'indirizzo /var/www/html/profiles/apigee/themes se hai installato il portale nella posizione predefinita.

Per modificare un tema al fine di modificare l'aspetto e il design del sito, non modificare direttamente i file dei temi in profiles/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 i file del tema predefinito nella directory /sites/all/themes. Per istruzioni sui temi secondari, consulta la documentazione di Drupal all'indirizzo https://www.drupal.org/node/225125.

1. Copia la cartella profiles/apigee/themes/apigee_responsive/apigee_responsive_starterkit alla cartella profiles/apigee/themes/apigee_responsive/apigee_responsive_starterkit.
2. Rinomina la cartella apigee_responsive_starterkit in 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:
   
   stylesheets[all][] = css/apigee_responsive_starterkit.css
   script[] = js/apigee_responsive_starterkit.js
   
   con:
   
   stylesheets[all][] = css/YOUR_THEME_NAME_NAME.css
   
7. Modifica il nome del tema nel file YOUR_THEME_NAME.info da Apigee Adaptive Starter Kit con il NOME TEMA.
8. Se vuoi aggiungere un nuovo screenshot per il tema, sostituisci il file screenshot.png esistente.
9. Per aggiungere un nuovo logo al tema, sostituisci il file logo.png originale.
10. Se vuoi aggiungere una nuova favicon al tema, sostituisci il file favicon.ico esistente.