Você pode usar temas personalizados para personalizar a aparência dos painéis, Looks e análises detalhadas do Looker incorporados. É possível 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, você pode criar um tema "escuro" para mudar a aparência do painel incorporado.
Para informações sobre como definir um tema padrão para seus painéis e análises detalhadas ou aplicar um tema a um painel ou análise específica, consulte a página de documentação Começar a usar a incorporação: aplicar temas personalizados.
É possível definir temas para painéis incorporados, análises detalhadas incorporadas e a janela de edição para blocos em um painel incorporado na página Temas da seção Plataforma do painel Administrador.
Esta página descreve os itens a seguir:
- Requisitos
- O tema padrão do Looker
- Como os temas são aplicados aos dashboards e análises incorporados
- Como criar, copiar, editar e excluir um tema personalizado
- Como definir um tema padrão para painéis e análises
- Como aplicar um tema diferente do padrão aos painéis e análises detalhadas selecionados
- Como aplicar o argumento de URL
_themepara selecionar elementos do tema do painel
Requisitos
Para gerenciar temas na sua instância do Looker, é preciso atender aos seguintes requisitos:
- Se a sua instância for do Looker (original), o recurso que permite personalizar temas para painéis incorporados, Looks e Análises precisa ser ativado pelo Looker. Entre em contato com um Google Cloud especialista em vendas para atualizar sua licença desse recurso.
- Se a instância for do Looker (Google Cloud Core), os temas incorporados estarão disponíveis nas edições Enterprise e Embed, mas não na edição Standard.
- Seu usuário do Looker precisa ter a função de administrador ou a permissão
manage_themes.
Tema padrão
O tema padrão do Looker é criado automaticamente na sua instância e não pode ser excluído nem editado. O tema Looker é usado como padrão, a menos que um administrador do Looker especifique outro tema como padrão.
As configurações de 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
- Geral
- Página do painel
- Blocos do painel
- Controles do painel
- Página "Análise"
- Página "Aparência"
Tema
| Nome da configuração | Valor |
|---|---|
| Nome | Looker |
Geral
As configurações nesta seção se aplicam aos dashboards e às análises detalhadas incorporadas.
| 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 detalhadas 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 veiculadas pelo aplicativo Looker e são recomendadas porque ficam disponíveis em navegadores e quando as imagens são renderizadas. O Looker usa a primeira fonte da lista que oferece suporte a um caractere. Portanto, as fontes de maior prioridade ou especializadas devem ser listadas primeiro. O Looker usa as variações "UI" das fontes quando elas estão disponíveis para que os caracteres sejam ligeiramente modificados e se encaixem melhor nos limites dos componentes visuais. |
| Origem da fonte | Nenhum |
Página do painel
| Nome da configuração | Valor |
|---|---|
| Coleção de cores | Nenhum |
| 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 | Nenhum |
| 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 |
| 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 |
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 |
Confira exemplos de um painel, da janela de edição de um bloco do painel e de uma análise detalhada com o tema 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 de análise detalhada 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 de uma análise detalhada do tema padrão usando temas personalizados e argumentos de URL. Ao mostrar um painel incorporado ou uma análise detalhada, 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 anteriores. Isso 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, apenas os elementos especificados no argumento _theme substituem elementos dos outros temas ou das configurações de incorporação. As outras configurações de tema personalizado e 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. Mas as outras configurações do tema personalizado ou de incorporação ainda serão usadas.
Os downloads de painéis mostram qualquer tema personalizado aplicado.
Criar um tema personalizado
Para criar um tema personalizado, selecione Adicionar tema:
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, que precisa ser exclusivo, todos os campos são preenchidos automaticamente com os valores do tema padrão. Você pode 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 detalhadas incorporadas.
Cor principal: os dashboards usam essa cor nos botões principais e nos controles de filtros. As análises detalhadas usam essa cor em links e ícones do seletor de campos, botões principais, banners e destaques.
Cor do texto: o código hexadecimal da cor do texto em análises detalhadas e painéis.
Cor do plano de fundo: o código de cor hexadecimal para o plano de fundo das páginas "Explorar" e do painel.
Família de fontes: o nome da família de fontes. Ela será usada em todo o texto do painel, incluindo títulos de blocos, blocos de texto e legendas nas visualizações. Essa fonte também será usada em todo o texto de uma análise detalhada. Se houver um espaço no nome da fonte, use aspas, como "Open Sans".
- Se você estiver usando uma fonte da Web segura comum, 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 à 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, que não seja uma fonte da Web segura comum. 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, você pode inserir "PT Sans Narrow" no campo Família de fontes e
https://fonts.gstatic.com/s/ptsansnarrow/v7/UyYrYy3ltEffJV9QueSi4RdbPw3QSf9R-kE0EsQUn2A.woffno campo Origem da fonte.
Exemplo de uma análise detalhada incorporada com um tema personalizado
O exemplo a seguir mostra uma análise detalhada 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 detalhada em uma configuração incorporada, o texto aparece na fonte Família de fontes especificada, Verdana. Cores de destaque, botões e links aparecem na Cor principal especificada, #e82042:
Depois que uma análise detalhada é executada, o contorno e o texto do botão Executar aparecem na Cor principal especificada, #e82042:
Exemplo de uma janela de edição de bloco de painel incorporado com um tema personalizado
Além dos elementos do recurso Detalhar descritos na seção anterior, quando você edita um bloco do painel, o banner aparece na cor 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: se quiser, escolha 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 das séries 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, 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 hexadecimal da cor do plano de fundo do painel e dos blocos de texto.
Margem superior: defina um valor específico para a margem na parte de cima de um painel, se quiser. Escolha entre as opções predefinidas em um menu suspenso. As margens são medidas em pixels (px).
Margem inferior: 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: defina um valor específico para a margem nas laterais de um painel, se quiser. 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 hexadecimal dos seguintes elementos:
- Título do painel
- Títulos dos blocos do painel
- Títulos e texto de cabeçalho de nível 1 dos blocos Markdown
- Cor do texto das visualizações de valor único
Cor do texto: o código hexadecimal dos seguintes elementos:
- Texto no painel, incluindo legendas em visualizações
- Subtítulos e corpo do texto, exceto o texto do nível 1 do cabeçalho, dos blocos Markdown
- Cabeçalho nível 1, cabeçalho nível 2 e texto normal em blocos de texto
- Ícones de blocos em visualizações de valor único
Cor do corpo do texto: o código hexadecimal da cor dos seguintes elementos:
- Corpo do texto, exceto cabeçalho de nível 2 e cabeçalho de nível 3, em blocos Markdown.
- Corpo do texto em blocos de texto
Cor do plano de fundo: o código hexadecimal da cor do 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 de 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.
Tamanho da fonte do título: se quiser, ajuste o tamanho da fonte dos blocos do painel usando um conjunto de tamanhos predefinidos em pixels.
Box Shadow: cria 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 suas configurações. Uma prévia das configurações de sombra da caixa é mostrada à direita.
Tamanho do intervalo de coluna: se quiser, ajuste o tamanho do espaço entre as colunas dos blocos do painel usando um conjunto de tamanhos predefinidos em pixels.
Tamanho do intervalo de linha: se quiser, 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 opcionalmente 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 está 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 mostrar o título do dashboard.
Centralizar título do dashboard: marque essa caixa de seleção para mostrar o título do dashboard centralizado no painel. Quando essa opção não está ativada, o título do painel fica alinhado à esquerda. Essa opção só fica 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 Mostrar alternância de filtros é desmarcada e desativada, ocultando o ícone de filtros do painel.
Alternância de 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 mostrar o ícone de recarga de dados do painel.
Exibir o menu do painel: marque a caixa de seleção para mostrar o menu de três pontos do painel. 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 de análise detalhada incorporadas:
Mostrar cabeçalho: desative essa opção para ocultar todo o cabeçalho de uma análise detalhada 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 detalhada.
Título de exibição: desative essa opção para ocultar o título de uma análise detalhada incorporada.
Mostrar última execução: desative essa opção para ocultar há quanto tempo a análise detalhada foi executada.
Mostrar fuso horário: desative essa opção para ocultar o fuso horário dos dados em uma análise detalhada incorporada.
Exibir botão "Executar": desative essa opção para ocultar o botão Executar em uma análise detalhada incorporada.
Mostrar botão de ações: desative essa opção para ocultar o menu de engrenagem "Análise" em uma análise incorporada.
Página "Look"
Em um tema personalizado, é possível ajustar os seguintes elementos nos 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 detalhada.
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 a análise detalhada foi executada.
Mostrar fuso horário: 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 Executar não aparece.
Mostrar botão de ações: desative essa opção para ocultar o menu de engrenagem "Analisar ações" em um Look incorporado.
Como 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 é o mesmo do tema copiado, seguido de "(cópia)". Mude manualmente esse nome para um novo e exclusivo com apenas caracteres alfanuméricos e sublinhados. Não se esqueça de remover os parênteses.
Você pode editar o restante das configurações da mesma forma que faria ao criar um tema. Para uma descrição das configurações, consulte as configurações de tema descritas anteriormente. Não se esqueça de selecionar 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 quiser modificar o tema do Looker, crie uma cópia e edite-a.
Para todos os outros temas, selecione o botão Editar associado para atualizar as configurações.
É possível editar as configurações da mesma forma que ao criar um tema. Para uma descrição das configurações, consulte as configurações de tema descritas anteriormente. Não se esqueça de selecionar Salvar para manter as atualizações.
Excluir um tema
Você pode excluir qualquer tema, exceto o Looker ou o definido como padrão. Para excluir um tema, selecione o menu dele e clique em Excluir tema.
Depois que você exclui um tema, qualquer painel incorporado que tenha esse tema especificado no URL usa o tema padrão.
Definir um tema padrão para painéis 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 painéis e análises detalhadas incorporados.
Para especificar o tema padrão dos painéis e análises detalhadas incorporados na sua instância, selecione o menu de um tema e clique em Definir como padrão.
O tema padrão é usado para painéis incorporados e Análises na sua instância do Looker, a menos que você especifique configurações diferentes para um painel 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 eles são aplicados a um painel ou uma análise do recurso Detalhar incorporados.
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 painéis e análises detalhadas incorporados.
Se você quiser que um painel ou uma análise detalhada use um tema diferente do padrão, especifique outro tema no URL do painel ou da análise detalhada 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 "Red", adicione theme=Red ao final do URL do painel incorporado:
https://example.cloud.looker.com/embed/dashboards/246?theme=red
Para as análises detalhadas, 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.
Usar o argumento de URL _theme para aplicar elementos individuais do tema do painel
Você pode 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 ter esta aparência:
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 hexadecimal. Se você estiver usando um código hexadecimal, use a versão codificada por 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"}
Confira algumas coisas a serem consideradas 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 torna o argumento_themeuma maneira prática de refinar temas ou incorporar configurações. Por exemplo, imagine que você tem um tema personalizado que oculta a barra de filtros, mas um painel em que seria útil mostrar essa barra. Você pode 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 nele, 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 eles são aplicados a um painel incorporado. - Para scripts de programação, é necessário codificar o argumento
_themepara URL. - O argumento
_themenão é aplicado ao entregar painéis incorporados em formato PDF. - O argumento
_themeé aplicado se você baixar o painel como um PDF.