É possível usar temas personalizados para personalizar a aparência dos dashboards, Looks e Explores incorporados do Looker. Você pode usar temas para personalizar a família de fontes, a cor do texto, a cor do plano de fundo, a cor do botão, a cor do bloco e outros elementos visuais.
Por exemplo, é possível criar um tema "escuro" para mudar a aparência do seu painel incorporado.
Para saber como definir um tema padrão para dashboards e Explores ou como aplicar um tema a um dashboard específico ou ao Explore, consulte a página de documentação Primeiros passos com a incorporação: aplicação de temas personalizados.
Você pode definir temas para dashboards incorporados e Explores incorporados e a janela de edição para blocos em um dashboard incorporado na página Temas na seção Plataforma do painel Administrador.
Esta página descreve os itens a seguir:
- O tema padrão do Looker
- Como os temas são aplicados a dashboards incorporados e Explores
- Como criar, copiar, editar e excluir um tema personalizado.
- Como definir um tema padrão para dashboards e Explores
- Como aplicar um tema diferente do padrão aos dashboards e ao Explores selecionados
- Como aplicar o argumento de URL
_themepara selecionar elementos do tema do painel.
Tema padrão
O tema padrão do Looker é criado automaticamente na instância e não pode ser excluído ou editado. O tema Looker é usado como padrão, a menos que um administrador do Looker especifique outro como padrão.
As configurações do tema do Looker, que podem ser conferidas selecionando o botão Visualizar ao lado do tema ou criando uma cópia dele, estão agrupadas nas seguintes seções:
- Tema
- Geral
- Página do painel
- Blocos do dashboard
- Controles do painel
- Página "Análise"
- Página de visualização
Tema
| Nome da configuração | Valor |
|---|---|
| Nome | Looker |
Geral
As configurações nesta seção se aplicam aos dashboards incorporados e às Explores incorporadas.
| Nome da configuração | Valor | Observações |
|---|---|---|
| Cor da tecla | #1A73E8 |
Os painéis usam essa cor para os botões principais e os controles de filtros.As Explorar usam essa cor para botões principais, banners e destaques. |
| Cor do texto | #3e3f40 |
|
| Cor do plano de fundo | #f6f8fa |
|
| Família de fontes | Roboto, Noto Sans JP, Noto Sans CJK KR, Noto Sans Árabe UI, Noto Sans Devanagari UI, Noto Sans Hebraico, Noto Sans Thai UI, Helvetica, Arial, sans-serif | Essas fontes são exibidas pelo aplicativo Looker e são recomendadas porque ficam disponíveis tanto nos navegadores quanto quando as imagens são renderizadas. O Looker usa a primeira fonte da lista de famílias de fontes que aceita um caractere. Portanto, as fontes especializadas ou de maior prioridade precisam ser listadas primeiro. O Looker usa variações da "UI" de fontes quando disponíveis para que os caracteres sejam ligeiramente modificados para se ajustar melhor aos limites dos componentes visuais. |
| Origem da fonte | Nenhuma |
Página do painel
| Nome da configuração | Valor |
|---|---|
| Coleção de cores | Nenhuma |
| Cor do plano de fundo | #f6f8fa |
Blocos do dashboard
| Nome da configuração | Valor |
|---|---|
| Cor do título | #3a4245 |
| Cor do texto | #3a4245 |
| Cor do corpo do texto | Nenhuma |
| Cor do plano de fundo | #ffffff |
| Alinhamento do título | Centralizar |
Controles do dashboard
| Nome da configuração | Valor |
|---|---|
| Exibir título do dashboard | Sim |
| Exibir barra de filtros | Sim |
Página "Análise"
| Nome da configuração | Valor |
|---|---|
| Exibir cabeçalho | Sim |
| Exibir título | Sim |
| Exibir última execução | Sim |
| Exibir fuso horário | Sim |
| Exibir o botão "Executar" | Sim |
| Mostrar o botão "Configurações" | Sim |
Página "Look"
| Nome da configuração | Valor |
|---|---|
| Exibir cabeçalho | Sim |
| Exibir título | Sim |
| Exibir última execução | Sim |
| Exibir fuso horário | Sim |
| Exibir o botão "Executar" | Sim |
| Mostrar o botão "Configurações" | Sim |
Confira a seguir exemplos de painel, a janela de edição de um bloco de painel e um tema "Explorar" com o Looker.
Exemplo de um painel com o tema do Looker
Exemplo de uma janela de edição de bloco do painel com o tema do Looker
Exemplo de uma página "Explorar" com o tema do Looker
Como os temas e as configurações de incorporação são aplicados
É possível mudar a aparência de um painel incorporado ou do Explore a partir do tema padrão usando temas personalizados e argumentos de URL. Ao mostrar um painel incorporado ou a Análise, o Looker aplica as configurações na seguinte ordem:
- Começa com as configurações do tema padrão
- Aplica as configurações do tema personalizado especificado no argumento
themedo URL, se houver - Aplica as propriedades especificadas no argumento de URL
_theme, se houver (somente para painéis).
Cada item substitui os itens anteriores. Isso significa que as configurações de incorporação substituem as configurações padrão do tema, e os temas personalizados substituem as configurações de incorporação e os temas padrão.
No entanto, no caso do argumento de URL _theme, apenas os elementos especificados no argumento _theme substituem os elementos dos outros temas ou das configurações de incorporação. O restante das configurações de tema personalizado e de incorporação ainda será usado. Por exemplo, se você adicionar o argumento _theme={"show_filters_bar":false} no URL de um painel incorporado, a barra de filtros não será exibida, mesmo que você tenha ativado Mostrar filtros nas configurações de incorporação ou em um tema personalizado. No entanto, as outras configurações do tema personalizado ou das configurações de incorporação ainda serão usadas.
Os downloads de painéis mostrarão qualquer tema personalizado aplicado.
Como criar um tema personalizado
Para criar um tema personalizado, selecione Adicionar tema:
Em seguida, adicione as especificações de estilo e cor para cada configuração desejada na página Novo tema.
Com exceção do título do tema, que precisa ser exclusivo, todos os campos são preenchidos automaticamente com os valores do tema padrão. É possível alterar qualquer uma das configurações, que são descritas nas seções a seguir. Selecione Save Theme para manter as mudanças e salvar o novo tema.
Tema
Nome: o nome do tema precisa ser exclusivo e pode conter apenas caracteres alfanuméricos e sublinhados. Se você inserir espaços no nome do tema, eles serão substituídos por sublinhados quando você salvar o tema.
Geral
As configurações nesta seção se aplicam aos dashboards incorporados e às Explores incorporadas.
Cor principal: os painéis usam essa cor para os botões principais e controles de filtros. As Análises usam essa cor para links e ícones do seletor de campo, botões principais, banners e acentos.
Cor do texto: o código de cor hexadecimal para o texto em Explores e dashboards.
Cor de fundo: o código de cor hexadecimal para o plano de fundo das páginas "Explorar" e "Painel".
Família de fontes: o nome da família de fontes. Essa fonte será usada para todo o texto do dashboard, incluindo títulos de blocos, blocos de texto e legendas nas visualizações. Essa fonte também será usada em todo o texto em um Explore. Se houver um espaço no nome da fonte, coloque o nome entre aspas, por exemplo, "Open Sans".
- Se você estiver usando uma fonte comum segura para a Web, é possível simplesmente digitar o nome da fonte no campo Família de fontes e deixar o campo Fonte da fonte em branco. Se você quiser usar uma fonte menos comum, digite o nome dela no campo Família de fontes e use o campo Origem da fonte, descrito a seguir, para fornecer um URL para a definição da fonte que você quer usar.
Font Source: deixe esse campo em branco, a menos que você queira usar uma fonte personalizada, uma fonte que não seja uma fonte comum segura para a Web. A Fonte da fonte precisa ser um URL completo que comece com https e aponte para o valor url especificado no argumento src de @font-face. Recomendamos o uso de um arquivo no formato de fonte aberta (.woff), porque os arquivos .woff2 não são compatíveis com o Internet Explorer 11.
- Por exemplo, para PT Sans Narrow, você pode digitar "PT Sans Narrow" no campo Família de fontes e depois
https://fonts.gstatic.com/s/ptsansnarrow/v7/UyYrYy3ltEffJV9QueSi4RdbPw3QSf9R-kE0EsQUn2A.woffno campo Fonte da fonte.
Exemplo de uma Análise incorporada com um tema personalizado
O exemplo a seguir mostra um Explore incorporado que tem um tema personalizado. A Key Color está definida como #e82042, e a Font Family está definida como Verdana.
Quando você executa uma Análise em uma configuração incorporada, o texto dela aparece na fonte Família de fontes especificada, a Verdana. Cores de destaque, botões e links aparecem na Cor principal especificada, #e82042:
Depois que uma Análise é executada, o contorno e o texto do botão Run são exibidos na cor da chave especificada, #e82042:
Exemplo de uma janela de edição de bloco do dashboard incorporada com um tema personalizado.
Além dos elementos "Explore" descritos na seção anterior, quando você está editando um bloco do painel, o banner aparece na tonalidade especificada na configuração Cor principal (#e82042) e na fonte especificada na configuração Família de fontes (Verdana):
Página do painel
Coleção de cores: opcionalmente, você pode escolher uma coleção de cores, que é um conjunto de paletas coordenadas que funcionam bem juntas. Quando você atribui uma coleção de cores a um dashboard, todas as séries de dados nos blocos do painel de controle ficam coloridas de acordo com as paletas da coleção, garantindo que as cores da série de dados estejam coordenadas em todo o dashboard.
- Quando você atribui uma coleção de cores a um tema incorporado, a coleção de cores do tema substitui qualquer coleção de cores que tenha sido atribuída anteriormente a um bloco. No entanto, a coleção de cores de um tema não substitui as cores personalizadas atribuídas a uma série de dados, nem modifica a formatação condicional aplicada a uma visualização de tabela.
Cor de fundo: o código de cor hexadecimal para o plano de fundo do painel e para o plano de fundo dos blocos de texto.
Margem superior: permite definir um valor específico para a margem na parte de cima de um painel. Escolha uma das opções predefinidas em um menu suspenso. As margens são medidas em pixels (px).
Margem inferior: você pode definir um valor específico para a margem na parte inferior de um painel. Escolha uma das opções predefinidas em um menu suspenso. As margens são medidas em pixels (px).
Margens laterais: opcionalmente, defina um valor específico para a margem nas laterais de um painel. Escolha uma das opções predefinidas em um menu suspenso. As margens são medidas em pixels (px).
Blocos do dashboard
Cor do título: o código de cor hexadecimal dos seguintes elementos:
- Título do dashboard
- Títulos dos blocos do dashboard
- Títulos e texto de nível 1 de cabeçalho dos blocos de Markdown
- Cor do texto das visualizações de valor único
Cor do texto: o código de cor hexadecimal dos seguintes elementos:
- Texto no painel, incluindo legendas nas visualizações
- Legendas e corpo do texto, exceto o texto do nível 1 do cabeçalho, de blocos de Markdown
- Nível de cabeçalho 1, nível de cabeçalho 2 e texto normal em blocos de texto
- Ícones de bloco em visualizações de valor único
Cor do corpo do texto: o código de cor hexadecimal dos seguintes elementos:
- Corpo de texto, com exceção do texto de nível 2 e de nível 3 do cabeçalho, em blocos de Markdown.
- Corpo de texto em blocos de texto
Cor do plano de fundo: o código de cor hexadecimal do plano de fundo de todos os blocos, exceto dos blocos de texto. Os blocos de texto usam a mesma cor de fundo do dashboard, que é definido em Cor de fundo na seção Página do painel.
Alinhamento do título: defina o alinhamento dos títulos de blocos à esquerda, à direita ou no centro.
Tamanho da fonte do título: como opção, ajuste o tamanho da fonte dos blocos do painel a partir de um conjunto de tamanhos predefinidos em pixels.
Sombra da caixa: crie uma sombra em torno dos blocos do painel usando a sintaxe CSS. É possível selecionar uma sombra de caixa predefinida ou criar uma personalizada. Para criar uma sombra de caixa personalizada, insira o horizontal-offset vertical-offset blur-radius spread-radius color desejado e selecione Inserir estilo personalizado para aplicar as configurações. Uma prévia das configurações de sombra da caixa é mostrada à direita.
Tamanho do intervalo de coluna: como opção, ajuste o tamanho do espaço entre as colunas de blocos do painel a partir de um conjunto de tamanhos predefinidos em pixels.
Tamanho do intervalo de linha: como opção, ajuste o tamanho do espaço entre as linhas de blocos do painel a partir de um conjunto de tamanhos predefinidos em pixels.
Raio da borda: como opção, ajuste o raio da borda dos blocos do painel para criar cantos quadrados ou arredondados.
Controles do painel
Exibir o cabeçalho do painel: desative esta opção para ocultar todo o cabeçalho do painel, incluindo todos os filtros e controles. Quando essa opção está desativada, todas as outras opções de controle do painel são desmarcadas e desativadas.
Exibir título do painel: marque a caixa de seleção para exibir o título do painel.
Título do painel central: marque essa caixa de seleção para exibir o título do painel alinhado ao centro do painel. Quando essa opção não está ativada, o título do painel fica alinhado à esquerda. Essa opção só vai estar disponível se a opção Exibir título do dashboard estiver ativada.
Exibir barra de filtros: marque a caixa de seleção para mostrar a barra de filtros na parte superior do painel. Quando essa opção não está selecionada, a opção Ativar ou desativar filtros de exibição é desmarcada e desativada, ocultando o ícone de filtros do painel.
Ativar ou desativar os filtros de exibição: marque a caixa de seleção para mostrar o ícone dos filtros do painel.
Mostrar indicador da última atualização do painel: marque a caixa de seleção para mostrar o indicador da última atualização do painel.
Mostrar ícone de atualização de dados: marque a caixa de seleção para mostrar o ícone de atualização dos dados do painel.
Exibir menu do painel: marque a caixa de seleção para mostrar o menu do painel de três pontos. Quando essa opção é desmarcada, as opções do menu do painel ficam indisponíveis.
Página "Análise"
Em um tema personalizado, é possível ajustar os seguintes elementos nas páginas "Explorar" incorporadas:
Exibir cabeçalho: desative essa opção para ocultar todo o cabeçalho de uma Análise incorporada, incluindo o título, o indicador da última execução, o fuso horário dos dados, o botão Executar e o menu de engrenagem Ver ações.
Display Title: desative essa opção para ocultar o título de uma Análise incorporada.
Mostrar última execução: desative essa opção para ocultar há quanto tempo a Análise foi executada.
Display Timezone: desative essa opção para ocultar o fuso horário dos dados em uma Análise incorporada.
Display Run Button: desative essa opção para ocultar o botão Run em um Explore incorporado.
Botão "Mostrar ações": desative essa opção para ocultar o menu de engrenagem "Ver ações" em uma Análise incorporada.
Página "Look"
Em um tema personalizado, é possível ajustar os seguintes elementos em Looks incorporados:
Exibir cabeçalho: desative essa opção para ocultar todo o cabeçalho de um Look incorporado, incluindo o título, o indicador da última execução, o fuso horário dos dados, o botão Executar e o menu de engrenagem Explorar ações.
Display Title: desative essa opção para ocultar o title de um Look incorporado.
Display Last Run: desative essa opção para ocultar há quanto tempo o Look foi executado.
Display Timezone: desative essa opção para ocultar o fuso horário dos dados em um Look incorporado.
Display Run Button: desative essa opção para ocultar o botão Run em um Look incorporado. Quando a opção Mostrar filtros em Looks incorporados estiver desativada, o botão Executar não será exibido.
Botão "Mostrar ações": desative essa opção para ocultar o menu de engrenagem "Explorar ações" em um Look incorporado.
Como copiar um tema
Você pode copiar um tema existente selecionando o menu do tema e selecionando Copy Theme.
Quando você faz uma cópia de um tema, o nome do novo tema é o padrão, seguido por "(copy)". Certifique-se de alterar manualmente esse nome para um novo nome exclusivo com apenas caracteres alfanuméricos e sublinhados, e remova os parênteses.
Você pode editar o restante das configurações como faria ao criar um novo tema. Para conferir uma descrição das configurações, consulte as configurações do tema descritas anteriormente. Selecione Salvar para manter todas as configurações do tema.
Como editar um tema
O tema Looker é criado automaticamente na sua instância e não pode ser editado. Para modificar o tema do Looker, crie uma cópia do tema e edite a cópia.
Para todos os outros temas, é possível selecionar o botão Editar associado para atualizar as configurações do tema.
Você pode editar as configurações como faria ao criar um novo tema. Para conferir uma descrição das configurações, consulte as configurações do tema descritas anteriormente. Selecione Salvar para manter suas atualizações.
Como excluir um tema
É possível excluir qualquer tema, exceto o Looker ou aquele que está definido como padrão. Para excluir um tema, selecione o menu dele e Excluir tema.
Depois que você exclui um tema, todos os painéis incorporados que têm esse tema especificado no URL usam o tema padrão.
Como definir um tema padrão para dashboards incorporados e Explores
Não é possível usar temas personalizados em Looks incorporados. Os temas personalizados estão disponíveis somente para dashboards incorporados e Explores incorporados.
Para especificar o tema padrão dos painéis incorporados e das Análises detalhadas na sua instância, selecione o menu de um tema e clique em Definir como padrão.
O tema padrão é usado para dashboards incorporados e Análises na sua instância do Looker, a menos que você especifique configurações diferentes para um painel ou Análise. Consulte a seção Como temas e configurações de incorporação são aplicados nesta página para mais informações sobre como os temas e as configurações de incorporação são aplicados a um painel incorporado ou ao Explore.
Como aplicar um tema a dashboards incorporados específicos e Explores
Não é possível usar temas personalizados em Looks incorporados. Os temas personalizados estão disponíveis somente para dashboards incorporados e Explores incorporados.
Se você quiser que um painel ou uma Análise use um tema diferente do padrão, especifique um tema diferente no URL do painel incorporado ou da Análise. Para fazer isso, adicione o parâmetro theme= com o nome do tema ao final do URL de incorporação. Por exemplo, se você tiver um tema chamado "Vermelho", adicione theme=Red ao final do URL do painel de incorporação:
https://example.cloud.looker.com/embed/dashboards/246?theme=red
Para Análises, adicione theme=Red ao final do URL de exploração incorporado:
none
https://example.cloud.looker.com/embed/explore/model_name/explore_name?theme=red
O elemento do tema no URL não diferencia maiúsculas de minúsculas. Por isso, é possível usar theme=Red ou theme=red.
Usar o argumento de URL _theme para aplicar elementos individuais do tema do painel.
É possível usar o argumento de URL _theme para personalizar elementos de temas individuais no painel incorporado, como tile_background_color e show_title.
Este é o formato do argumento de URL _theme:
_theme={"<property>":value}
Por exemplo, use _theme={"show_filters_bar":false} para ocultar a barra de filtros do seu painel incorporado. O URL completo pode ser semelhante a este:
https://example.cloud.looker.com/embed/dashboards/236?_theme={"show_filters_bar":false}
Use uma vírgula para especificar várias propriedades do tema:
_theme={"show_title":false,"show_filters_bar":false,"text_tile_text_color":"blue"}
Os valores de cor devem estar entre aspas e podem ser expressos com o nome da cor ou com o código de cor hexadecimal. Se você estiver usando um código hexadecimal, use a versão codificada por URL do sinal #, que é %23. Por exemplo, os dois argumentos de URL especificam a cor vermelha:
_theme={"title_color":"red","text_tile_text_color":"%23FF0000"}
Veja alguns pontos a serem considerados ao usar o objeto _theme para um painel incorporado:
- Qualquer elemento especificado no argumento de URL
_themevai substituir as configurações desse elemento em qualquer outro tema. Isso faz do argumento_themeuma maneira prática de refinar temas ou configurações de incorporação. Por exemplo, digamos que você tenha um tema personalizado que oculte a barra de filtros, mas você tenha um painel em que a exibição da barra de filtros faria sentido. Você pode usar o tema personalizado no seu painel e adicionar o argumento_theme={"show_filters_bar":true}ao URL do painel incorporado para mostrar a barra de filtros, mas manter todas as outras configurações do tema personalizado. Consulte a seção Como temas e configurações de incorporação são aplicados nesta página para mais informações sobre como as configurações de temas e incorporação são aplicadas a um painel incorporado. - Para scripts de programação, é preciso codificar o argumento
_themepara URL. - O argumento
_themenão é aplicado na exibição de painéis incorporados no formato PDF. - O argumento
_themeserá aplicado se você fazer o download do painel como PDF.