Personalizzare il tema (versione originale)

Stai visualizzando la documentazione di Apigee Edge.
Consulta la documentazione di Apigee X. info

Un tema è costituito da un foglio di stile globale a cascata (CSS) che fornisce un aspetto uniforme per tutte le pagine del portale. Lo scopo di un tema è quello di consentirti di modificare l'aspetto di tutte le pagine del portale contemporaneamente.

La maggior parte degli stili predefiniti forniti con il portale di esempio si basa su Bootstrap. Puoi personalizzare, visualizzare l'anteprima e pubblicare il tema, come descritto nelle sezioni seguenti.

Guarda il seguente video per scoprire come personalizzare il tema del portale.

Accedere all'editor di temi

Personalizza, visualizza l'anteprima e pubblica il tema per il tuo portale nell'editor dei temi. Per aprire l'editor di temi, seleziona Tema nel menu a discesa della barra di navigazione in alto.

Editor di temi

Come evidenziato nella figura precedente, l'editor dei temi ti consente di:

Aggiungere stili personalizzati

Personalizza il tema aggiungendo il tuo codice CSS nel riquadro dell'editor di stili. Sono supportati tutti gli elementi di stile CSS.

Per personalizzare il tema:

  1. Seleziona Tema nel menu a discesa della barra di navigazione in alto.
  2. Aggiungi il codice CSS personalizzato nel riquadro dell'editor di stili sul lato destro della pagina.
  3. Visualizza l'anteprima delle modifiche nel riquadro di anteprima facendo clic su Ricarica anteprima.
    > Nota: puoi fare clic sulla navigazione del portale per visualizzare l'anteprima dei contenuti di tutte le pagine.
  4. Fai clic su Pubblica per pubblicare le modifiche al tema.
  5. Fai clic su Pubblica per confermare l'aggiornamento.

Personalizza l'immagine"Il tuo logo" con il logo della tua azienda, sostituisci i seguenti file di immagine nel file manager caricando il tuo logo utilizzando gli stessi nomi e dimensioni relative dei file:

  • logo.png (140 pixel x 40 pixel)
  • mobile-logo.png (140 pixel x 40 pixel)

Inoltre, modifica i seguenti contenuti nel foglio di stile CSS, se necessario:

/* ==== Header Menu ==== */
...
body .navbar-brand {
  padding: 5px 15px;
}



.navbar-brand img {
  max-height: 50px;
  margin: 0;
  padding: 0;
}

Per saperne di più, consulta Gestire le risorse.

Personalizzare l'immagine di sfondo nella home page

Personalizza l'immagine di sfondo nella home page modificando i seguenti contenuti nel foglio di stile CSS.

  • Modifica il file dell'immagine di sfondo e il suo posizionamento.
    Puoi caricare la tua versione dell'immagine portal-hero.jpg nel file manager utilizzando lo stesso nome e le stesse dimensioni relative del file (1440 pixel x 540 pixel). Se vuoi utilizzare un nome file diverso, assicurati di modificare il valore background-image nel CSS riportato di seguito. 

    /* ==== Jumbotron ====
a billboard for drawing attention, from Bootstrap  */

home-page-jumbotron-bg {
    background-image: url('/files/portal-hero.jpg');
}

  • Modifica il formato del testo che si sovrappone all'immagine di sfondo. 

    .jumbotron {
 text-align: center;
 height: 500px;
 background-size: cover;
 margin: -50px -30px 0 -30px;
 border-radius: 0;
}

.jumbotron h1 {
 font-size: 40px;
 font-weight: 400;
}

.jumbotron h2 {
 font-size: 25px;
 font-weight: 400;
}

.jumbotron a, .jumbotron a:hover {
 font-size: 18px;
}

.jumbotron p {
 max-width: none;
}

Comprendere le regole di specificità CSS

La specificità CSS descrive il metodo utilizzato da un browser per determinare la precedenza per le dichiarazioni degli elementi di stile CSS in caso di conflitti. La specificità CSS viene calcolata applicando un peso a una dichiarazione di elemento di stile CSS specifico in base al tipo di selettore. Più specifico è il selettore CSS, maggiore è il peso. Ad esempio, a un attributo ID verrà assegnato un peso maggiore nel calcolo rispetto a un selettore di tipo.

Ad esempio, se definisci i seguenti elementi di stile nel codice CSS, l'elemento paragrafo verrà colorato di rosso perché la dichiarazione dell'elemento di stile p all'interno di un elemento div è più specifica della dichiarazione dell'elemento di stile p.

div p { color: red }  ← More specific  
p { color: blue }

Allo stesso modo, se definisci le seguenti dichiarazioni di elementi di stile nel codice CSS, qualsiasi testo racchiuso nei tag <div class="test"></div> verrà colorato di blu perché la dichiarazione di stile dell'attributo id all'interno di un elemento div è più specifica della dichiarazione di elemento di stile div.

div#test { background-color: blue; }  ← More specific  
div { background-color: red; }

Per le dichiarazioni di elementi di stile con la stessa specificità, avrà la precedenza l'ultima dichiarazione di elementi di stile definita. Ad esempio, dato l'ordine delle seguenti dichiarazioni di elementi di stile, l'elemento paragrafo sarà colorato di blu. 

p { color: red }  
p { color: blue }  ← Last specified

Pubblicare il tema

Per pubblicare nel portale online le personalizzazioni del tema e dello stile che hai aggiunto:

  1. Seleziona Tema nel menu a discesa del menu di navigazione in alto.
  2. Fai clic su Pubblica.

Per visualizzare i contenuti pubblicati nel portale live, fai clic su Portale live nella barra di navigazione in alto.