Puoi utilizzare i temi personalizzati per personalizzare l'aspetto delle dashboard, dei look e delle esplorazioni di Looker incorporati. 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 uno stile "scuro" per modificare l'aspetto della dashboard incorporata.
Per informazioni sull'impostazione di un tema predefinito per le dashboard e le 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 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:
- 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
_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 visualizzare 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 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é 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, pertanto i caratteri con priorità più elevata o specializzati devono essere elencati per primi. Se disponibili, Looker utilizza le varianti "UI" dei caratteri in modo che i caratteri vengano leggermente modificati per adattarsi meglio ai limiti 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 alcuni esempi di una dashboard, della finestra di modifica del relativo riquadro e di un'esplorazione con il tema Looker.
Esempio di dashboard con il tema Looker
Esempio di finestra di modifica di un riquadro della dashboard con il tema Looker
Esempio di una pagina Esplora 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 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 di incorporamento continueranno a essere utilizzate. Ad esempio, se aggiungi l'argomento _theme={"show_filters_bar":false} all'URL di una dashboard incorporata, la barra dei filtri non viene 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 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:
Poi, aggiungi le specifiche di stile e colore per ogni impostazione che preferisci 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, 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 da 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 dei filtri. 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 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 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 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, che non sia un carattere comune sicuro per il web. La fonte del carattere deve essere un URL completo che inizia con https e rimandi 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 restricted, puoi inserire "PT Sans restricted". nel campo Famiglia di caratteri, quindi inserisci
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. 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 di un 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 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 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 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 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 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 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 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 con un singolo valore
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.
- 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 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 un'ombra della 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 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 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
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 disabilitate.
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.
Visualizza 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 è 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 di Esplorazione 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 Corsa e il menu a forma di ingranaggio delle azioni dell'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:
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.
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.
Mostra 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)". 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 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 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 di Looker o del tema attualmente impostato come predefinito. Per eliminare un tema, seleziona il menu del tema e seleziona 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 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 specifichi 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 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. A tal fine, aggiungi il parametro theme= con il nome del tema alla fine dell'URL di incorporamento. Ad esempio, se hai un tema chiamato "Rosso", aggiungi 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 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 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 la versione codificata dell'URL del segno #, ovvero %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. 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, 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.