Como personalizar 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 as atividades de desenvolvimento, teste e produção. Para ajudar os usuários a evitar a mudança acidental da instância incorreta, os administradores podem configurar cada uma 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 nomes de corespredefinidos, 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 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 da base de conhecimento)

Propriedades de IU

Navegar até Propriedades do sistema > Propriedades da IU.

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

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

Suporte à classe CSS

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

Tabela 1. Suporte de classe CSS para Xanadu

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 dos ícones de pesquisa global Connect, Ajuda e configurações	Adicione a propriedade CSS ao campo CSS de um tema. Para obter mais informações, consulte Criar ou personalizar 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 (na barra lateral Connect ) Abrir Connect espaço	Adicione a propriedade CSS ao campo CSS de um tema. Para obter mais informações, consulte Criar ou personalizar 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 não criptografado no filtro de navegação	Adicione a propriedade CSS ao campo CSS de um tema. Para obter mais informações, consulte Criar ou personalizar um tema.
$pesquisa-texto-cor	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 Criar ou personalizar 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-destaque-principal	Destaca o módulo depois que o usuário clica nele. No espaço Connect, realça a conversa selecionada.	Adicione a propriedade CSS ao campo CSS de um tema. Para obter mais informações, consulte Criar ou personalizar 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é do navegador e das 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 > 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 Criar ou personalizar 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 na guia ativa no navegador de aplicações. Essa cor também é usada como parte da visualização do tema na guia Temas em 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 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 IU16
$navpage-nav-unselected-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-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 Criar ou personalizar 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 do estado vazio para a barra lateral Connect.	Adicione a propriedade CSS ao campo CSS de um tema. Para obter mais informações, consulte Criar ou personalizar 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 Criar ou personalizar um tema.

• Configurar logotipo, cores e padrões do sistema para IU principal
  Você pode usar o módulo Configuração básica IU principal para personalizar 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 IU principalrecentemente.
• 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 a rótulos de aplicação.
• Alterar as cores do cabeçalho da pergunta da pesquisa
  O ambiente clássico usa uma cor de cabeçalho da cor base, o que permite o tema das propriedades de CSS.
• Suporte ao tema CSS
  Os temas dão à interface do usuário uma aparência específica usando diferentes combinações de cores.