Personalizzare il tema (versione originale)

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

Un tema è costituito da un CSS (Cascading Stylesheet) globale che fornisce un aspetto uniforme per tutte le pagine del tuo portale. L'obiettivo di un tema è consentirti di modificare contemporaneamente l'aspetto e il design di tutte le pagine del portale.

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 dei temi

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

Editor del tema

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

Aggiungi stili personalizzati

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

Per personalizzare il tema:

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

Personalizza l'immagine"Il tuo logo" con il logo della tua azienda e sostituisci i seguenti file immagine in Gestione file caricando il logo con gli stessi nomi e le relative dimensioni dei file:

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

Inoltre, modifica i seguenti contenuti nel foglio di stile CSS, come richiesto:

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



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

Per saperne di più, consulta Gestire gli asset.

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 relativo posizionamento.
    Puoi caricare la tua versione dell'immagine portal-hero.jpg in Gestione file utilizzando lo stesso nome e le stesse dimensioni del file (1440 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 delle dichiarazioni degli elementi di stile CSS in caso di conflitti. La specificità CSS viene calcolata applicando una ponderazione a una specifica dichiarazione dell'elemento di stile CSS in base al tipo di selettore. Più specifico è il selettore CSS, maggiore è la ponderazione. A un attributo ID, ad esempio, viene assegnata una ponderazione più elevata nel calcolo rispetto a un selettore di tipo.

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

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

Analogamente, se definisci le seguenti dichiarazioni dell'elemento di stile nel codice CSS, il testo racchiuso tra i tag <div class="test"></div> sarà di colore blu perché la dichiarazione dello stile dell'attributo ID all'interno di un elemento div è più specifica rispetto alla dichiarazione dell'elemento di stile div.

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

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

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

Pubblica il tema

Per pubblicare sul portale live le personalizzazioni di tema e 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 Live Portal nella barra di navigazione in alto.