Configurações de administrador - Temas

É possível usar temas personalizados para personalizar a aparência dos dashboards incorporados do Looker, dos Looks e das Análises. 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 painel incorporado.

Para mais informações sobre como definir um tema padrão para os dashboards e as Análises, ou para aplicar um tema a um painel específico ou a Análises, consulte a página de documentação Introdução à incorporação: aplicação de temas personalizados.

Você pode definir temas para dashboards incorporados, explorações incorporadas e a janela de edição para blocos em um painel incorporado na página Temas na seção Plataforma do painel Administrador.

Esta página descreve os itens a seguir:

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 do 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 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 tanto aos dashboards incorporados quanto às Análises incorporadas.

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

As Análises 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, interface em árabe Noto Sans, interface Noto Sans Devanagari, Noto Sans Hebraico, Noto Sans Thai, Helvetica, Arial, sans-serif Essas fontes são disponibilizadas pelo aplicativo Looker e são recomendadas porque estarão disponíveis nos navegadores e quando as imagens forem renderizadas. O Looker usa a primeira fonte na lista de famílias de fontes compatível com um caractere. Portanto, as fontes especializadas ou de prioridade mais alta precisam ser listadas primeiro. O Looker usa as variações de fontes da "UI" quando disponíveis para que os caracteres sejam ligeiramente modificados para se ajustarem 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 um painel, uma janela de edição de um bloco do painel e uma Análise com o tema do Looker.

Exemplo de um painel com o tema do Looker

Um painel incorporado do Looker usando o tema padrão do Looker.

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

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 do 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

Você pode mudar a aparência de um painel incorporado ou de uma Análise no tema padrão usando temas personalizados e argumentos de URL. Ao mostrar um painel incorporado ou uma Análise, o Looker aplica configurações na seguinte ordem:

  1. Começa com as configurações do tema padrão
  2. Aplica 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 itens anteriores, o que 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. 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} 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 dos painéis vão mostrar qualquer tema personalizado aplicado.

Criar um tema personalizado

Para criar um tema personalizado, selecione Adicionar tema:

O botão "Adicionar tema" aparece na parte superior da página "Temas".

Em seguida, adicione 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 único, todos os campos são preenchidos automaticamente com os valores do tema padrão. Você pode alterar 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 só pode conter caracteres alfanuméricos e sublinhados. Se você inserir espaços no nome do tema, os espaços serão substituídos por sublinhados quando você salvar o tema.

Geral

As configurações nesta seção se aplicam tanto aos dashboards incorporados quanto às Análises incorporadas.

Cor da chave: os painéis usam essa cor para 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 das Análises e painéis.

Cor do plano 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 no 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 uma Análise. Se houver espaço no nome da fonte, use aspas em torno do nome, como "Open Sans".

  • Se você usa uma fonte comum segura para a Web, basta digitar o nome dela no campo Font Family e deixar o campo Font Source em branco. Se você quiser usar uma fonte menos comum, digite o nome dela no campo Família de fontes e use o campo Fonte da fonte, descrito a seguir, para fornecer um URL para a definição da fonte que você quer usar.

Fonte da fonte: deixe esse campo em branco, a menos que queira usar uma fonte personalizada, que não seja uma fonte 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 usar um arquivo de formato de fonte aberta na Web (.woff), já que 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 Font Family e depois https://fonts.gstatic.com/s/ptsansnarrow/v7/UyYrYy3ltEffJV9QueSi4RdbPw3QSf9R-kE0EsQUn2A.woff no campo Font Source.

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 da tecla está definida como #e82042, e a Família de fontes, como Verdana.

Quando você executa uma Análise em um ambiente incorporado, o texto dela aparece na fonte Família de fontes especificada, Verdana. As cores de destaque, botões e links aparecem na Cor-chave especificada, #e82042:

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

Depois que uma Análise é executada, o contorno e o texto do botão Run aparecem na Key Color #e82042 especificada:

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

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

Além dos elementos "Explorar" descritos na seção anterior, ao editar 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):

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: você também 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 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 da série de dados sejam coordenadas em todo o painel.

  • 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 atribuída 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 substitui 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 de controle e o segundo plano dos blocos de texto.

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

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

Margens laterais: como opção, 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 painel de controle

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:

  • Texto no painel, incluindo legendas em visualizações
  • Legendas e corpo do texto, exceto o texto de nível 1 do cabeçalho, de blocos Markdown
  • Cabeçalho de nível 1, cabeçalho de nível 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 para os seguintes elementos:

  • Corpo de texto, com exceção dos níveis de cabeçalho 2 e 3, em blocos Markdown.
  • Corpo de texto em blocos de texto

