Como criar e aplicar temas em painéis incorporados e "explores"

A personalização de temas para painéis incorporados e "explores" é um recurso que precisa ser ativado pelo Looker. Entre em contato com seu gerente de contas do Looker para atualizar sua licença para este recurso.

Temas personalizados não são compatíveis com aparências incorporadas. Os temas personalizados estão disponíveis apenas para painéis incorporados e explorações incorporadas.

As opções de temas personalizados continuam crescendo à medida que adicionamos mais funcionalidades. Quando adicionamos uma opção para temas personalizados, todos os temas atuais recebem o valor padrão para a nova opção. O valor padrão poderá ser modificado usando o editor de tema. Para ver as novidades, consulte a seção Configurações de tema personalizadas abaixo ou a página de documentação da API Criar tema para ver a lista de configurações aceitas para temas.

Visão geral

Você pode definir temas para painéis incorporados, "Explorar" incorporados e a janela de edição para blocos em um painel incorporado na página Temas da seção Plataforma do painel Administrador:

É possível usar temas personalizados para personalizar a aparência dos painéis incorporados e do Explorar 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 "dark" para alterar a aparência do seu painel incorporado:

Nesta página, você verá:

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.

Veja abaixo exemplos de um painel, uma janela de edição de blocos e um de Explorar com o tema Looker.

Painel:

Como editar um bloco do painel no modo de edição do painel:

Explorar:

As configurações do tema Looker, que podem ser visualizadas clicando no botão Visualizar ao lado do tema ou criando uma cópia do tema, são:

Tema:

Nome da configuração Valor Observações
Nome Looker

Informações gerais:

As configurações nesta seção se aplicam tanto aos painéis incorporados quanto aos Explorars incorporados.

Nome da configuração Valor Observações
Cor da chave #1A73E8 Os painéis legados usam essa cor para os botões principais.
Os Painéis usam essa cor nos botões principais e nos controles de filtros.
As explorações usam essa cor nos botões principais, banners e acentos.
Família de fontes Roboto, 'Noto Sans JP', 'Noto Sans CJK KR', 'Noto Sans Devbangari UI', 'Noto Sans Heanagari UI', '#KW; Essas fontes são exibidas pelo aplicativo Looker e são recomendadas porque ficam disponíveis nos navegadores e na renderização das imagens. O Looker usa a primeira fonte na lista de famílias de fontes que aceita um caractere. Portanto, as fontes mais prioritárias ou especializadas devem ser listadas primeiro. O Looker usa as variações de fonte "IU" quando disponíveis, para que os caracteres sejam ligeiramente modificados para se ajustar melhor aos limites dos componentes visuais.
Fonte Nenhum

Página "Painel":

Nome da configuração Valor Observações
Coleção de cores Nenhum
Cor do plano de fundo #f6f8fa

Blocos do painel:

Nome da configuração Valor Observações
Cor do título #3a4245
Cor do texto #3a4245
Cor do corpo do texto Nenhum
Cor do plano de fundo #ffffff
Alinhamento do título Centralizar Não disponível para painéis legados

Cores do botão do painel legado:

Configurações apenas para painéis legados:

Nome da configuração Valor Observações
Cor do botão de informações #0087e1
Cor do botão de aviso #980c11

Controles do painel:

Nome da configuração Valor Observações
Título do painel de exibição Yes
Barra de filtros da tela Yes

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

É possível alterar a aparência de um painel incorporado ou de Explorar do tema padrão usando configurações de incorporação e temas personalizados. Ao exibir um painel incorporado ou "Explorar", o Looker aplica as configurações da seguinte maneira:

  1. Começa com as configurações do tema padrão.
  2. Aplica personalizações da opção Editar configurações da incorporação em um menu de engrenagem de um painel legado, se houver
  3. Aplica as configurações do tema personalizado que é especificado no argumento theme do URL, se houver
  4. Aplica propriedades especificadas no argumento de URL _theme, se houver (somente para painéis)

Cada item substitui os anteriores, o que significa que as configurações de incorporação substituem as configurações de 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, somente os elementos especificados no argumento _theme modificam os elementos dos outros temas ou das configurações de incorporação. As outras configurações de tema personalizadas e de incorporação ainda serão usadas. Por exemplo, se você adicionar o argumento _theme={"show_filters_bar":false} em um URL do 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.

