Temas para dashboards incorporados, Looks e Análises

É possível definir temas na página Temas na seção Plataforma do painel de admin Administrador. É possível usar temas personalizados 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 para painéis, Looks e Análises incorporados, bem como a janela de edição para blocos em um painel incorporado e interfaces de Análise de Conversas.

Esta página descreve os itens a seguir:

Para saber como definir um tema padrão para seus painéis e Análises ou aplicar um tema a um painel ou Análise específico, consulte a página de documentação Introdução à incorporação: como aplicar temas personalizados.

Requisitos de instância para usar temas incorporados

Observe os seguintes requisitos para gerenciar temas incorporados em uma instância do Looker:

Sobre a página Temas

É possível gerenciar os temas da sua instância na página Temas, na seção Plataforma do painel de admin Administrador.

Se a instância tiver o recurso em fase de pré-lançamento Temas de painéis internos ativado, a página Temas vai mostrar as guias Interno e Incorporado para gerenciar os temas dos painéis do Looker e do conteúdo incorporado, respectivamente.

Tema padrão

O tema padrão do Looker é criado automaticamente na sua 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 tema como padrão.

As configurações do tema do Looker, que podem ser acessadas selecionando o botão Visualizar ao lado do tema ou criando uma cópia dele, são agrupadas nas seguintes seções:

Tema

Nome da configuração Valor
Nome Looker

Geral

As configurações nesta seção se aplicam a dashboards incorporados, Análises incorporadas e interfaces de Análise Conversacional.

Nome da configuração Valor Observações
Cor da tecla #1A73E8 Os dashboards usam essa cor nos botões principais e nos controles de filtros.

As Análises usam essa cor em 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 Arabic UI, Noto Sans Devanagari UI, Noto Sans Hebrew, Noto Sans Thai UI, Helvetica, Arial, sans-serif Essas fontes são disponibilizadas pelo aplicativo do Looker e são recomendadas porque estão disponíveis nos navegadores e quando as imagens são renderizadas. O Looker usa a primeira fonte na lista de famílias de fontes que aceita um caractere. Por isso, as fontes de maior prioridade ou especializadas precisam ser listadas primeiro. O Looker usa as variações de "UI" das fontes quando elas estão disponíveis para que os caracteres sejam ligeiramente modificados para se ajustarem melhor aos limites dos componentes visuais.
Origem da fonte Nenhum

Página do painel

Nome da configuração Valor
Coleção de cores Nenhum
Tamanho da fonte do título None
Margem superior None
Margem inferior None
Margens laterais None

Blocos do dashboard

Nome da configuração Valor
Cor do título #3a4245
Cor do texto #3a4245
Cor do corpo do texto Nenhum
Cor do plano de fundo #ffffff
Cor de plano de fundo do texto None
Alinhamento do título Centralizar
Tamanho da fonte do título Nenhum
Sombra da caixa Nenhum
Tamanho do intervalo da coluna Nenhum
Tamanho do intervalo de linha Nenhum
Raio da borda Nenhum

Controles do dashboard

Nome da configuração Valor
Exibir o cabeçalho do dashboard Sim
Exibir título do dashboard Sim
Centralizar título do dashboard Não
Exibir barra de filtros Sim
Alternador de exibição de filtros Sim

Página "Análise"

Nome da configuração Valor
Exibir cabeçalho Sim
Título de exibição Sim
Exibir última execução Sim
Exibir fuso horário Sim
Exibir o botão "Executar" Sim
Mostrar o botão "Configurações" Sim
Exibir indicador da última atualização do dashboard Sim
Exibir ícone "Recarregar dados" Sim
Mostrar o botão "Mais opções" Sim

Página "Look"

Nome da configuração Valor
Exibir cabeçalho Sim
Título de exibição Sim
Exibir última execução Sim
Exibir fuso horário Sim
Exibir o botão "Executar" Sim
Mostrar o botão "Configurações" Sim

Veja a seguir exemplos de um painel, da janela de edição de um bloco de painel e de uma Análise com o tema Looker.

Exemplo de um painel com o tema Looker

Um painel incorporado do Looker que usa o tema padrão.

Exemplo de uma janela de edição de bloco de painel com o tema Looker

A caixa de diálogo "Editar bloco" em um painel incorporado do Looker usando o tema padrão do Looker.

Exemplo de uma página "Explorar" com o tema Looker

Uma Análise incorporada do Looker usando o tema padrão do Looker.

Como os temas e as configurações de incorporação são aplicados

