Puoi utilizzare i temi personalizzati per personalizzare l'aspetto delle dashboard, dei look e delle esplorazioni di Looker incorporate. Puoi utilizzare i temi per personalizzare la famiglia di caratteri, il colore del testo, il colore di sfondo, il colore dei pulsanti, il colore delle 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 dashboard e le esplorazioni o su come applicare un tema a una dashboard o un'esplorazione specifica, consulta la pagina della documentazione Introduzione all'embedding: applicazione di temi personalizzati.
Puoi definire i temi per le dashboard incorporate, le esplorazioni incorporate e la finestra di modifica dei riquadri in una dashboard incorporata dalla pagina Temi nella sezione Piattaforma del riquadro Amministrazione.
Questa pagina descrive quanto segue:
- Requisiti
- 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 le dashboard e le esplorazioni
- Come applicare un tema diverso da quello predefinito a dashboard ed esplorazioni selezionate
- Come applicare l'argomento URL
_themea elementi selezionati del tema della dashboard
Requisiti
Per gestire i temi nella tua istanza Looker, devi soddisfare i seguenti requisiti:
- Se la tua istanza è un'istanza di Looker (originale), la funzionalità che ti consente di personalizzare i temi per le dashboard, i Look e le esplorazioni incorporati deve essere attivata da Looker. Contatta un esperto di vendita per aggiornare la licenza per questa funzionalità.
- Se la tua istanza è di Looker (Google Cloud core), i temi incorporati sono disponibili per le versioni Enterprise ed Embed, ma non per la versione Standard.
- L'utente di Looker deve disporre del ruolo Amministratore o dell'autorizzazione
manage_themes.
Tema predefinito
Il tema predefinito di Looker viene creato automaticamente nella tua istanza e non può essere eliminato o modificato. Il tema Looker viene utilizzato come tema predefinito, a meno che un amministratore di Looker non specifichi un altro tema come predefinito.
Le impostazioni del tema 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 di ricerca
Tema
| Nome impostazione | Valore |
|---|---|
| Nome | Looker |
Generale
Le impostazioni in 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, Helvetica, Arial, sans-serif | Questi caratteri vengono pubblicati dall'applicazione Looker e sono consigliati perché saranno 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, pertanto i caratteri con priorità più elevata o specializzati 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 confini dei componenti visivi. |
| Origine carattere | Nessuno |
Pagina dashboard
| Nome impostazione | Valore |
|---|---|
| Raccolta colori | Nessuno |
| Colore sfondo | #f6f8fa |
Riquadri dashboard
| Nome impostazione | Valore |
|---|---|
| Colore titolo | #3a4245 |
| Colore testo | #3a4245 |
| Colore corpo del testo | Nessuno |
| 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 esempi di una dashboard, della finestra di modifica di un riquadro della dashboard e di un'esplorazione con il tema Looker.
Esempio di dashboard con il tema Looker
Esempio di finestra di modifica del riquadro della dashboard con il tema Looker
Esempio di pagina di esplorazione con il tema Looker
Come vengono applicate le impostazioni di temi e incorporamento
Puoi modificare l'aspetto di una dashboard o di un'esplorazione incorporata dal tema predefinito utilizzando temi e argomenti URL personalizzati. Quando viene visualizzata 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 presenti (solo per le dashboard)
Ogni elemento sostituisce gli elementi precedenti, il che significa che le impostazioni di incorporamento sostituiscono le impostazioni del tema predefinito 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 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 l'opzione Mostra filtri nelle impostazioni di incorporamento o in un tema personalizzato. Tuttavia, le altre impostazioni del tema personalizzato o delle impostazioni di incorporamento verranno comunque utilizzate.
I download delle dashboard mostreranno qualsiasi tema personalizzato applicato.
Creazione di un tema personalizzato
Per creare un tema personalizzato, seleziona Aggiungi tema:
Aggiungi poi le specifiche di stile e colore per ogni impostazione desiderata nella pagina Nuovo tema.
A parte il 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.
Generale
Le impostazioni in 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 dei filtri. Le esplorazioni utilizzano questo colore per i link e le icone del selettore di campi, i pulsanti principali, i banner e gli elementi in evidenza.
Colore testo: il codice colore esadecimale del testo nelle esplorazioni e nelle dashboard.
Colore sfondo: il codice colore esadecimale per lo sfondo delle pagine di esplorazione e della dashboard.
Famiglia di caratteri: il nome della famiglia di caratteri. Questo carattere verrà utilizzato per tutto il testo della dashboard, inclusi titoli dei riquadri, riquadri di testo e tabelle 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 carattere 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 e utilizza il campo Origine carattere, descritto di seguito, per fornire un URL alla 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 che non sia un carattere comune sicuro per il web. 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 web open font (.woff), poiché i file .woff2 non sono supportati da Internet Explorer 11.
- Ad esempio, per PT Sans Narrow, puoi inserire "PT Sans Narrow" nel campo Famiglia di caratteri e
https://fonts.gstatic.com/s/ptsansnarrow/v7/UyYrYy3ltEffJV9QueSi4RdbPw3QSf9R-kE0EsQUn2A.woffnel campo Origine carattere.
Esempio di esplorazione incorporata con un tema personalizzato
L'esempio seguente mostra un'esplorazione incorporata con un tema personalizzato. Colore chiave è impostato su #e82042 e 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. I colori di accento, i pulsanti e i link vengono visualizzati nel Colore chiave specificato, #e82042:
Dopo l'esecuzione di un'esplorazione, il contorno e il testo del pulsante Esegui vengono visualizzati nel Colore chiave specificato, #e82042:
Esempio di finestra di modifica del riquadro della dashboard incorporato con un tema personalizzato
Oltre agli elementi di Esplora descritti nella sezione precedente, quando modifichi un riquadro della dashboard, il banner viene visualizzato nella tonalità specificata nell'impostazione Colore chiave (#e82042) e nel 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 palette coordinate che si abbinano bene tra loro. Quando assegni 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, garantendo 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 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é la formattazione condizionale applicata a una visualizzazione tabella.
Colore di sfondo: il codice colore esadecimale per lo sfondo della dashboard e dei riquadri di testo.
Margine superiore: se vuoi, 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 vengono 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 vengono misurati in pixel (px).
Lati margini: se vuoi, imposta un valore specifico per il margine sui lati di una dashboard. Scegli tra le opzioni predefinite in un menu a discesa. I margini vengono 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 dell'intestazione di livello 1 dei riquadri Markdown
- Colore del testo delle visualizzazioni dei singoli valori
Colore testo: il codice colore esadecimale per i seguenti elementi:
- Testo nella dashboard, incluse le legende nelle visualizzazioni
- Sottotitoli e testo del corpo, ad eccezione del testo dell'intestazione di livello 1, dei riquadri Markdown
- Livello intestazione 1, livello intestazione 2 e testo normale nei riquadri di testo
- Icone dei riquadri nelle visualizzazioni con un singolo valore
Colore del corpo del testo: il codice colore esadecimale per i seguenti elementi:
- Testo del corpo, ad eccezione del testo delle intestazioni di livello 2 e 3, nei riquadri Markdown.
- Testo del corpo nei riquadri di testo
Colore di sfondo: il codice colore esadecimale per lo sfondo di tutti i riquadri, ad eccezione di quelli di testo. I riquadri di testo utilizzano lo stesso colore di sfondo della dashboard, che viene impostato utilizzando l'opzione Colore sfondo nella sezione Pagina dashboard.
Allineamento dei titoli: imposta l'allineamento dei titoli dei riquadri su sinistra, destra o centro.
Dimensioni carattere del titolo: se vuoi, puoi regolare le dimensioni dei caratteri dei riquadri della dashboard da un insieme di dimensioni predefinite in pixel.
Ombreggiatura casella: crea un'ombra attorno ai riquadri della dashboard utilizzando la sintassi CSS. Puoi scegliere un'ombra della casella predefinita 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 viene mostrata un'anteprima delle impostazioni dell'ombra della casella.
Dimensioni spazio della colonna: (Facoltativo) regola le dimensioni dello spazio tra le colonne dei riquadri della dashboard da un insieme di dimensioni predefinite in pixel.
Dimensioni spazio riga: (Facoltativo) Modifica le dimensioni dello spazio tra le righe dei 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 squadrati o arrotondati.
Controlli della dashboard
Mostra 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 disattivate.
Visualizza il titolo della 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 centrato e allineato nella dashboard. Se questa opzione non è attivata, il titolo della dashboard è allineato a sinistra. Questa opzione è disponibile solo se è stata attivata l'opzione Mostra il titolo della dashboard.
Mostra barra dei filtri: seleziona la casella di controllo per visualizzare la barra dei filtri nella parte superiore della dashboard. Se questa opzione non è selezionata, l'opzione Attiva/disattiva filtri di visualizzazione viene deselezionata e disattivata, nascondendo l'icona dei filtri della dashboard.
Attiva/disattiva filtri di visualizzazione: 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 Ricarica dati della dashboard.
Visualizza menu dashboard: seleziona la casella di controllo per visualizzare il menu della dashboard con tre puntini. Se questa opzione non è selezionata, le opzioni del menu della dashboard non sono disponibili.
Pagina Esplora
All'interno di un tema personalizzato puoi modificare i seguenti elementi nelle pagine di Esplorazione incorporate:
Mostra intestazione: disattiva questa opzione per nascondere l'intera intestazione di un'esplorazione incorporata, inclusi il titolo, l'indicatore dell'ultima esecuzione, il fuso orario dei dati, il pulsante Esegui e il menu a forma di ingranaggio Azioni esplorazione.
Mostra 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 Azioni esplorazione in un'esplorazione incorporata.
Pagina Look
All'interno di un tema personalizzato puoi modificare i seguenti elementi dei look incorporati:
Mostra intestazione: disattiva questa opzione per nascondere l'intera intestazione di un look incorporato, incluso il titolo, l'indicatore dell'ultima esecuzione, il fuso orario dei dati, il pulsante Esegui e il menu a forma di ingranaggio Azioni di esplorazione.
Titolo visualizzato: 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.
Fuso orario visualizzato: 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. Se 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 Esplora azioni in un look incorporato.
Copiare un tema
Puoi copiare un tema esistente selezionando il menu del tema e Copia tema.
Quando crei una copia di un tema, il nome del nuovo tema corrisponde per impostazione predefinita al nome del tema copiato, seguito da "(copia)". Assicurati di modificare manualmente questo nome con un nuovo nome univoco contenente solo caratteri alfanumerici e trattini bassi e 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 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 invece crearne una copia e poi modificarla.
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 conservare gli aggiornamenti.
Eliminazione di un tema
Puoi eliminare qualsiasi tema, ad eccezione del tema Looker o del tema impostato come predefinito. Per eliminare un tema, seleziona il menu del tema e seleziona Elimina tema.
Dopo aver eliminato un tema, qualsiasi dashboard incorporata che lo abbia specificato nel proprio URL utilizzerà il tema predefinito.
Impostare un tema predefinito per le dashboard e le esplorazioni incorporate
I temi personalizzati non sono supportati nei 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 nella tua istanza, seleziona il menu di un tema e seleziona Imposta come predefinito.
Il tema predefinito viene utilizzato per le dashboard e le esplorazioni incorporate nell'istanza di Looker, a meno che non vengano specificate impostazioni diverse per una singola dashboard o esplorazione. Per saperne di più su come vengono applicati i temi e le impostazioni di incorporamento a una dashboard o un'esplorazione incorporate, consulta la sezione Come vengono applicate le impostazioni di temi e incorporamento in questa pagina.
Applicazione di un tema a dashboard ed esplorazioni incorporate specifiche
I temi personalizzati non sono supportati nei look incorporati. I temi personalizzati sono disponibili solo per le dashboard e le esplorazioni incorporate.
Se vuoi che una dashboard o un'esplorazione utilizzi un tema diverso da quello predefinito, puoi specificare un tema diverso nell'URL della dashboard o dell'esplorazione incorporata. A tal fine, aggiungi il parametro theme= con il nome del tema alla fine dell'URL di incorporamento. Ad esempio, se hai un tema denominato "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, aggiungi theme=Red alla fine dell'URL di incorporamento dell'esplorazione:
none
https://example.cloud.looker.com/embed/explore/model_name/explore_name?theme=red
L'elemento theme 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 singoli elementi del tema per la dashboard incorporata, ad esempio tile_background_color e show_title.
Ecco il formato dell'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 di colore devono essere 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 codificata in URL del segno #, ovvero %23. Ad esempio, entrambi questi argomenti 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. Questo rende l'argomento_themeun pratico modo per perfezionare i temi o incorporare le impostazioni. Ad esempio, supponiamo che tu abbia un tema personalizzato che nasconda la barra dei filtri, ma una dashboard in cui sarebbe utile visualizzarla. Puoi utilizzare il tema personalizzato per la dashboard e aggiungere l'argomento_theme={"show_filters_bar":true}all'URL della dashboard incorporata per visualizzare la barra dei filtri in quella dashboard, mantenendo però tutte le altre impostazioni del tema personalizzato. Per saperne di più su come vengono applicati i temi e le impostazioni di incorporamento a una dashboard incorporata, consulta la sezione Come vengono applicate le impostazioni di temi e incorporamento in questa pagina. - Per gli script di programmazione, devi codificare l'argomento
_theme. - L'argomento
_themenon viene applicato quando le dashboard incorporate vengono pubblicate in formato PDF. - L'argomento
_themeviene applicato se scarichi la dashboard come PDF.