Criar um tema personalizado

Para criar um tema personalizado, clique em Adicionar tema:

Em seguida, adicione as especificações de estilo e cor a cada configuração desejada na página New Theme:

Exceto pelo título, que precisa ser exclusivo, todos os campos são preenchidos automaticamente com os valores do tema padrão. É possível alterar as configurações descritas nas seções abaixo. Clique em Salvar tema para manter as alterações e salvar o novo tema.

Tema

Nome: o nome do tema precisa ser único e conter apenas caracteres alfanuméricos e sublinhados. Se você inserir espaços no nome do tema, eles serão substituídos por sublinhados quando o tema for salvo.

Geral

As configurações nesta seção se aplicam tanto aos painéis incorporados quanto aos Explorars incorporados.

Cor principal: os painéis usam essa cor para os botões principais e os controles de filtros. As explorações usam essa cor para links e ícones do seletor de campos, botões principais, banners e acentos. Os painéis legados usam essa cor para os botões principais.

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 nas visualizações. Esta fonte também será usada para todo o texto em uma guia "Explorar". Se houver um espaço no nome da fonte, use aspas ao redor do nome, como "Abrir Sans".

  • Se você usar uma fonte comum segura para a Web, basta 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 da fonte no campo Font Family e use o campo Font Source abaixo 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 você queira usar uma fonte personalizada, que não seja uma fonte comum segura para a Web. A fonte de fonte precisa ser um URL completo que comece com https e direcione para o valor url especificado no argumento src de @font-face. Recomendamos o uso de 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 a PT Sans Narrow, você pode inserir "PT Sans Narrow" no campo Font Family e, em seguida, inserir https://fonts.gstatic.com/s/ptsansnarrow/v7/UyYrYy3ltEffJV9QueSi4RdbPw3QSf9R-kE0EsQUn2A.woff no campo Font Source.

Ver exemplos

Os exemplos a seguir mostram "explores" incorporados com um tema personalizado. A Cor da chave está definida como #e82042 e a Família de fontes está definida como Verdana.

Explorar incorporado

Quando você faz uma exploração em uma configuração incorporada, o texto dela aparece na fonte especificada Font Family, Verdana. As cores, os botões e os links de destaque são exibidos na Cor da chave especificada, #e82042:

Depois que uma exploração é executada, o texto e o contorno do botão Executar são exibidos na Cor da chave especificada, #e82042:

Uma janela de edição de blocos em um painel incorporado no modo de edição