É possível mudar a aparência de um painel ou uma Análise incorporada do tema padrão usando temas personalizados e argumentos de URL. Ao exibir um dashboard ou uma Análise incorporada, o Looker aplica as configurações na seguinte ordem:

  1. Começa com as configurações do tema padrão.
  2. Aplica as configurações do tema personalizado especificado no argumento theme do URL, se houver.
  3. Aplica as propriedades especificadas no argumento de URL _theme, se houver (somente para painéis).

Cada item substitui os anteriores, ou seja, as configurações de incorporação substituem as configurações do tema padrão, 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. As outras configurações de tema personalizado e de incorporação ainda serão usadas. Por exemplo, se você adicionar o argumento _theme={"show_filters_bar":false} ao URL de um painel incorporado, a barra de filtros não será exibida, mesmo que você tenha ativado a opção Mostrar filtros nas configurações de incorporação ou em um tema personalizado. No entanto, as outras configurações do tema personalizado ou da incorporação ainda serão usadas.

Os downloads de painéis vão mostrar qualquer tema personalizado aplicado.

Como criar um tema personalizado

Para criar um tema personalizado para dashboards, Looks e Análises incorporados, na página Administrador Temas, selecione a guia Incorporar e clique em Adicionar tema.

Em seguida, na página Novos temas, adicione especificações de estilo e cor para cada uma das configurações que você quer personalizar.

Exceto pelo título do tema, que precisa ser exclusivo, todos os campos são preenchidos automaticamente com os valores do tema padrão. É possível mudar qualquer uma das configurações, que são descritas nas seções a seguir. Selecione Salvar tema 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 e às Análises incorporadas.

Cor principal: os dashboards usam essa cor nos botões principais e nos controles de filtros. As Análises usam essa cor em links e ícones do seletor de campos, botões principais, banners e destaques.

Cor do texto: o código de cor hexadecimal do texto em análises e dashboards.

Cor do plano de fundo: o código de cor hexadecimal para o plano de fundo das páginas de Análise e do painel.

Família de fontes: o nome da família de fontes. Essa fonte será usada para todo o texto no painel, incluindo títulos de blocos, blocos de texto e legendas em visualizações. Essa fonte também será usada para todo o texto em uma Análise. Se houver um espaço no nome da fonte, use aspas ao redor do nome, como "Open Sans".

  • Se você estiver usando uma fonte comum segura para a Web, basta digitar o nome da fonte no campo Família de fontes e deixar o campo Origem da fonte em branco. Se você quiser usar uma fonte menos comum, insira 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.

Origem da fonte: deixe esse campo em branco, a menos que você queira usar uma fonte personalizada, ou seja, uma fonte que não seja comum e segura para a Web. A origem 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 usar um arquivo de formato de fonte aberta da Web (.woff), já que os arquivos .woff2 não são compatíveis com o Internet Explorer 11.

  • Por exemplo, para PT Sans Narrow, insira "PT Sans Narrow" no campo Família de fontes e https://fonts.gstatic.com/s/ptsansnarrow/v7/UyYrYy3ltEffJV9QueSi4RdbPw3QSf9R-kE0EsQUn2A.woff no campo Origem da fonte.

Exemplo de uma Análise incorporada com um tema personalizado

O exemplo a seguir mostra uma Análise incorporada com um tema personalizado. A Cor principal está definida como #e82042, e a Família de fontes está definida como Verdana.

Quando você executa uma Análise em uma configuração incorporada, o texto nela aparece na fonte especificada em Família de fontes, Verdana. As cores de destaque, os botões e os links aparecem na cor principal especificada, #e82042:

Uma Análise incorporada com a cor #e82042 aplicada aos botões "Adicionar", "Acessar LookML", ao botão do menu de engrenagem e aos títulos das análises de início rápido.

Depois que uma Análise é executada, o contorno e o texto do botão Executar aparecem na Cor principal especificada, #e82042:

Uma Análise incorporada com a cor #e82042 aplicada ao botão "Executar".

Exemplo de uma janela de edição de bloco de dashboard incorporado com um tema personalizado

