Puoi utilizzare temi personalizzati per personalizzare l'aspetto di dashboard, Look ed esplorazioni di Looker incorporati. Puoi utilizzare i temi per personalizzare la famiglia di caratteri, il colore del testo, il colore dello sfondo, il colore dei pulsanti, il colore del riquadro e altri elementi visivi.
Ad esempio, puoi creare un tema "scuro" per modificare l'aspetto della dashboard incorporata.
Per informazioni sull'impostazione di un tema predefinito per dashboard ed esplorazioni o per applicare un tema a una dashboard o a un'esplorazione specifica, consulta la pagina della documentazione Guida introduttiva all'incorporamento - applicazione di temi personalizzati.
Puoi definire i temi per le dashboard e le esplorazioni incorporate e la finestra di modifica per i riquadri di una dashboard incorporata dalla pagina Temi nella sezione Piattaforma del riquadro Amministrazione.
In questa pagina vengono descritte le seguenti informazioni:
- Il tema predefinito di Looker.
- Come vengono applicati i temi alle esplorazioni e alle dashboard 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 di Looker viene creato automaticamente sulla tua istanza e non può essere eliminato o modificato. Il tema Looker viene utilizzato come predefinito, a meno che un amministratore di Looker specifica un altro tema come predefinito.
Le impostazioni del tema Looker, che puoi vedere selezionando il pulsante Visualizza accanto al tema o creando una copia del tema, sono raggruppate nelle seguenti sezioni:
- Tema
- Generali
- Pagina Dashboard
- Riquadri della dashboard
- Controlli della dashboard
- Pagina Esplora
- Pagina Look
Tema.
| Nome impostazione | Valore |
|---|---|
| Nome | Looker |
Generale
Le impostazioni in questa sezione si applicano sia alle dashboard e alle esplorazioni incorporate.
| Nome impostazione | Valore | Note |
|---|---|---|
| Colore tasti | #1A73E8 |
Le dashboard utilizzano questo colore per i pulsanti principali e i controlli filtro.Le esplorazioni usano questo colore per i pulsanti principali, i banner e gli elementi di accento. |
| 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, H spesso, Arial, Sans Serif | Questi caratteri vengono pubblicati dall'applicazione Looker e sono consigliati perché sono disponibili sia nei browser sia durante il rendering delle immagini. Looker utilizza il primo carattere dell'elenco delle famiglie di caratteri che supporta un carattere, quindi quelli con priorità più alta o specializzati dovrebbero 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 | Nessuna |
Pagina dashboard
| Nome impostazione | Valore |
|---|---|
| Raccolta colori | Nessuna |
| Colore sfondo | #f6f8fa |
Riquadri dashboard
| Nome impostazione | Valore |
|---|---|
| Colore titolo | #3a4245 |
| Colore testo | #3a4245 |
| Colore corpo del testo | Nessuna |
| 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 una dashboard, della finestra di modifica del relativo riquadro e di un'esplorazione con il tema Looker.
Esempio di una dashboard con il tema Looker
Esempio di una 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 rispetto al tema predefinito utilizzando temi personalizzati e argomenti URL. Quando visualizzi una dashboard o un'esplorazione incorporata, 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 presente (solo per le dashboard)
Ogni elemento sostituisce gli elementi precedenti, il che significa che le impostazioni di incorporamento hanno la precedenza sulle impostazioni predefinite del tema e i temi personalizzati sostituiscono le impostazioni di incorporamento e i temi predefiniti.
Tuttavia, nel caso dell'argomento URL _theme, solo gli elementi specificati nell'argomento _theme sostituiscono gli elementi degli altri temi o delle impostazioni di incorporamento. Le restanti impostazioni del tema personalizzato e delle impostazioni 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, verranno utilizzate le altre impostazioni del tema personalizzato o di incorporamento.
I download delle dashboard mostreranno tutti i temi personalizzati applicati.
Creazione di un tema personalizzato
Per creare un tema personalizzato, seleziona Aggiungi tema:
Poi, aggiungi le specifiche di stile e colore per ogni impostazione che preferisci 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, descritte 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 con trattini bassi quando salvi il tema.
Generale
Le impostazioni in questa sezione si applicano sia alle dashboard e alle esplorazioni incorporate.
Colore dei tasti: 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 del testo: il codice colore esadecimale del testo nelle esplorazioni e nelle dashboard.
Colore sfondo: il codice colore esadecimale per lo sfondo delle pagine Esplora e 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 di un'esplorazione. Se il nome del carattere contiene uno spazio, racchiudilo tra virgolette, ad esempio "Open Sans".
- Se utilizzi un fonte comune sicuro per il web, puoi semplicemente digitare il nome del carattere 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 che rimandi alla definizione del carattere che vuoi utilizzare.
Origine carattere: lascia vuoto questo campo a meno che tu non voglia utilizzare un carattere personalizzato, che non sia un carattere di uso comune sicuro per il web. L'origine carattere deve essere un URL completo che inizi con https e rimandi al valore url specificato nell'argomento src di @font-face. Consigliamo di utilizzare un file in formato .woff (Web Open Font Format), poiché i file .woff2 non sono supportati da Internet Explorer 11.
- Ad esempio, per PT Sans restricted, puoi inserire "PT Sans restricted" nel campo Famiglia di caratteri e
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 dell'esplorazione viene visualizzato nel carattere Famiglia di caratteri specificato, Verdana. Colori intensi, pulsanti e link vengono visualizzati nel colore dei tasti specificato, #e82042:
Dopo aver eseguito un'esplorazione, la struttura e il testo del pulsante Esegui vengono visualizzati nel Colore dei tasti specificato, #e82042:
Esempio di una finestra di modifica dei riquadri 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 di colori: se vuoi, puoi scegliere una raccolta di colori, ovvero un insieme di tavolozze coordinate che funzionano bene insieme. Quando assegni una raccolta di colori a una dashboard, tutte le serie di dati in tutti i riquadri della dashboard vengono colorati in base alle tavolozze della raccolta, per fare in modo che i colori delle serie di dati siano coordinati nell'intera dashboard.
- Quando assegni una raccolta di colori a un tema incorporato, la raccolta di colori del tema sostituirà qualsiasi raccolta di colori precedentemente assegnata a un riquadro. Tuttavia, la raccolta dei colori di un tema non sostituirà i colori personalizzati assegnati a una serie di dati né la formattazione condizionale applicata a una visualizzazione tabella.
Colore sfondo: il codice colore esadecimale per lo sfondo della dashboard e quello dei riquadri di testo.
Margine superiore: (facoltativo) imposta un valore specifico per il margine nella parte superiore di una 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 il margine 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 per i 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 valore singolo
Colore del testo: il codice colore esadecimale dei seguenti elementi:
- Testo sulla dashboard, incluse le legende nelle visualizzazioni
- Sottotitoli e corpo del testo, ad eccezione del testo di livello 1 dell'intestazione, dei riquadri Markdown
- Livello intestazione 1, livello intestazione 2 e testo normale nei riquadri di testo
- Icone dei riquadri nelle visualizzazioni di valore singolo
Colore del corpo del testo: il codice colore esadecimale dei seguenti elementi:
- Corpo del testo, ad eccezione del testo di livello 2 e 3 dell'intestazione, 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, che viene impostato utilizzando il Colore di sfondo nella sezione Pagina dashboard.
Allineamento titoli. Imposta l'allineamento dei titoli dei riquadri a sinistra, a destra o al centro.
Dimensione carattere del titolo: se vuoi, regola le dimensioni del carattere 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 tra un'ombra di una casella predefinita o crearne una personalizzata. Per creare un'ombra di casella personalizzata, inserisci l'horizontal-offset vertical-offset blur-radius spread-radius color desiderato e seleziona Inserisci stile personalizzato per applicare le impostazioni. A destra è mostrata un'anteprima delle impostazioni dell'ombra della casella.
Dimensioni spazio della colonna: regola la dimensione dello spazio tra le colonne dei riquadri della dashboard da un insieme di dimensioni predefinite in pixel.
Dimensioni spazio della riga: regola eventualmente la dimensione dello spazio tra le righe di riquadri della dashboard da un insieme di dimensioni predefinite in pixel.
Raggio bordo: se vuoi, regola 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 è disattivata, tutte le altre opzioni di controllo della dashboard vengono deselezionate e disabilitate.
Mostra titolo dashboard: seleziona la casella di controllo per visualizzare il titolo della dashboard.
Titolo dashboard centrale: seleziona questa casella di controllo per visualizzare il centro del titolo della dashboard allineato. Quando questa opzione non è attivata, 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 Mostra filtri di attivazione/disattivazione è deselezionata e è disattivata e l'icona dei filtri della dashboard è nascosta.
Attivazione/disattivazione dei filtri della visualizzazione: seleziona la casella di controllo per visualizzare l'icona dei filtri della dashboard.
Visualizza indicatore dell'ultimo aggiornamento della 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 ricaricamento 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:
Mostra 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 Corsa e il menu a forma di ingranaggio delle azioni dell'esplorazione.
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.
Mostra 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 dell'esplorazione in un'esplorazione incorporata.
Pagina Look
All'interno di un tema personalizzato, puoi modificare i seguenti elementi nei Look incorporati:
Visualizza intestazione: disattiva questa opzione per nascondere l'intera intestazione di un Look incorporato, inclusi il titolo, l'indicatore dell'ultima corsa, il fuso orario dei dati, il pulsante Corsa 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.
Visualizza fuso orario: disattiva questa opzione per nascondere il fuso orario dei dati in un Look incorporato.
Mostra 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 in un Look incorporato.
Copia di un tema in corso...
Puoi copiare un tema esistente selezionando il menu del tema e l'opzione 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)". Verifica di modificare manualmente il nome con un nuovo nome univoco contenente solo caratteri alfanumerici e trattini bassi e accertati di rimuovere le parentesi.
Puoi modificare le altre impostazioni 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 mantenere tutte le impostazioni del tema.
Modifica di un tema
Il tema Looker viene creato automaticamente sulla tua istanza e non può essere modificato. Se vuoi modificare il tema Looker, puoi creare una copia del tema e poi modificare la copia.
Per tutti gli altri temi, puoi selezionare il pulsante Modifica associato per aggiornare le impostazioni del tema.
Puoi modificare le impostazioni 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 mantenere gli aggiornamenti.
Eliminazione di un tema
Puoi eliminare qualsiasi tema, ad eccezione di Looker o del tema 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 il cui tema è specificato nel relativo URL utilizzeranno il tema predefinito.
Impostazione di 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 e le esplorazioni incorporate nell'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. Per ulteriori informazioni su come i temi e le impostazioni di incorporamento vengono applicati a una dashboard incorporata o a un'esplorazione, consulta la sezione Modalità di applicazione dei temi e delle impostazioni di incorporamento in questa pagina.
Applicare un tema a esplorazioni e dashboard 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 usi un tema diverso da quello predefinito, puoi specificare un tema diverso nell'URL della dashboard incorporata o dell'esplorazione. Per farlo, aggiungi il parametro theme= con il nome del tema alla fine dell'URL di incorporamento. Ad esempio, se disponi di un tema chiamato "Rosso", devi 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 dell'esplorazione incorporato:
none
https://example.cloud.looker.com/embed/explore/model_name/explore_name?theme=red
L'elemento tema nell'URL non è sensibile alle maiuscole, quindi puoi utilizzare 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 i 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 essere simile al seguente:
https://example.cloud.looker.com/embed/dashboards/236?_theme={"show_filters_bar":false}
Utilizza la 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 la versione con codifica URL del simbolo #, che è %23. Ad esempio, entrambi questi argomenti URL specificano il colore rosso:
_theme={"title_color":"red","text_tile_text_color":"%23FF0000"}
Di seguito sono riportati 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_themeè un modo pratico per perfezionare i temi o le impostazioni di incorporamento. Ad esempio, supponiamo che tu abbia un tema personalizzato che nasconde la barra dei filtri e una dashboard in cui potrebbe essere utile mostrare la barra dei filtri. Puoi utilizzare il tema personalizzato per la tua dashboard e poi aggiungere l'argomento_theme={"show_filters_bar":true}nell'URL della dashboard incorporata per mostrare la barra dei filtri nella dashboard, mantenendo però tutte le altre impostazioni del tema personalizzato. Per ulteriori informazioni su come i temi e le impostazioni di incorporamento vengono applicati a una dashboard incorporata, consulta la sezione Modalità di applicazione dei temi e delle impostazioni di incorporamento in questa pagina. - Per gli script di programmazione, devi codificare l'URL per l'argomento
_theme. - L'argomento
_themenon viene applicato durante l'invio di dashboard incorporate in formato PDF. - L'argomento
_themeviene applicato se scarichi la dashboard come PDF.