Além dos elementos "Explorar" acima, quando você você estiver editando um bloco do painel, o banner aparecerá na sombra especificada na configuração Cor da chave (#e82042) e na fonte especificada na configuração Família de fontes (Verdana):

Página do painel

Coleção de cores: como opção, você pode escolher uma coleção de cores, que é um conjunto de paletas coordenadas que funcionam bem juntos. 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 anteriormente a um bloco. No entanto, uma coleção de cores de tema não modificará 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 de todos os blocos, exceto blocos de texto. Os blocos de texto usam a mesma cor de fundo do painel, que é definida com a cor do plano de fundo na seção Página do painel.

Blocos do painel de controle

Cor do título: o código de cor hexadecimal para o título do painel e os títulos dos blocos do painel. (Essa cor não se aplica aos títulos de blocos de texto. Para isso, use o campo Cor do texto.

Cor do texto: o código de cor hexadecimal para o texto no painel, incluindo legendas em visualizações, texto em visualizações de valor único e o título dos blocos de texto.

Cor do corpo do texto: o código de cor hexadecimal para o corpo do texto e o subtítulo 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 blocos de texto. Os blocos de texto usam a mesma cor de fundo do painel, que é definida com 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 à esquerda, à direita ou no centro. Essa opção não está disponível para painéis legados.

Cores do botão do painel legado

Essas configurações estão disponíveis apenas para painéis legados.

Cor do botão de informações: a configuração Cor do botão de informações é reservada para melhorias futuras.

Color do botão do alerta: o código de cor hexadecimal para o botão quando ele está em um estado de aviso. Por exemplo, quando um painel está sendo atualizado, o botão usa esse código de cor com o rótulo Parar. A cor do texto no botão é determinada pela configuração Cor do texto acima.

Controles do painel

Título do painel de exibição: marque a caixa de seleção para exibir o título do painel.

Exibir filtros de barra: marque a caixa de seleção para exibir a barra de filtros na parte superior do painel.

Clique em Salvar tema para manter as configurações.

Copiar um tema

Para copiar um tema existente, clique no menu dele e selecione Copiar tema:

Quando você faz uma cópia de um tema, o nome do novo tema é padronizado para o nome do tema copiado, seguido de "(copy)". Mude manualmente esse nome para um novo que seja exclusivo e inclua apenas caracteres alfanuméricos e sublinhados. Lembre-se de remover os parênteses.

Você pode editar o restante das configurações como faria ao criar um novo tema. Para ver uma descrição das configurações, consulte as configurações do tema acima. Clique em Salvar para manter todas as configurações do tema.

Editar um tema

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

Para todos os outros temas, clique no botão Editar associado para atualizar as configurações:

Você pode editar as configurações como faria ao criar um novo tema. Para ver uma descrição das configurações, consulte as configurações do tema acima. Clique em Salvar para manter suas atualizações.

Como excluir um tema

Você pode excluir qualquer tema, exceto o tema Looker ou o tema definido como padrão. Para excluir um tema, clique no menu dele e selecione Excluir tema:

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

Como definir um tema padrão para painéis incorporados e "explores"

Temas personalizados não são compatíveis com aparências incorporadas. Os temas personalizados estão disponíveis apenas para painéis incorporados e explorações incorporadas.

Para especificar o tema padrão para os painéis incorporados e "Explorars" na instância, clique no menu de um tema e selecione Definir como padrão:

O tema padrão é usado em painéis incorporados e "Explorar" na instância do Looker, a menos que você especifique configurações diferentes para um painel individual ou "Explorar". Consulte a seção Como os temas e as configurações de incorporação são aplicados nesta página para saber mais sobre como os temas e as configurações de incorporação são aplicados a um painel incorporado ou "Explorar".

Aplicar um tema a painéis e explorações incorporados específicos

Temas personalizados não são compatíveis com aparências incorporadas. Os temas personalizados estão disponíveis apenas para painéis incorporados e explorações incorporadas.

Se quiser que um painel ou uma exploração use um tema diferente do padrão, especifique um tema diferente no URL do painel incorporado ou "Explorar". Para 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 "quot;Red"", adicione theme=Red ao final do URL do painel incorporado:

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

Para o recurso "Explorar", você precisa adicionar theme=Red ao final do URL incorporado do Explorar: none https://example.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, use theme=Red ou theme=red.

As configurações do tema personalizado substituem as configurações de incorporação especificadas para um painel legado. Consulte a seção Como os temas e as configurações de incorporação são aplicados nesta página para ver mais informações sobre como os temas e as configurações de incorporação são aplicados a um painel incorporado.

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

É possível usar o argumento de URL _theme para personalizar elementos individuais de tema para o painel incorporado, como tile_background_color e show_title.

Para ver todas as propriedades compatíveis com o objeto _theme, consulte a lista em "ThemeSettings" na página de documentação da API Create Theme.

Este é o formato do argumento de URL _theme:

_theme={"<property>":value}

Por exemplo, é possível usar _theme={"show_filters_bar":false} para ocultar a barra de filtros do painel incorporado. O URL completo pode ter esta aparência:

https://example.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 cores hexadecimal. Se usar um código hexadecimal, use a versão codificada do URL do sinal #, que é %23. Por exemplo, os dois argumentos de URL a seguir 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 _theme substituirá as configurações do elemento em qualquer outro tema ou nas configurações de incorporação de um painel legado. Isso faz com que o argumento _theme seja uma maneira útil de refinar temas ou incorporar configurações. Por exemplo, digamos que você tenha um tema personalizado que oculte a barra de filtros, mas tenha um painel em que a exibição da barra de filtros seria adequada. É possível 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 nesse painel, 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 ver 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 argumento _theme no URL.
  • O argumento _theme não é aplicado ao exibir painéis legados ou painéis incorporados no formato PDF.
  • O argumento _theme será aplicado se você fizer o download do painel como PDF.