Além dos elementos de Análise descritos na seção anterior, quando você edita um bloco de dashboard, o banner aparece na tonalidade especificada na configuração Cor principal (#e82042) e na fonte especificada na configuração Família de fontes (Verdana):

A caixa de diálogo "Editar bloco" em um painel incorporado do Looker com a cor #e82042 aplicada ao banner e a família de fontes Verdana aplicada a todo o texto na página.

Página do painel

Coleção de cores: se quiser, escolha uma coleção de cores, que é um conjunto de paletas que combinam entre si. Quando você atribui uma coleção de cores a um painel, todas as séries de dados em todos os blocos do painel são coloridas de acordo com as paletas da coleção, garantindo que as cores das séries de dados sejam coordenadas em todo o painel.

  • Quando você atribui uma coleção de cores a um tema incorporado, ela 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 a formatação condicional aplicada a uma visualização de tabela.

Cor do plano de fundo: o código de cor hexadecimal para o plano de fundo do painel e dos blocos de texto.

Margem superior: se quiser, defina um valor específico para a margem na parte de cima de um painel. Escolha entre as opções predefinidas em um menu suspenso. As margens são medidas em pixels (px).

Margem inferior: se quiser, defina um valor específico para a margem na parte de baixo de um painel. Escolha entre as opções predefinidas em um menu suspenso. As margens são medidas em pixels (px).

Margens laterais: se quiser, defina um valor específico para a margem nas laterais de um painel. Escolha entre as opções predefinidas em um menu suspenso. As margens são medidas em pixels (px).

Blocos do painel

Cor do título: o código de cor hexadecimal para os seguintes elementos:

Cor do texto: o código de cor hexadecimal para os seguintes elementos:

Cor do corpo do texto: o código de cor hexadecimal para os seguintes elementos:

  • Texto do corpo, com exceção do texto do cabeçalho de nível 2 e do cabeçalho de nível 3, em blocos de Markdown.
  • Corpo do texto em blocos de texto

Cor do plano de fundo: o código de cor hexadecimal para o plano de fundo de todos os blocos, exceto os de texto. Os blocos de texto usam a mesma cor de plano de fundo do painel, que é definida usando a Cor do plano de fundo na seção Página do painel.

Alinhamento do título: defina o alinhamento dos títulos dos blocos como à esquerda, à direita ou centralizado.

Tamanho da fonte do título: ajuste o tamanho da fonte dos blocos do painel usando um conjunto de tamanhos predefinidos em pixels.

Sombra da caixa: crie uma sombra ao redor dos blocos do painel usando a sintaxe CSS. Você pode 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: ajuste o tamanho do espaço entre as colunas de blocos do painel usando um conjunto de tamanhos predefinidos em pixels.

Tamanho do intervalo de linha: ajuste o tamanho do espaço entre as linhas de blocos do painel usando um conjunto de tamanhos predefinidos em pixels.

Raio da borda: ajuste o raio da borda dos blocos do painel para criar cantos quadrados ou arredondados.

Controles do painel

Mostrar cabeçalho do painel: desative essa opção para ocultar todo o cabeçalho do painel, incluindo todos os filtros e controles. Quando essa opção é desativada, todas as outras opções de controle do painel são desmarcadas e desativadas.

Exibir título do dashboard: marque a caixa de seleção para exibir o título do dashboard.

Centralizar título do painel: marque essa caixa de seleção para centralizar o título no painel. Quando essa opção não está ativada, o título do painel fica alinhado à esquerda. Essa opção só estará disponível se a opção Mostrar título do painel estiver ativada.

Mostrar barra de filtros: marque a caixa de seleção para mostrar a barra de filtros na parte de cima do painel. Quando essa opção não está selecionada, a opção Ativar/desativar filtros de exibição é desmarcada e desativada, ocultando o ícone de filtros do painel.

Ativar/desativar filtros de exibição: marque a caixa de seleção para mostrar o ícone de filtros do painel.

Exibir indicador da última atualização do dashboard: marque a caixa de seleção para mostrar o indicador da última atualização do dashboard.

Exibir ícone "Recarregar dados": marque a caixa de seleção para exibir o ícone de recarga de dados do painel.

Mostrar o botão "Mais opções": marque a caixa de seleção para mostrar o menu de três pontos do painel. Quando essa opção está 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 de Análise incorporadas:

Mostrar 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 Ações da Análise.

Mostrar título: desative essa opção para ocultar o título de uma análise incorporada.

Exibir última execução: desative essa opção para ocultar há quanto tempo a Análise foi executada.

Mostrar fuso horário: desative essa opção para ocultar o fuso horário dos dados em uma Análise incorporada.

Exibir o botão "Executar": desative essa opção para ocultar o botão Executar em uma Análise incorporada.

Botão de ação: desative essa opção para ocultar o menu de engrenagem de ações da Análise em uma Análise incorporada.

Página "Look"

Em um tema personalizado, é possível ajustar os seguintes elementos em Looks incorporados:

Mostrar 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 Ações de análise.

Título de exibição: desative essa opção para ocultar o título de um Look incorporado.

Exibir última execução: desative essa opção para ocultar há quanto tempo o Look foi executado.

Mostrar fuso horário: desative essa opção para ocultar o fuso horário dos dados em um Look incorporado.

Exibir o botão "Executar": desative essa opção para ocultar o botão "Executar" em um Look incorporado. Quando a opção Mostrar filtros em Looks incorporados está desativada, o botão Executar não é exibido.

Botão de ação de exibição: desative essa opção para ocultar o menu de engrenagem de ações de análise em um Look incorporado.

Copiar um tema

Para copiar um tema, selecione o menu dele e clique em Copiar tema.

Quando você faz uma cópia de um tema, o nome do novo tema é, por padrão, o nome do tema copiado seguido de "(cópia)". Mude manualmente esse nome para um novo e exclusivo, com apenas caracteres alfanuméricos e sublinhados, e remova os parênteses.

Você pode editar o restante das configurações da mesma forma que faria ao criar um novo tema. Para uma descrição das configurações, consulte as configurações de tema descritas anteriormente. Selecione Salvar para manter todas as configurações de tema.

Editar um tema

O tema Looker é criado automaticamente na sua instância e não pode ser editado. Se você quiser modificar o tema do Looker, crie uma cópia dele e edite-a.

Para todos os outros temas, selecione o botão Editar associado para atualizar as configurações.

Você pode editar as configurações da mesma forma que faria ao criar um novo tema. Para uma descrição das configurações, consulte as configurações de tema descritas anteriormente. Selecione Salvar para manter as atualizações.

Como excluir um tema

É possível excluir qualquer tema, exceto o do Looker ou o que está definido como padrão. Para excluir um tema, selecione o menu dele e escolha Excluir tema.

Depois que você excluir um tema, qualquer painel incorporado que tenha esse tema especificado no URL vai usar o tema padrão.

Como definir um tema padrão para dashboards e análises incorporados

Os temas personalizados não são compatíveis com Looks incorporados. Os temas personalizados estão disponíveis apenas para dashboards e Análises incorporados.

Para especificar o tema padrão dos painéis e das análises incorporados na sua instância, selecione o menu de um tema e escolha Definir como padrão.

O tema padrão é usado para dashboards e Análises incorporados na sua instância do Looker, a menos que você especifique configurações diferentes para um dashboard ou uma Análise individual. Consulte a seção Como os temas e as 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 ou uma Análise incorporada.

Como aplicar um tema a painéis e Análises incorporados específicos

Os temas personalizados não são compatíveis com Looks incorporados. Os temas personalizados estão disponíveis apenas para dashboards e Análises 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 ou da Análise incorporada. 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 incorporado:

https://example.cloud.looker.com/embed/dashboards/246?theme=red

Para as Análises, adicione theme=Red ao final do URL de incorporação: none https://example.cloud.looker.com/embed/explore/model_name/explore_name?theme=red

O elemento de tema no URL não diferencia maiúsculas de minúsculas. Portanto, você pode usar theme=Red ou theme=red.

Como usar o argumento de URL _theme para aplicar elementos individuais de tema do painel

É possível usar o argumento de URL _theme para personalizar elementos de tema individuais do 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 painel incorporado. O URL completo pode ser assim:

https://example.cloud.looker.com/embed/dashboards/236?_theme={"show_filters_bar":false}

Use uma vírgula para especificar várias propriedades de tema:

_theme={"show_title":false,"show_filters_bar":false,"text_tile_text_color":"blue"}

Os valores de cor precisam estar entre aspas e podem ser expressos com o nome da cor ou com o código de cor hexadecimal. Se você usar um código hexadecimal, use a versão codificada do URL do sinal #, que é %23. Por exemplo, estes 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 em um painel incorporado:

  • Qualquer elemento especificado no argumento de URL _theme vai substituir as configurações desse elemento em qualquer outro tema. Isso torna o argumento _theme uma maneira prática de refinar temas ou configurações de incorporação. Por exemplo, digamos que você tenha um tema personalizado que oculta a barra de filtros, mas que tenha um painel em que faça sentido mostrar essa barra. É possível usar o tema personalizado no 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 os temas e as 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.
  • Para scripts de programação, é necessário codificar o URL do argumento _theme.
  • O argumento _theme não é aplicado ao enviar painéis incorporados no formato PDF.
  • O argumento _theme será aplicado se você fizer o download do painel como um PDF.