Pode usar temas personalizados para personalizar o aspeto dos seus painéis de controlo, Looks e Explores do Looker incorporados. Pode usar temas para personalizar a família de tipos de letra, a cor do texto, a cor do fundo, a cor do botão, a cor do mosaico e outros elementos visuais.
Por exemplo, pode criar um tema "escuro" para alterar o aspeto do painel de controlo incorporado.
Para obter informações sobre como definir um tema predefinido para os seus painéis de controlo e explorações, ou para aplicar um tema a um painel de controlo ou uma exploração específicos, consulte a página de documentação Introdução à incorporação: aplicação de temas personalizados.
Pode definir temas para painéis de controlo incorporados, explorações incorporadas e a janela de edição para mosaicos num painel de controlo incorporado a partir da página Temas na secção Plataforma do painel Administração.
Esta página descreve o seguinte:
- Requisitos
- O tema predefinido do Looker
- Como os temas são aplicados aos painéis de controlo e às explorações incorporados
- Como criar, copiar, editar e eliminar um tema personalizado
- Como definir um tema predefinido para painéis de controlo e explorações
- Como aplicar um tema diferente do predefinido a painéis de controlo e explorações selecionados
- Como aplicar o argumento de URL
_theme
para selecionar elementos do tema do painel de controlo
Requisitos
Para gerir temas na sua instância do Looker, tem de cumprir os seguintes requisitos:
- Se a sua instância for uma instância do Looker (original), a funcionalidade que lhe permite personalizar temas para painéis de controlo incorporados, Looks e Explores tem de ser ativada pelo Looker. Contacte um Google Cloud especialista de vendas para atualizar a sua licença para esta funcionalidade.
- Se a sua instância for uma instância do Looker (Google Cloud core), os temas incorporados estão disponíveis para as edições Enterprise e Embed, mas não para a edição Standard.
- O utilizador do Looker tem de ter a função de administrador ou a autorização
manage_themes
.
Tema predefinido
O tema predefinido do Looker é criado automaticamente na sua instância e não pode ser eliminado nem editado. O tema do Looker é usado como tema predefinido, a menos que um administrador do Looker especifique outro tema como predefinido.
As definições do tema do Looker, que pode ver selecionando o botão Ver junto ao tema ou criando uma cópia do tema, estão agrupadas nas seguintes secções:
- Tema
- Geral
- Página do painel de controlo
- Mosaicos do painel de controlo
- Controlos do painel de controlo
- Página Explorar
- Look page
Tema
Nome da definição | Valor |
---|---|
Nome | Looker |
Geral
As definições nesta secção aplicam-se aos painéis de controlo incorporados e às explorações incorporadas.
Nome da definição | Valor | Notas |
---|---|---|
Cor principal | #1A73E8 |
Os painéis de controlo usam esta cor para os botões principais e os controlos de filtros.A funcionalidade Explorar usa esta cor para botões, faixas e destaques principais. |
Cor do texto | #3e3f40 |
|
Cor do fundo | #f6f8fa |
|
Família de tipos de letra | 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 | Estas fontes são publicadas pela aplicação Looker e são recomendadas porque estão disponíveis em navegadores e quando as imagens são renderizadas. O Looker usa o primeiro tipo de letra na lista de famílias de tipos de letra que suporta um caráter, pelo que os tipos de letra de prioridade mais elevada ou especializados devem ser listados primeiro. O Looker usa as variações "UI" dos tipos de letra quando estão disponíveis para que os carateres sejam ligeiramente modificados para se ajustarem melhor aos limites dos componentes visuais. |
Origem do tipo de letra | Nenhum |
Página do painel de controlo
Nome da definição | Valor |
---|---|
Coleção de cores | Nenhum |
Cor do fundo | #f6f8fa |
Mosaicos do painel de controlo
Nome da definição | Valor |
---|---|
Cor do título | #3a4245 |
Cor do texto | #3a4245 |
Cor do corpo do texto | Nenhum |
Cor do fundo | #ffffff |
Alinhamento do título | Centro |
Controlos do painel de controlo
Nome da definição | Valor |
---|---|
Mostrar título do painel de controlo | Sim |
Mostrar barra de filtros | Sim |
Página Explorar
Nome da definição | Valor |
---|---|
Mostrar cabeçalho | Sim |
Mostrar título | Sim |
Mostrar última execução | Sim |
Mostrar fuso horário | Sim |
Mostrar botão de execução | Sim |
Mostrar botão de definições | Sim |
Página do Look
Nome da definição | Valor |
---|---|
Mostrar cabeçalho | Sim |
Mostrar título | Sim |
Mostrar última execução | Sim |
Mostrar fuso horário | Sim |
Mostrar botão de execução | Sim |
Mostrar botão de definições | Sim |
Seguem-se exemplos de um painel de controlo, da janela de edição de um mosaico do painel de controlo e de uma exploração com o tema do Looker.
Exemplo de um painel de controlo com o tema do Looker
Exemplo de uma janela de edição de mosaicos do painel de controlo com o tema do Looker
Exemplo de uma página Explorar com o tema do Looker
Como os temas e as definições de incorporação são aplicados
Pode alterar o aspeto de um painel de controlo incorporado ou de uma análise detalhada a partir do tema predefinido através de temas personalizados e argumentos de URL. Quando apresenta um painel de controlo ou uma exploração incorporada, o Looker aplica as definições pela seguinte ordem:
- Começa com as definições do tema predefinido
- Aplica as definições do tema personalizado especificado no argumento
theme
do URL, se existir - Aplica propriedades especificadas no argumento de URL
_theme
, se existirem (apenas para painéis de controlo)
Cada item substitui os itens anteriores, o que significa que as definições de incorporação substituem as definições do tema predefinido e os temas personalizados substituem as definições de incorporação e os temas predefinidos.
No entanto, no caso do argumento _theme
URL, apenas os elementos especificados no argumento _theme
substituem os elementos dos outros temas ou das definições de incorporação. As restantes definições do tema personalizado e as definições de incorporação continuam a ser usadas. Por exemplo, se adicionar o argumento _theme={"show_filters_bar":false}
no URL de um painel de controlo incorporado, a barra de filtros não é apresentada, mesmo que tenha ativado a opção Mostrar filtros nas definições de incorporação ou num tema personalizado. No entanto, as outras definições do tema personalizado ou as definições de incorporação continuam a ser usadas.
As transferências de painéis de controlo 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 definição pretendida na página Novo tema.
Exceto o título do tema, que tem de ser exclusivo, todos os campos são preenchidos automaticamente com os valores do tema predefinido. Pode alterar qualquer uma das definições descritas nas secções seguintes. Selecione Guardar tema para manter as alterações e guardar o novo tema.
Tema
Nome: o nome do tema tem de ser exclusivo e só pode conter carateres alfanuméricos e sublinhados. Se introduzir espaços no nome do tema, os espaços são substituídos por sublinhados quando guarda o tema.
Geral
As definições nesta secção aplicam-se aos painéis de controlo incorporados e às explorações incorporadas.
Cor principal: os painéis de controlo usam esta cor para os botões principais e os controlos de filtros. A funcionalidade Explorar usa esta cor para ícones e links do selecionador de campos, botões principais, faixas e destaques.
Cor do texto: o código de cores hexadecimal do texto em Explorar e painéis de controlo.
Cor de fundo: o código de cores hexadecimal para o fundo das páginas Explorar e painel de controlo.
Família de tipos de letra: o nome da família de tipos de letra. Este tipo de letra vai ser usado para todo o texto no painel de controlo, incluindo títulos de mosaicos, mosaicos de texto e legendas em visualizações. Este tipo de letra também é usado para todo o texto numa exploração. Se existir um espaço no nome do tipo de letra, use aspas à volta do nome, como "Open Sans".
- Se estiver a usar um tipo de letra seguro para a Web comum, basta escrever o nome do tipo de letra no campo Família de tipos de letra e deixar o campo Origem do tipo de letra em branco. Se quiser usar um tipo de letra menos comum, introduza o nome do tipo de letra no campo Família de tipos de letra e, em seguida, use o campo Origem do tipo de letra, descrito abaixo, para fornecer um URL para a definição do tipo de letra que quer usar.
Origem do tipo de letra: deixe este campo em branco, a menos que queira usar um tipo de letra personalizado, ou seja, um tipo de letra que não seja um tipo de letra seguro para a Web comum. A origem do tipo de letra tem de ser um URL completo que comece por https
e aponte para o valor url
especificado no argumento src
de @font-face
. Recomendamos que use um ficheiro de formato de tipo de letra aberto para a Web (.woff
), uma vez que os ficheiros .woff2
não são suportados pelo Internet Explorer 11.
- Por exemplo, para PT Sans Narrow, pode introduzir "PT Sans Narrow" no campo Família de tipos de letra e, em seguida, introduzir
https://fonts.gstatic.com/s/ptsansnarrow/v7/UyYrYy3ltEffJV9QueSi4RdbPw3QSf9R-kE0EsQUn2A.woff
no campo Origem do tipo de letra.
Exemplo de uma análise detalhada incorporada com um tema personalizado
O exemplo seguinte mostra uma análise detalhada incorporada com um tema personalizado. A Cor principal está definida como #e82042
e a Família de tipos de letra está definida como Verdana.
Quando está a executar uma análise detalhada numa definição incorporada, o texto na análise detalhada aparece no tipo de letra Font Family especificado, Verdana. As cores de destaque, os botões e os links aparecem na cor das teclas especificada, #e82042
:
Depois de executar uma análise detalhada, o contorno e o texto do botão Executar são apresentados na Cor principal especificada#e82042
:
Exemplo de uma janela de edição de mosaicos do painel de controlo incorporada com um tema personalizado
Além dos elementos Explorar descritos na secção anterior, quando está a editar um mosaico do painel de controlo, a faixa é apresentada na tonalidade especificada na definição Cor principal (#e82042
) e no tipo de letra especificado na definição Família de tipos de letra (Verdana):
Página do painel de controlo
Coleção de cores: opcionalmente, pode escolher uma coleção de cores, que é um conjunto de paletas coordenadas que funcionam bem em conjunto. Quando atribui uma coleção de cores a um painel de controlo, todas as séries de dados em todos os mosaicos do painel de controlo são coloridas de acordo com as paletas na coleção, o que garante que as cores das séries de dados são coordenadas em todo o painel de controlo.
- Quando 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 mosaico. No entanto, uma 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 de fundo: o código de cores hexadecimal para o fundo do painel de controlo e o fundo dos mosaicos de texto.
Margem superior: opcionalmente, defina um valor específico para a margem na parte superior de um painel de controlo. Escolher entre opções predefinidas num menu pendente. As margens são medidas em píxeis (px).
Margem inferior: defina opcionalmente um valor específico para a margem na parte inferior de um painel de controlo. Escolher entre opções predefinidas num menu pendente. As margens são medidas em píxeis (px).
Lados da margem: opcionalmente, defina um valor específico para a margem nos lados de um painel de controlo. Escolher entre opções predefinidas num menu pendente. As margens são medidas em píxeis (px).
Mosaicos do painel de controlo
Cor do título: o código de cores hexadecimal para os seguintes elementos:
- Título do painel de controlo
- Títulos dos mosaicos do painel de controlo
- Títulos e texto de nível 1 dos mosaicos Markdown
- Cor do texto das visualizações de valor único
Cor do texto: o código de cores hexadecimal para os seguintes elementos:
- Texto no painel de controlo, incluindo legendas nas visualizações
- Legendas e texto do corpo, com exceção do texto do nível 1 do cabeçalho, dos mosaicos Markdown
- Cabeçalho de nível 1, cabeçalho de nível 2 e texto normal em mosaicos de texto
- Ícones de mosaicos em visualizações de valor único
Cor do corpo do texto: o código hexadecimal da cor dos seguintes elementos:
- Texto do corpo, com exceção do texto de nível 2 e nível 3 do cabeçalho, em mosaicos Markdown.
- Texto do corpo em mosaicos de texto
Cor de fundo: o código de cor hexadecimal para o fundo de todos os mosaicos, exceto os mosaicos de texto. (Os mosaicos de texto usam a mesma cor de fundo que o painel de controlo, que é definida através da Cor de fundo na secção Página do painel de controlo.)
Alinhamento do título: defina o alinhamento dos títulos dos mosaicos à esquerda, à direita ou ao centro.
Tamanho do tipo de letra do título: opcionalmente, ajuste o tamanho do tipo de letra dos mosaicos do painel de controlo a partir de um conjunto de tamanhos predefinidos em píxeis.
Sombra da caixa: crie uma sombra em torno dos mosaicos do painel de controlo através da sintaxe CSS. Pode selecionar uma sombra de caixa predefinida ou criar uma personalizada. Para criar uma sombra de caixa personalizada, introduza o horizontal-offset vertical-offset blur-radius spread-radius color
pretendido e selecione Introduzir estilo personalizado para aplicar as suas definições. É apresentada uma pré-visualização das definições de sombra da caixa à direita.
Tamanho do espaço entre colunas: opcionalmente, ajuste o tamanho do espaço entre as colunas dos mosaicos do painel de controlo a partir de um conjunto de tamanhos predefinidos em píxeis.
Tamanho do espaço entre linhas: opcionalmente, ajuste o tamanho do espaço entre linhas dos mosaicos do painel de controlo a partir de um conjunto de tamanhos predefinidos em píxeis.
Raio do limite: ajuste opcionalmente o raio do limite dos mosaicos do painel de controlo para criar cantos quadrados ou arredondados.
Controlos do painel de controlo
Apresentar cabeçalho do painel de controlo: desative esta opção para ocultar todo o cabeçalho do painel de controlo, incluindo todos os filtros e controlos do painel de controlo. Quando esta opção está desativada, todas as outras opções de controlo do painel de controlo são desmarcadas e desativadas.
Mostrar título do painel de controlo: selecione a caixa de verificação para apresentar o título do painel de controlo.
Título do painel de controlo central: selecione esta caixa de verificação para apresentar o título do painel de controlo alinhado ao centro no painel de controlo. Quando esta opção não está ativada, o título do painel de controlo está alinhado à esquerda. Esta opção só está disponível se a opção Apresentar título do painel de controlo estiver ativada.
Apresentar barra de filtros: selecione a caixa de verificação para apresentar a barra de filtros na parte superior do painel de controlo. Quando esta opção não está selecionada, a opção Botão para ativar/desativar filtros de visualização é desmarcada e desativada, ocultando o ícone de filtros do painel de controlo.
Mostrar botão de filtros: selecione a caixa de verificação para apresentar o ícone de filtros do painel de controlo.
Mostrar indicador da última atualização do painel de controlo: selecione a caixa de verificação para apresentar o indicador da última atualização do painel de controlo.
Mostrar ícone de atualização de dados: selecione a caixa de verificação para apresentar o ícone de atualização de dados do painel de controlo.
Mostrar menu do painel de controlo: selecione a caixa de verificação para apresentar o menu de três pontos do painel de controlo. Quando esta opção está desmarcada, as opções do menu do painel de controlo não estão disponíveis.
Página Explorar
Num tema personalizado, pode ajustar os seguintes elementos nas páginas Explorar incorporadas:
Mostrar cabeçalho: desative esta opção para ocultar o cabeçalho completo 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 de análise detalhada.
Título de apresentação: desative esta opção para ocultar o título de uma análise detalhada incorporada.
Mostrar última execução: desative esta opção para ocultar há quanto tempo a análise detalhada foi executada.
Fuso horário de apresentação: desative esta opção para ocultar o fuso horário dos dados num relatório Explorar incorporado.
Mostrar botão de execução: desative esta opção para ocultar o botão Executar num Explorar incorporado.
Apresentar botão de ações: desative esta opção para ocultar o menu de engrenagem de ações do Explorar num Explorar incorporado.
Página do Look
Num tema personalizado, pode ajustar os seguintes elementos em visuais incorporados:
Apresentar cabeçalho: desative esta opção para ocultar o cabeçalho completo 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 de exploração.
Título de apresentação: desative esta opção para ocultar o título de um Look incorporado.
Mostrar última execução: desative esta opção para ocultar há quanto tempo a análise detalhada foi executada.
Fuso horário de apresentação: desative esta opção para ocultar o fuso horário dos dados num Look incorporado.
Mostrar botão de execução: desative esta opção para ocultar o botão Executar num Look incorporado. Quando a opção Mostrar filtros em Looks incorporados está desativada, esta opção não mostra o botão Executar.
Apresentar botão de ações: desative esta opção para ocultar o menu de engrenagem Explorar ações num Look incorporado.
Copiar um tema
Pode copiar um tema existente selecionando o menu do tema e Copiar tema.
Quando faz uma cópia de um tema, o nome do novo tema é, por predefinição, o nome do tema copiado, seguido de "(cópia)". Certifique-se de que altera manualmente este nome para um novo nome exclusivo com apenas carateres alfanuméricos e sublinhados, e certifique-se de que remove os parênteses.
Pode editar as restantes definições tal como faria quando criasse um novo tema. Para uma descrição das definições, consulte as definições do tema descritas anteriormente. Certifique-se de que seleciona Guardar para manter todas as definiçõ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, pode criar uma cópia do tema e, em seguida, editar a cópia.)
Para todos os outros temas, pode selecionar o botão Editar associado para atualizar as definições do tema.
Pode editar as definições tal como faria quando criasse um novo tema. Para uma descrição das definições, consulte as definições do tema descritas anteriormente. Certifique-se de que seleciona Guardar para manter as atualizações.
Eliminar um tema
Pode eliminar qualquer tema, exceto o tema Looker ou o tema definido como predefinição. Para eliminar um tema, selecione o menu do tema e selecione Eliminar tema.
Depois de eliminar um tema, qualquer painel de controlo incorporado que tenha esse tema especificado no respetivo URL vai usar o tema predefinido.
Definir um tema predefinido para painéis de controlo incorporados e Explores
Os temas personalizados não são suportados em Looks incorporados. Os temas personalizados só estão disponíveis para painéis de controlo incorporados e explorações incorporadas.
Para especificar o tema predefinido para os painéis de controlo incorporados e as explorações na sua instância, selecione o menu de um tema e selecione Definir como predefinição.
O tema predefinido é usado para painéis de controlo e Explores incorporados na sua instância do Looker, a menos que especifique definições diferentes para um painel de controlo ou um Explore individual. Consulte a secção Como são aplicados os temas e as definições de incorporação nesta página para obter mais informações sobre como os temas e as definições de incorporação são aplicados a um painel de controlo ou a uma página Explorar incorporados.
Aplicar um tema a painéis de controlo e explorações incorporados específicos
Os temas personalizados não são suportados em Looks incorporados. Os temas personalizados só estão disponíveis para painéis de controlo incorporados e explorações incorporadas.
Se quiser que um painel de controlo ou uma exploração use um tema diferente do tema predefinido, pode especificar um tema diferente no URL do painel de controlo ou da exploração incorporada. Para tal, adicione o parâmetro theme=
com o nome do tema ao final do URL de incorporação. Por exemplo, se tiver um tema denominado "Vermelho", adicionaria theme=Red
no final do URL do painel de controlo incorporado:
https://example.cloud.looker.com/embed/dashboards/246?theme=red
Para as explorações, adicionaria theme=Red
no final do URL de incorporação da exploração:
none
https://example.cloud.looker.com/embed/explore/model_name/explore_name?theme=red
O elemento de tema no URL não é sensível a maiúsculas e minúsculas, pelo que pode usar theme=Red
ou theme=red
.
Usar o argumento de URL _theme
para aplicar elementos individuais do tema do painel de controlo
Pode usar o argumento de URL _theme
para personalizar elementos individuais do tema para o seu painel de controlo incorporado, como tile_background_color
e show_title
.
Segue-se o formato do argumento de URL _theme
:
_theme={"<property>":value}
Por exemplo, pode usar _theme={"show_filters_bar":false}
para ocultar a barra de filtros do painel de controlo incorporado. O URL completo pode ter o seguinte aspeto:
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 têm de 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, certifique-se de que usa a versão codificada por 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"}
Seguem-se alguns aspetos a ter em conta quando usar o objeto _theme
para um painel de controlo incorporado:
- Qualquer elemento especificado no argumento de URL
_theme
substitui as definições desse elemento em qualquer outro tema. Isto torna o argumento_theme
uma forma útil de refinar temas ou incorporar definições. Por exemplo, suponhamos que tem um tema personalizado que oculta a barra de filtros, mas tem um painel de controlo onde a apresentação da barra de filtros faria sentido. Pode usar o tema personalizado para o seu painel de controlo e, em seguida, adicionar o argumento_theme={"show_filters_bar":true}
no URL do painel de controlo incorporado para mostrar a barra de filtros nesse painel de controlo, mas manter todas as outras definições do tema personalizado. Consulte a secção Como são aplicados os temas e as definições de incorporação nesta página para mais informações sobre como os temas e as definições de incorporação são aplicados a um painel de controlo incorporado. - Para scripts de programação, tem de codificar o URL do argumento
_theme
. - O argumento
_theme
não é aplicado quando são enviados painéis de controlo incorporados em formato PDF. - O argumento
_theme
é aplicado se transferir o painel de controlo como um PDF.