Personalizando a aparência da instância

Um administrador pode mudar o CSS global ou as propriedades do sistema para alterar a aparência da interface da instância padrão. A funcionalidade não é afetada.

Por exemplo, as organizações geralmente usam várias instâncias para separar atividades de desenvolvimento, teste e produção. Para ajudar os usuários a evitar mudar acidentalmente a instância errada, os administradores podem configurar cada um com um tema visualmente distinto. Várias abordagens estão disponíveis para definir um tema de instância.

Propriedades de CSS

Navegar até Propriedades do sistema > CSS.

As propriedades a seguir estão disponíveis por meio de Propriedades de CSS.

Nota:

As cores são especificadas usando predefinido nomes de cores , Decimais RGB ou hexadecimais RGB.

• Cor do texto da faixa
• Cor de fundo da legenda da faixa e da lista
• Fonte usada em formulários e listas (esta é uma configuração de fonte global)
• Estilos de botão (cor de fundo, cor da borda, largura da borda, cor do texto)
• Cores do indicador de status do campo (incluindo os indicadores de alterado, Obrigatório preenchido, Obrigatório não preenchido e Somente leitura)
• Alinhamento vertical da célula da lista
• Estilos de menu do navegador (tamanho da fonte do texto, cor do plano de fundo, cor do texto)
• Nome e tamanho da fonte do cabeçalho
• Substituição de cor da legenda da lista e do formulário
• Cor de fundo da pesquisa de texto global (para resultados do catálogo e resultados da base de conhecimento)

Propriedades de IU

Navegar até Propriedades do sistema > Propriedades da IU.

As propriedades a seguir estão disponíveis em Propriedades de IU.

• Ícones usados no formatador de atividades
• Cores de plano de fundo para comentários adicionais e anotações de trabalho
• Posicionamento do botão nos formulários
• Ícones usados no formatador de atividade de tarefa
• Cores de plano de fundo para comentários adicionais do incidente e anotações de trabalho

Suporte a classe CSS

Em IU principal(UI16), as propriedades do CSS e como elas afetam a IU da plataforma mudam dependendo da versão.

Nota:

As configurações definidas na página Configuração básica UI16 não são aplicáveis a instâncias com Next Experience habilitado.

Tabela 1. Classes CSS compatíveis

