Personalizando a aparência da instância

Um administrador pode mudar 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 CSS.

Nota:

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

• Cor do texto da faixa
• Faixa e cor de fundo da legenda 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 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 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 fundo para Comentários adicionais e Anotações de trabalho
• Posicionamento do botão em formulários
• Ícones usados no formatador de atividade de tarefa
• Cores de fundo para Comentários adicionais do incidente e Anotações de trabalho

Suporte à classe CSS

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

Tabela 1. Suporte de classe CSS para Zurich

Classe do CSS	Descrição	Como configurar	Área afetada
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 listra do divisor de cabeçalho
navpage-button-color	Cor dos seguintes ícones nas barras laterais Expandir/recolher Criar 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 Ícone de texto limpo 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.
texto de pesquisa-cor	Cor do texto de pesquisa, no filtro de navegação e 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	Realça 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 com plano de fundo da 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 para o navegador e as barras laterais	Navegar até Propriedades do sistema > Configuração Básica - UI16 > 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	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
nav-highlight-bar-active	Linha abaixo da guia ativa no navegador de aplicações. Esta 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 divisora da guia de navegação selecionada
nav-highlight-bar-inactive	Linha sob as guias inativas no navegador de aplicações	Navegar até Propriedades do sistema > Configuração Básica - UI16 > Cor da barra divisora da guia de navegação não selecionada
navpage-nav-selected-bg	Cor de plano de fundo da guia selecionada da navegação	Navegar até Propriedades do sistema > Configuração Básica - UI16 > Cor de plano de fundo da guia selecionada da navegação
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 Navegação selecionada no momento para UI16
navpage-nav-selected-color	Ícone da guia de navegação não selecionada e a cor dos ícones de favoritos	Navegar até Propriedades do sistema > Configuração Básica - UI16 > Ícone da guia de navegação não selecionada e a cor dos ícones de favoritos
connect-laestest-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	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.