Temas para dashboards internos

Você pode usar temas personalizados para personalizar a aparência dos painéis internos (não incorporados) do Looker. É 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. Os temas podem ser aplicados a painéis definidos pelo usuário e painéis do LookML.

Por exemplo, você pode criar um tema "escuro" para mudar a aparência do painel.

É possível definir temas para painéis e a janela de edição de blocos em um painel na página Temas da seção Plataforma do painel Administrador.

Esta página descreve os itens a seguir:

Requisitos de usuário e instância

Para gerenciar temas nos painéis internos do Looker, você precisa atender aos seguintes requisitos:

Aplicar um tema a um painel

Para aplicar um tema a um painel, verifique se ele está no modo de edição e clique em Estilo para abrir o painel Estilo. Selecione um tema no campo Tema, e ele será aplicado ao painel. Se você selecionar Nenhum e sua instância tiver um tema padrão, ele será aplicado.

Como baixar painéis

Os downloads de painéis como PDF mostram qualquer tema personalizado aplicado.

Criar um tema personalizado

Para criar um tema personalizado, na página de administração Temas, selecione a guia Interno e clique em Adicionar tema.

Em seguida, adicione especificações de estilo e cor para cada configuração que você quer personalizar na página Novo tema. 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

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 de análises detalhadas e painéis.

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 comum e segura. 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.woff no campo Origem da fonte.

Exemplo de uma janela de edição de bloco do painel 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 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 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 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, 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.

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

Margem superior: 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: 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:

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 bloco em visualizações de valor único

Cor do corpo do texto: o código hexadecimal 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.

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

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 escolhido 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.

Editar um tema

Em todos os temas, clique no 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.

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, e remova 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.

Excluir um tema

Para excluir um tema, selecione o menu dele e clique em Excluir tema.

Como definir um tema padrão

Se você definir um tema como padrão, ele será aplicado a todos os painéis em que o usuário selecionar a opção Nenhum no campo Temas no modo de edição.

Para definir um tema como padrão, selecione o menu dele e clique em Definir como padrão.

Para remover a configuração padrão do tema padrão, selecione o menu do tema e clique em Remover padrão.