Classe CSS	Descrição	Como configurar
navpage-header-bg	Cor de plano de fundo do cabeçalho	Navegar até Propriedades do sistema > Configuração básica UI16 > Cor de plano de fundo do cabeçalho
navpage-header-color	Cor do texto do cabeçalho e do ícone de pesquisa global	Navegar até Propriedades do sistema > Configuração básica UI16 > Cor do texto da faixa
navpage-header-button-color	Cor do texto do nome de usuário conectado e da pesquisa global Connect, Ajuda e ícones de configurações	Adicione a propriedade CSS ao campo CSS de um tema. Para obter mais informações, consulte Crie ou personalize um tema.
navpage-header-divider-color	Cor do divisor de cabeçalho	Navegar até Propriedades do sistema > Configuração básica UI16 > Cor da faixa do divisor de cabeçalho
navpage-button-color	Cor dos seguintes ícones nas barras laterais Expandir/recolher Crie uma conversa (no Connect barra lateral) Aberto Connect espaço	Adicione a propriedade CSS ao campo CSS de um tema. Para obter mais informações, consulte Crie ou personalize um tema.
navpage-button-color-hover	Cor dos seguintes ícones quando um usuário aponta para o controle: Pesquisa global Ajuda Configurações Limpar ícone de texto no filtro de navegação	Adicione a propriedade CSS ao campo CSS de um tema. Para obter mais informações, consulte Crie ou personalize um tema.
text-color	Cor do texto de pesquisa, tanto no filtro de navegação quanto nos campos de pesquisa global	Adicione a propriedade CSS ao campo CSS de um tema. Para obter mais informações, consulte Crie ou personalize um tema.
navpage-nav-border	Cor da borda do filtro de navegação e do filtro de conversa	Navegar até Propriedades do sistema > Configuração básica UI16 > Cor da borda para UI16
nav-highlight-main	Destaca o módulo depois que o usuário clica nele. Em Connect espaço, destaca a conversa selecionada.	Adicione a propriedade CSS ao campo CSS de um tema. Para obter mais informações, consulte Crie ou personalize um tema.
subnav-background-color	Plano de fundo para itens de navegação expandidos	Navegar até Propriedades do sistema > Configuração básica UI16 > Itens expandidos de plano de fundo de navegação
navpage-nav-bg	Cabeçalho e rodapé para navegador e barras laterais.	Navegar até Propriedades do sistema > Configuração básica UI16 > Cabeçalho/rodapé de navegação
navpage-nav-bg-sub	Plano de fundo do navegador e barras laterais	Navegar até Propriedades do sistema > Configuração básica UI16 > Plano de fundo para navegadores e barras laterais
navpage-nav-color-sub	Cor do texto para módulos na navegação principal	Adicione a propriedade CSS ao campo CSS de um tema. Para obter mais informações, consulte Crie ou personalize um tema.
navpage-nav-mod-text-hover	Cor do texto ao passar o mouse sobre itens na navegação principal	Sem suporte
nav-hr-color	Cor do separador do navegador	Navegar até Propriedades do sistema > Configuração básica UI16 > Cor do separador de navegação
barra de destaque-nav-ative	Linha sob a guia ativa no navegador de aplicações. Essa cor também é usada como parte da visualização do tema na guia Temas nas configurações do sistema.	Navegar até Propriedades do sistema > Configuração básica UI16 > Cor da barra divisória da guia de navegação selecionada
barra de destaque-nav-inactive	Linha sob as guias inativas no navegador de aplicações	Navegar até Propriedades do sistema > Configuração básica UI16 > Cor da barra divisória da guia de navegação não selecionada
navpage-nav-selected-bg	Cor de fundo da guia de navegação selecionada	Navegar até Propriedades do sistema > Configuração básica UI16 > Cor de fundo da guia de navegação selecionada
navpage-nav-selected-color	Cor do ícone da guia de navegação selecionada no momento	Navegar até Propriedades do sistema > Configuração básica UI16 > Cor da guia de navegação selecionada no momento para UI16
navpage-nav-selected-color	Cor do ícone da guia de navegação e dos ícones favoritos não selecionados	Navegar até Propriedades do sistema > Configuração básica UI16 > Cor do ícone da guia de navegação e dos ícones favoritos não selecionados
connect-latest-message	Cor da mensagem selecionada no momento em Connect	Adicione a propriedade CSS ao campo CSS de um tema. Para obter mais informações, consulte Crie ou personalize um tema.
nav-timeago-header-color	Planos de fundo do cabeçalho do carimbo de data/hora na guia Histórico	Sem suporte
navpage-nav app-text	Cor do texto do conteúdo principal para itens como aplicações e o texto de estado vazio para Connect barra lateral.	Adicione a propriedade CSS ao campo CSS de um tema. Para obter mais informações, consulte Crie ou personalize um tema.
navpage-nav app-text-hover	Cor do texto de um módulo selecionado	Adicione a propriedade CSS ao campo CSS de um tema. Para obter mais informações, consulte Crie ou personalize um tema.

• Configure logotipo, cores e padrões do sistema para IU principal
  Você pode usar a Configuração básica IU principal módulo para marcar sua instância com o logotipo e as cores da sua empresa e definir padrões básicos do sistema. Este local é o melhor ponto de partida se você estiver configurando sua instância pela primeira vez ou se tiver habilitado recentemente IU principal.
• Selecione um tema na IU principal
  Você pode alternar entre diferentes temas para a interface do usuário.
• Personalizar categorias de menu
  Use categorias de menu para aplicar estilos CSS aos rótulos da aplicação.
• Mude as cores do cabeçalho da pergunta da pesquisa
  O Ambiente clássico usa uma cor de cabeçalho da cor de base, o que permite a criação de temas das propriedades CSS.
• Suporte a temas CSS
  Os temas dão à interface do usuário uma aparência específica usando diferentes combinações de cores.