> ## Documentation Index
> Fetch the complete documentation index at: https://docs.saninternet.com/llms.txt
> Use this file to discover all available pages before exploring further.

# White Label

> Põe a identidade do provedor no painel: título da aba, favicon, logos, rodapé, estilos próprios e o que o painel mostra ou esconde da marca do fabricante.

**Caminho no painel:** menu da esquerda > Configuração > cartão **Aparência** >
**White Label**

![Lista do White Label: o texto sobre Todos os idiomas, as ações em massa e a tabela por idioma com os quadrados de cada item](https://mintcdn.com/san-internet/dZE3NBY61yDby7Jw/keyhelp-admin/imagens/aparencia-white-label.png?fit=max\&auto=format\&n=dZE3NBY61yDby7Jw\&q=85\&s=5cc9ff28da758a4f2473a70847c948c2)

## Uma configuração geral, e uma por idioma

A lista tem uma linha **Todos os idiomas** e uma linha para cada idioma do painel.
Nas colunas, um quadrado por item: **verde** quando o item está configurado
naquela linha, **cinza** quando está vazio.

A tela explica a regra: **Todos os idiomas** vale para todas as contas, e a
configuração de um idioma substitui a geral para quem usa aquele idioma. A própria
tela recomenda pôr o desenho inteiro em **Todos os idiomas** e usar a de idioma
para o que for do idioma, como um título traduzido.

**Medido: a substituição é campo a campo.** Numa linha de espanhol, gravei **só o
título**. Na tela de entrada vista com o navegador em espanhol:

| Item | O que apareceu |
| - | - |
| Título da página | o **novo**, o da linha de espanhol |
| CSS, rodapé | os de **Todos os idiomas** |
| Logo e favicon | os de **Todos os idiomas**, os mesmos bytes |
| Quem usa português | **nada mudou** |

No banco, a linha de espanhol ficou com **um único campo**. O resto não foi
gravado, e por isso continuou vindo da configuração geral.

> [!NOTE]
>
> **Caixa desmarcada numa linha de idioma quer dizer "herda", e não "desliga"**
>
> A tela de um idioma abre com as seis chaves de interface **desmarcadas**, mesmo
> com elas ligadas em **Todos os idiomas**. Conferido: salvar a linha de espanhol
> com elas desmarcadas não gravou nenhuma, e a tela de entrada em espanhol
> continuou com a marca do fabricante escondida.

## Os campos

Clique no lápis da linha para abrir.

![Título da página, favicon e os logos das áreas interna e externa, cada um com versão para o modo padrão e para o modo escuro, e o logo dos e-mails](https://mintcdn.com/san-internet/dZE3NBY61yDby7Jw/keyhelp-admin/imagens/aparencia-white-label-logos.png?fit=max\&auto=format\&n=dZE3NBY61yDby7Jw\&q=85\&s=fc344c5eafc2a9b65a1e5411256253f2)

| Campo | O que troca |
| - | - |
| **Título da página** | o nome na aba do navegador |
| **Favicon** | o ícone da aba |
| **Logo para área interna** | o logo de dentro do painel, com uma versão para o modo padrão e outra para o escuro |
| **Logo para área externa** | o logo da tela de entrada, também em duas versões |
| **Logo para as notificações por e-mail** | o logo dos avisos que o painel manda |

Para os logos, a tela recomenda **SVG**, que fica nítido em qualquer resolução.
Cada imagem tem seu botão **Remover imagem**.

![Editor do rodapé em HTML, o botão Pré-visualizar nesta página, e o editor de CSS adicional com um exemplo que usa body.default-mode e body.dark-mode](https://mintcdn.com/san-internet/dZE3NBY61yDby7Jw/keyhelp-admin/imagens/aparencia-white-label-codigo.png?fit=max\&auto=format\&n=dZE3NBY61yDby7Jw\&q=85\&s=5c4bf91637eaf11ab80f818ec7f79195)

| Campo | O que troca |
| - | - |
| **Rodapé** | o texto do rodapé, em HTML |
| **CSS adicional** | estilos que passam por cima do visual do painel |
| **JavaScript adicional** | código que roda nas páginas, e pode usar jQuery |

O CSS da imagem acima é um exemplo. Para uma regra valer só no modo escuro, a tela
manda começar por `body.dark-mode`, e só no modo padrão, por `body.default-mode`.

> [!WARNING]
>
> **O rodapé tem uma regra de marca**
>
> A tela avisa que KeyHelp é marca registrada da Keyweb AG, e que não é permitido
> apresentar o KeyHelp como marca própria. Trocar o rodapé pelo do provedor é o
> uso previsto. Dizer que o painel é produto do provedor, não.

![Fontes confiáveis e as seis chaves de Configurações da interface do usuário](https://mintcdn.com/san-internet/dZE3NBY61yDby7Jw/keyhelp-admin/imagens/aparencia-white-label-interface.png?fit=max\&auto=format\&n=dZE3NBY61yDby7Jw\&q=85\&s=43c573500c01472358c489a17ddc79ea)

**Fontes confiáveis** são os endereços de fora que o painel trata como
confiáveis. **Conferido no cabeçalho de segurança que o painel manda**
(`Content-Security-Policy`): os dois endereços desta instalação aparecem na
lista de estilos, scripts, conexões, quadros e mídia, e o mesmo cabeçalho aceita
imagem e arquivo de fonte de qualquer endereço. Na prática, uma folha de estilo
ou um script de fora, como o CSS do Google Fonts, precisa do endereço aqui; uma
imagem ou um arquivo de fonte, não.

As seis chaves de **Configurações da interface do usuário**:

| Chave | O que faz |
| - | - |
| a primeira | troca a palavra **KeyHelp** por **Painel de controle** na interface |
| a segunda | esconde as recomendações de produtos da Keyweb |
| a terceira | esconde o link do registro de alterações no Painel de Controle do administrador |
| a quarta | esconde as notícias do KeyHelp no Painel de Controle do administrador |
| a quinta | esconde os links de ajuda da Keyweb no menu do administrador |
| a sexta | esconde os mesmos links no menu do cliente |

## Testar antes de salvar

Rodapé, CSS e JavaScript têm, cada um, um botão **Pré-visualizar nesta página**.

**Conferido: ele não grava nada.** Com uma regra de CSS acrescentada no editor, o
clique mudou a cor do título na página aberta, e o CSS guardado no banco
continuou com o mesmo tamanho e o mesmo conteúdo. Para descartar, saia da página
sem salvar.

## Voltar ao padrão

Cada linha tem uma seta de **redefinir**, e há **Ações em massa > Redefinir
seleção** e **Redefinir todas as configurações**. Todos pedem confirmação.

**Conferido:** redefinir a linha de espanhol apagou só os campos dela, e os de
**Todos os idiomas** continuaram idênticos.

> [!WARNING]
>
> **A linha Todos os idiomas entra na seleção como qualquer outra**
>
> A caixa de **Todos os idiomas** fica na mesma coluna das caixas dos idiomas.
> **Conferido:** marcar a caixa do cabeçalho seleciona as **20 linhas**, a de
> **Todos os idiomas** junto. Redefinir essa seleção apaga o desenho inteiro do
> servidor, e o botão **Redefinir todas as configurações**, pelo nome, faz o
> mesmo sem seleção nenhuma. Ele não foi clicado neste teste.
>
> Antes de redefinir qualquer coisa, guarde uma cópia do CSS, do rodapé e das
> imagens: o painel não tem desfazer.

## O que muda depois de salvar

Cada gravação ou redefinição troca um número de versão do White Label, e esse
número vai no endereço das imagens. Conferido: depois de salvar a linha de
espanhol, o endereço do logo mudou **para todos os idiomas**, e não só para o
espanhol. É isso que faz o navegador buscar o logo novo em vez de usar o que já
tinha guardado.

## O que pode dar errado

| Sintoma | Causa | O que fazer |
| - | - | - |
| **O desenho sumiu para quem usa um idioma, e ficou para os outros** | a linha daquele idioma tem campo gravado que passa por cima do geral | abrir a linha do idioma, ver os quadrados verdes, e redefinir o que não devia estar ali |
| **O desenho sumiu para todo mundo** | a linha **Todos os idiomas** foi redefinida | restaurar pela cópia guardada. Não há desfazer no painel |
| Uma folha de estilo ou um script de fora não carrega | o endereço não está em **Fontes confiáveis** | acrescentar o endereço lá |
| Troquei o logo e ele não aparece | o navegador ainda mostra o antigo | recarregar a página, porque o endereço da imagem muda a cada gravação |
| Uma regra de CSS vale no claro e não no escuro | ela começa por `body.default-mode` | usar `body.dark-mode` para o escuro, ou nenhum dos dois para valer nos dois |

## Ver também

* [Tema](/keyhelp-admin/tema), que avisa que trocar de tema pode pedir ajuste aqui
* [Idiomas](/keyhelp-admin/idiomas), os idiomas que ganham linha própria nesta lista
* [Modo de Manutenção](/keyhelp-admin/modo-de-manutencao), cuja página também mostra este desenho
* [Notificações](/keyhelp-admin/notificacoes), cujos e-mails usam o logo de notificações


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.