Puoi utilizzare i temi personalizzati per personalizzare l'aspetto delle dashboard, dei Look e delle esplorazioni di Looker incorporati. Puoi usare i temi per personalizzare la famiglia di caratteri, il colore del testo, il colore di sfondo, il colore dei pulsanti, il colore dei riquadri e altri elementi visivi.
Ad esempio, puoi creare un tema "scuro" per modificare l'aspetto della dashboard incorporata.
Per informazioni su come impostare un tema predefinito per le tue dashboard e le tue esplorazioni, oppure per applicare un tema a una dashboard o esplorazione specifica, consulta la pagina della documentazione Guida introduttiva all'incorporamento - Applicazione di temi personalizzati.
Puoi definire temi per dashboard incorporate, esplorazioni incorporate e la finestra di modifica per i riquadri in una dashboard incorporata dalla pagina Temi nella sezione Piattaforma del riquadro Amministrazione.
In questa pagina viene descritto quanto segue:
- Il tema predefinito di Looker.
- Come vengono applicati i temi alle dashboard e alle esplorazioni incorporate.
- Come creare, copiare, modificare ed eliminare un tema personalizzato
- Come impostare un tema predefinito per dashboard ed esplorazioni
- Come applicare un tema diverso da quello predefinito alle dashboard e alle esplorazioni selezionate
- Come applicare l'argomento URL
_themeper selezionare gli elementi del tema della dashboard
Tema predefinito
Il tema predefinito Looker viene creato automaticamente nell'istanza e non può essere eliminato o modificato. Il tema Looker viene utilizzato come predefinito, a meno che un amministratore di Looker non specifichi un altro tema come predefinito.
Le impostazioni dei temi Looker, che puoi visualizzare selezionando il pulsante Visualizza accanto al tema o creando una copia del tema, sono raggruppate nelle seguenti sezioni:
- Tema
- Generali
- Pagina Dashboard
- Riquadri dashboard
- Controlli della dashboard
- Pagina Esplora
- Pagina Look
Tema.
| Nome impostazione | Valore |
|---|---|
| Nome | Looker |
Generico
Le impostazioni di questa sezione si applicano sia alle dashboard incorporate sia alle esplorazioni incorporate.
| Nome impostazione | Valore | Note |
|---|---|---|
| Colore tasti | #1A73E8 |
Le dashboard utilizzano questo colore per i pulsanti principali e i controlli dei filtri.Le esplorazioni utilizzano questo colore per i pulsanti principali, i banner e gli elementi in evidenza. |
| Colore testo | #3e3f40 |
|
| Colore sfondo | #f6f8fa |
|
| Famiglia di caratteri | Roboto, Noto Sans JP, Noto Sans CJK KR, Noto Sans Arabic UI, Noto Sans Devanagari UI, Noto Sans Hebrew, Noto Sans Thai UI, HFondato a fini legali | Questi caratteri vengono pubblicati dall'applicazione Looker e sono consigliati perché saranno disponibili sia nei browser sia quando viene eseguito il rendering delle immagini. Looker utilizza il primo carattere dell'elenco della famiglia di caratteri che supporta un carattere, quindi i caratteri specializzati o con priorità più elevata devono essere elencati per primi. Looker utilizza le varianti "UI" dei caratteri, se disponibili, in modo che i caratteri vengano leggermente modificati per adattarsi meglio ai limiti dei componenti visivi. |
| Origine carattere | Nessun valore |
Pagina dashboard
| Nome impostazione | Valore |
|---|---|
| Raccolta colori | Nessun valore |
| Colore sfondo | #f6f8fa |
Riquadri dashboard
| Nome impostazione | Valore |
|---|---|
| Colore titolo | #3a4245 |
| Colore testo | #3a4245 |
| Colore corpo del testo | Nessun valore |
| Colore sfondo | #ffffff |
| Allineamento del titolo | Centro |
Controlli della dashboard
| Nome impostazione | Valore |
|---|---|
| Visualizza il titolo della dashboard | Sì |
| Visualizza la barra dei filtri | Sì |
Pagina Esplora
| Nome impostazione | Valore |
|---|---|
| Mostra intestazione | Sì |
| Mostra titolo | Sì |
| Mostra ultima esecuzione | Sì |
| Mostra fuso orario | Sì |
| Visualizza pulsante Esegui | Sì |
| Mostra pulsante Impostazioni | Sì |
Pagina Look
| Nome impostazione | Valore |
|---|---|
| Mostra intestazione | Sì |
| Mostra titolo | Sì |
| Mostra ultima esecuzione | Sì |
| Mostra fuso orario | Sì |
| Visualizza pulsante Esegui | Sì |
| Mostra pulsante Impostazioni | Sì |
Di seguito sono riportati alcuni esempi di dashboard, della finestra di modifica del riquadro di una dashboard e di un'esplorazione con il tema Looker.
Esempio di una dashboard con il tema Looker
Esempio di finestra di modifica dei riquadri di una dashboard con il tema Looker
Esempio di una pagina Esplora con il tema Looker
Come vengono applicati i temi e le impostazioni di incorporamento
Puoi modificare l'aspetto di una dashboard incorporata o di un'esplorazione dal tema predefinito utilizzando temi personalizzati e argomenti URL. Quando visualizzi una dashboard o un'esplorazione incorporate, Looker applica le impostazioni nel seguente ordine:
- Inizia con le impostazioni del tema predefinito.
- Applica le impostazioni del tema personalizzato specificato nell'argomento
themedell'URL, se presente - Applica le proprietà specificate nell'argomento URL
_theme, se presenti (solo per le dashboard)
Ogni elemento sostituisce gli elementi precedenti, il che significa che le impostazioni di incorporamento hanno la precedenza su quelle predefinite del tema e i temi personalizzati hanno la precedenza sulle impostazioni di incorporamento e sui temi predefiniti.
Tuttavia, nel caso dell'argomento _theme URL, solo gli elementi specificati nell'argomento _theme sostituiscono gli elementi degli altri temi o delle impostazioni di incorporamento. Le altre impostazioni del tema personalizzato e di incorporamento continueranno a essere utilizzate. Ad esempio, se aggiungi l'argomento _theme={"show_filters_bar":false} nell'URL di una dashboard incorporata, la barra dei filtri non verrà visualizzata, anche se hai attivato Mostra filtri nelle impostazioni di incorporamento o in un tema personalizzato. Tuttavia, continueranno a essere utilizzate le altre impostazioni del tema personalizzato o delle impostazioni di incorporamento.
I download delle dashboard mostreranno qualsiasi tema personalizzato applicato.
Creazione di un tema personalizzato
Per creare un tema personalizzato, seleziona Aggiungi tema:
Quindi, aggiungi le specifiche di stile e colore per ogni impostazione desiderata nella pagina Nuovo tema.
Ad eccezione del titolo del tema, che deve essere univoco, tutti i campi vengono compilati automaticamente con i valori del tema predefinito. Puoi modificare qualsiasi impostazione, descritta nelle sezioni seguenti. Seleziona Salva tema per mantenere le modifiche e salvare il nuovo tema.
Tema.
Nome: il nome del tema deve essere univoco e può contenere solo caratteri alfanumerici e trattini bassi. Se inserisci spazi nel nome del tema, questi verranno sostituiti da trattini bassi quando salvi il tema.
Generico
Le impostazioni di questa sezione si applicano sia alle dashboard incorporate sia alle esplorazioni incorporate.
Colore chiave: le dashboard utilizzano questo colore per i pulsanti principali e i controlli filtro. Le esplorazioni utilizzano questo colore per i link e le icone del selettore campi, i pulsanti principali, i banner e gli accenti.
Colore testo: il codice colore esadecimale per il testo nelle esplorazioni e nelle dashboard.
Colore sfondo: il codice colore esadecimale per lo sfondo delle pagine Esplora e della dashboard.
Famiglia di caratteri: il nome della famiglia di caratteri. Questo carattere verrà utilizzato per tutto il testo nella dashboard, inclusi titoli dei riquadri, riquadri di testo e legende nelle visualizzazioni. Questo carattere verrà utilizzato anche per tutto il testo in un'esplorazione. Se nel nome del carattere è presente uno spazio, utilizzalo tra virgolette, ad esempio "Open Sans".
- Se utilizzi un carattere comune sicuro per il web, ti basta digitarne il nome nel campo Famiglia di caratteri e lasciare vuoto il campo Origine carattere. Se vuoi utilizzare un carattere meno comune, inserisci il nome del carattere nel campo Famiglia di caratteri, quindi utilizza il campo Origine carattere, descritto di seguito, per fornire un URL per la definizione del carattere che vuoi utilizzare.
Origine carattere: lascia vuoto questo campo a meno che tu non voglia utilizzare un carattere personalizzato, ovvero un carattere non comune per il web. L'origine carattere deve essere un URL completo che inizia con https e rimanda al valore url specificato nell'argomento src di @font-face. Ti consigliamo di utilizzare un file in formato .woff (web aperto per i caratteri), poiché i file .woff2 non sono supportati da Internet Explorer 11.
- Ad esempio, per PT SansRestrict, puoi inserire "PT Sans restricted" nel campo Famiglia di caratteri e poi inserire
https://fonts.gstatic.com/s/ptsansnarrow/v7/UyYrYy3ltEffJV9QueSi4RdbPw3QSf9R-kE0EsQUn2A.woffnel campo Origine carattere.
Esempio di un'esplorazione incorporata con un tema personalizzato
L'esempio seguente mostra un'esplorazione incorporata con un tema personalizzato. Il Colore chiave è impostato su #e82042 e la Famiglia di caratteri è impostata su Verdana.
Quando esegui un'esplorazione in un'impostazione incorporata, il testo nell'esplorazione viene visualizzato nel carattere Famiglia di caratteri specificato, Verdana. Colori intensi, pulsanti e link vengono visualizzati nel Colore chiave specificato, #e82042:
Dopo l'esecuzione di un'esplorazione, il contorno del pulsante Esegui e il testo vengono visualizzati nel colore chiave specificato, #e82042:
Esempio di finestra di modifica del riquadro di una dashboard incorporata con un tema personalizzato
Oltre agli elementi Esplora descritti nella sezione precedente, quando stai modificando il riquadro di una dashboard, il banner viene visualizzato nell'area specificata nell'impostazione Colore chiave (#e82042) e con il carattere specificato nell'impostazione Famiglia di caratteri (Verdana):
Pagina dashboard
Raccolta colori: se vuoi, puoi scegliere una raccolta di colori, ovvero un insieme di tavolozze coordinate che si abbinano bene. Quando si assegna una raccolta di colori a una dashboard, tutte le serie di dati in tutti i riquadri della dashboard vengono colorate in base alle tavolozze della raccolta, assicurando che i colori delle serie di dati siano coordinati in tutta la dashboard.
- Quando assegni una raccolta di colori a un tema incorporato, la raccolta di colori del tema sostituirà qualsiasi raccolta di colori assegnata in precedenza a un riquadro. Tuttavia, la raccolta di colori di un tema non sostituirà i colori personalizzati assegnati a una serie di dati né sovrascriverà la formattazione condizionale applicata a una visualizzazione tabella.
Colore sfondo: il codice colore esadecimale per lo sfondo della dashboard e lo sfondo dei riquadri di testo.
Margine superiore: se vuoi, imposta un valore specifico per il margine nella parte superiore della dashboard. Scegli tra le opzioni predefinite in un menu a discesa. I margini sono misurati in pixel (px).
Margine inferiore: se vuoi, imposta un valore specifico per il margine nella parte inferiore di una dashboard. Scegli tra le opzioni predefinite in un menu a discesa. I margini sono misurati in pixel (px).
Lati margine: se vuoi, imposta un valore specifico per i margini ai lati di una dashboard. Scegli tra le opzioni predefinite in un menu a discesa. I margini sono misurati in pixel (px).
Riquadri della dashboard
Colore titolo: il codice colore esadecimale dei seguenti elementi.
- Titolo della dashboard
- Titoli dei riquadri della dashboard
- Titoli e testo di livello 1 dell'intestazione dei riquadri Markdown
- Colore del testo delle visualizzazioni a valori singoli
Colore testo: il codice colore esadecimale dei seguenti elementi.
- Testo nella dashboard, incluse le legende nelle visualizzazioni
- Sottotitoli e corpo del testo, ad eccezione del testo di livello dell'intestazione 1, dei riquadri Markdown
- Intestazione livello 1, livello intestazione 2 e testo normale nei riquadri di testo
- Icone dei riquadri nelle visualizzazioni a valore singolo
Colore corpo del testo: il codice colore esadecimale dei seguenti elementi:
- Corpo del testo, ad eccezione del testo di livello intestazione 2 e di livello 3, nei riquadri Markdown.
- Corpo del testo nei riquadri di testo
Colore sfondo: il codice colore esadecimale per lo sfondo di tutti i riquadri, ad eccezione dei riquadri di testo. I riquadri di testo utilizzano lo stesso colore di sfondo della dashboard, impostato tramite il Colore di sfondo nella sezione Pagina dashboard.
Allineamento del titolo: imposta l'allineamento dei titoli dei riquadri a sinistra, a destra o al centro.
Dimensione carattere titolo: regola facoltativamente le dimensioni dei caratteri dei riquadri della dashboard da un insieme di dimensioni predefinite in pixel.
Ombra riquadro: crea un'ombra intorno ai riquadri della dashboard utilizzando la sintassi CSS. Puoi scegliere un'ombra predefinita della casella o crearne una personalizzata. Per creare un'ombra della casella personalizzata, inserisci il valore horizontal-offset vertical-offset blur-radius spread-radius color che preferisci e seleziona Inserisci stile personalizzato per applicare le impostazioni. A destra è visualizzata un'anteprima delle impostazioni di ombra della casella.
Dimensione spazio della colonna: regola facoltativamente le dimensioni in pixel dello spazio tra le colonne dei riquadri della dashboard da un insieme di dimensioni predefinite.
Dimensioni spazio della riga: se vuoi, regola le dimensioni in pixel dello spazio tra le righe dei riquadri della dashboard da un insieme di dimensioni predefinite.
Raggio bordo: se vuoi, puoi modificare il raggio del bordo dei riquadri della dashboard per creare angoli quadrati o arrotondati.
Controlli della dashboard
Visualizza intestazione dashboard: disattiva questa opzione per nascondere l'intera intestazione della dashboard, inclusi tutti i filtri e i controlli della dashboard. Quando questa opzione è disabilitata, tutte le altre opzioni di controllo della dashboard vengono deselezionate e disattivate.
Visualizza titolo dashboard: seleziona la casella di controllo per visualizzare il titolo della dashboard.
Titolo dashboard centrale: seleziona questa casella di controllo per visualizzare il titolo della dashboard al centro della dashboard. Quando questa opzione non è abilitata, il titolo della dashboard è allineato a sinistra. Questa opzione è disponibile solo se è stata attivata l'opzione Visualizza titolo dashboard.
Visualizza barra dei filtri: seleziona la casella di controllo per visualizzare la barra dei filtri nella parte superiore della dashboard. Quando questa opzione non è selezionata, l'opzione Visualizza/di attivazione/disattivazione dei filtri è deselezionata e disattivata, nascondendo l'icona dei filtri della dashboard.
Mostra/pulsante di attivazione/disattivazione dei filtri: seleziona la casella di controllo per visualizzare l'icona dei filtri della dashboard.
Visualizza indicatore ultimo aggiornamento dashboard: seleziona la casella di controllo per visualizzare l'indicatore dell'ultimo aggiornamento della dashboard.
Visualizza icona ricarica dati: seleziona la casella di controllo per visualizzare l'icona di ricarica dei dati della dashboard.
Visualizza menu dashboard: seleziona la casella di controllo per visualizzare il menu della dashboard con tre puntini. Se questa opzione è deselezionata, le opzioni di menu della dashboard non sono disponibili.
Pagina Esplora
All'interno di un tema personalizzato, puoi modificare i seguenti elementi nelle pagine Esplora incorporate:
Visualizza intestazione: disattiva questa opzione per nascondere l'intera intestazione di un'esplorazione incorporata, inclusi il titolo, l'indicatore dell'ultima corsa, il fuso orario dei dati, il pulsante Esegui e il menu a forma di ingranaggio Esplora azioni.
Visualizza titolo: disattiva questa opzione per nascondere il titolo di un'esplorazione incorporata.
Mostra ultima esecuzione: disattiva questa opzione per nascondere da quanto tempo è stata eseguita l'esplorazione.
Mostra fuso orario: disattiva questa opzione per nascondere il fuso orario dei dati in un'esplorazione incorporata.
Visualizza pulsante Esegui: disattiva questa opzione per nascondere il pulsante Esegui in un'esplorazione incorporata.
Mostra pulsante di azione: disattiva questa opzione per nascondere il menu a forma di ingranaggio delle azioni Esplora in un'esplorazione incorporata.
Pagina Look
All'interno di un tema personalizzato, puoi modificare i seguenti elementi dei Look incorporati:
Visualizza intestazione: disattiva questa opzione per nascondere l'intera intestazione di un Look incorporato, inclusi il titolo, l'indicatore dell'ultima esecuzione, il fuso orario dei dati, il pulsante Esegui e il menu a forma di ingranaggio Esplora azioni.
Visualizza titolo: disattiva questa opzione per nascondere il titolo di un Look incorporato.
Mostra ultima esecuzione: disattiva questa opzione per nascondere da quanto tempo è stato eseguito il Look.
Mostra fuso orario: disattiva questa opzione per nascondere il fuso orario dei dati in un Look incorporato.
Visualizza pulsante Esegui: disattiva questa opzione per nascondere il pulsante Esegui in un Look incorporato. Quando l'opzione Mostra filtri sui Look incorporati è disattivata, questa opzione di attivazione/disattivazione non mostra il pulsante Esegui.
Mostra pulsante di azione: disattiva questa opzione per nascondere il menu a forma di ingranaggio delle azioni Esplora in un Look incorporato.
Copia di un tema
Puoi copiare un tema esistente selezionando il menu del tema e poi Copia tema.
Quando crei una copia di un tema, per impostazione predefinita il nome del nuovo tema corrisponde al nome del tema copiato, seguito da "(copia)". Accertati di modificare manualmente questo nome in un nuovo nome univoco contenente solo caratteri alfanumerici e trattini bassi e accertati di rimuovere le parentesi.
Puoi modificare le altre impostazioni proprio come faresti quando crei un nuovo tema. Per una descrizione delle impostazioni, consulta le impostazioni del tema descritte in precedenza. Assicurati di selezionare Salva per conservare tutte le impostazioni del tema.
Modificare un tema
Il tema Looker viene creato automaticamente nell'istanza e non può essere modificato. Se vuoi modificare il tema Looker, puoi creare una copia del tema e poi modificarla.
Per tutti gli altri temi, puoi selezionare il pulsante Modifica associato per aggiornarne le impostazioni.
Puoi modificare le impostazioni proprio come faresti per la creazione di un nuovo tema. Per una descrizione delle impostazioni, consulta le impostazioni del tema descritte in precedenza. Assicurati di selezionare Salva per conservare gli aggiornamenti.
Eliminazione di un tema
Puoi eliminare qualsiasi tema tranne quello Looker o quello attualmente impostato come predefinito. Per eliminare un tema, seleziona il relativo menu e scegli Elimina tema.
Dopo aver eliminato un tema, tutte le dashboard incorporate che contengono quel tema specificato nel relativo URL utilizzeranno il tema predefinito.
Impostare un tema predefinito per le dashboard e le esplorazioni incorporate
I temi personalizzati non sono supportati sui Look incorporati. I temi personalizzati sono disponibili solo per le dashboard e le esplorazioni incorporate.
Per specificare il tema predefinito per le dashboard incorporate e le esplorazioni nella tua istanza, seleziona il menu di un tema e scegli Imposta come predefinito.
Il tema predefinito viene utilizzato per le dashboard e le esplorazioni incorporate nell'istanza di Looker, a meno che non specifichi impostazioni diverse per una singola dashboard o esplorazione. Consulta la sezione Come vengono applicati i temi e le impostazioni di incorporamento di questa pagina per saperne di più su come vengono applicati i temi e le impostazioni di incorporamento a una dashboard o a un'esplorazione incorporate.
Applicare un tema a dashboard ed esplorazioni incorporate specifiche
I temi personalizzati non sono supportati sui Look incorporati. I temi personalizzati sono disponibili solo per le dashboard e le esplorazioni incorporate.
Se vuoi che una dashboard o un'esplorazione utilizzino un tema diverso da quello predefinito, puoi specificare un tema diverso nell'URL della dashboard incorporata o dell'esplorazione. A tale scopo, aggiungi il parametro theme= con il nome del tema alla fine dell'URL di incorporamento. Ad esempio, se hai un tema chiamato "Rosso", dovresti aggiungere theme=Red alla fine dell'URL della dashboard di incorporamento:
https://example.cloud.looker.com/embed/dashboards/246?theme=red
Per le esplorazioni, devi aggiungere theme=Red alla fine dell'URL di esplorazione incorporato:
none
https://example.cloud.looker.com/embed/explore/model_name/explore_name?theme=red
L'elemento del tema nell'URL non è sensibile alle maiuscole, quindi puoi usare theme=Red o theme=red.
Utilizzo dell'argomento URL _theme per applicare singoli elementi del tema della dashboard
Puoi utilizzare l'argomento URL _theme per personalizzare singoli elementi del tema per la dashboard incorporata, ad esempio tile_background_color e show_title.
Ecco il formato per l'argomento URL _theme:
_theme={"<property>":value}
Ad esempio, puoi utilizzare _theme={"show_filters_bar":false} per nascondere la barra dei filtri della dashboard incorporata. L'URL completo potrebbe avere il seguente aspetto:
https://example.cloud.looker.com/embed/dashboards/236?_theme={"show_filters_bar":false}
Utilizza una virgola per specificare più proprietà del tema:
_theme={"show_title":false,"show_filters_bar":false,"text_tile_text_color":"blue"}
I valori dei colori devono essere riportati tra virgolette e possono essere espressi con il nome del colore o con il codice colore esadecimale. Se utilizzi un codice esadecimale, assicurati di utilizzare una versione del simbolo # con codifica URL, ovvero %23. Ad esempio, entrambi gli argomenti dell'URL specificano il colore rosso:
_theme={"title_color":"red","text_tile_text_color":"%23FF0000"}
Ecco alcuni aspetti da considerare quando utilizzi l'oggetto _theme per una dashboard incorporata:
- Qualsiasi elemento specificato nell'argomento URL
_themesostituirà le impostazioni per quell'elemento in qualsiasi altro tema. In questo modo l'argomento_themediventa un modo pratico per perfezionare i temi o per incorporare le impostazioni. Ad esempio, supponiamo che tu abbia un tema personalizzato che nasconde la barra dei filtri, ma che tu abbia una dashboard in cui visualizzare la barra dei filtri potrebbe essere utile. Puoi utilizzare il tema personalizzato per la dashboard e poi aggiungere l'argomento_theme={"show_filters_bar":true}nell'URL della dashboard incorporata per visualizzare la barra dei filtri nella dashboard, ma mantenere tutte le altre impostazioni dei temi personalizzati. Per saperne di più su come vengono applicati i temi e le impostazioni di incorporamento a una dashboard incorporata, consulta la sezione Come vengono applicati temi e impostazioni di incorporamento in questa pagina. - Per gli script di programmazione, devi codificare l'URL nell'URL
_theme. - L'argomento
_themenon viene applicato durante il caricamento di dashboard incorporate in formato PDF. - L'argomento
_themeviene applicato se scarichi la dashboard in formato PDF.