Cor 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 do painel de controle, que é definida usando a Cor de fundo na seção Página "Painel".

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

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

Sombra da caixa: crie uma sombra em torno 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, digite o horizontal-offset vertical-offset blur-radius spread-radius color que você quer e selecione Inserir estilo personalizado para aplicar as configurações. Uma prévia das configurações de sombra da caixa é mostrada à direita.

Tamanho da lacuna da 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 com base em 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 cabeçalho do painel: desative essa opção para ocultar todo o cabeçalho do painel, incluindo todos os controles e filtros do painel. Quando essa opção está desativada, todas as outras opções de controle do painel são desmarcadas e desativadas.

Mostrar título do dashboard: marque a caixa de seleção para mostrar o título do painel.

Center Dashboard Title: marque essa caixa de seleção para mostrar o título do painel centralizado no painel. Quando essa opção não está ativada, o título do dashboard é alinhado à esquerda. Essa opção só vai estar disponível se a opção Exibir título do painel estiver ativada.

Exibir barra de filtros: marque a caixa de seleção para exibir a barra de filtros na parte superior do painel. Quando ela não é selecionada, a opção Alternar filtros de exibição fica desmarcada e desativada, ocultando o ícone de filtros do painel.

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

Indicador da última atualização do painel de exibição: marque a caixa de seleção para mostrar o indicador da última atualização do painel.

Mostrar ícone "Atualizar dados": marque a caixa de seleção para mostrar o ícone de atualização do painel de dados.

Exibir menu do painel de controle: marque a caixa de seleção para mostrar o menu do painel de três pontos. Quando essa opção não é selecionada, as opções do menu do painel ficam indisponíveis.

Página "Análise"

Em um tema personalizado, você pode ajustar os seguintes elementos nas páginas Explorar incorporadas:

Display Header: 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 Abrir ações.

Display Title: desative essa opção para ocultar o título de uma Análise incorporada.

Exibir última execução: desative essa opção para ocultar por 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 botão "Executar": desative essa opção para ocultar o botão Run em uma Análise incorporada.

Exibir o botão "Ações": desative essa opção para ocultar o menu de engrenagem das ações em uma Análise incorporada.

Página "Look"

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

Display Header: 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 Abrir ações.

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

Mostrar última execução: 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.

Exibir 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 Run não é exibido.

Exibir o botão "Ações": desative essa opção para ocultar o menu de engrenagem "Abrir ações" em um Look incorporado.

Como copiar um tema

Para copiar um tema já existente, selecione o menu do tema e escolha Copiar tema.

Quando você faz uma cópia de um tema, o nome padrão é o do tema copiado, seguido de "(copy)". Certifique-se de alterar manualmente esse nome para um novo e exclusivo, apenas com caracteres alfanuméricos e sublinhados, e certifique-se de remover 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 de tema descritas anteriormente. Selecione Salvar para manter todas as configurações do tema.

Como editar um tema

O tema Looker é criado automaticamente na instância e não pode ser editado. Se quiser modificar o tema do Looker, será possível criar uma cópia do tema e editá-la.

Em todos os outros temas, você pode selecionar 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 conferir 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 no momento. Para excluir um tema, selecione o menu do tema e escolha Excluir tema.

Depois que você excluir um tema, todos os dashboards incorporados que tiverem esse tema especificado no URL usarão o tema padrão.

Como definir um tema padrão para dashboards incorporados e explorações

Os temas personalizados não têm suporte em Looks incorporados. Os temas personalizados estão disponíveis apenas para dashboards e Análises incorporados.

Para especificar o tema padrão para os painéis incorporados e as Análises na sua instância, selecione o menu de um tema e clique em Definir como padrão.

O tema padrão é usado em dashboards incorporados e Análises 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 as configurações de temas e de incorporação são aplicadas a um painel ou recurso "Explorar".

Aplicar um tema a explorações e dashboards incorporados específicos

Os temas personalizados não têm suporte em 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 incorporado ou em "Explorar". 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 as Análises, adicione theme=Red ao final do URL incorporado da Análise: 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. Por isso, você pode usar theme=Red ou theme=red.

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

Você pode usar o argumento de URL _theme para personalizar elementos de tema individuais para o 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 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 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 pelo URL do sinal #, que é %23. Por exemplo, ambos os argumentos de URL especificam a cor vermelha:

_theme={"title_color":"red","text_tile_text_color":"%23FF0000"}

Confira o que você precisa considerar 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 oculte a barra de filtros, mas tem um painel em que seria interessante mostrar a barra de filtros. Você pode usar o tema personalizado no painel e adicionar o argumento _theme={"show_filters_bar":true} no 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, codifique o argumento _theme em URL.
  • 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 PDF.