Configurar logotipo, cores e padrões do sistema para IU principal

  • Versão de lançamento: Yokohama
  • Atualizado 30 de jan. de 2025
  • 4 min. de leitura

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

    Antes de Iniciar

    Reúna o seguinte:
    • Obtenha a imagem da faixa da empresa para usar no cabeçalho. A imagem pode ter alta resolução, mas quando é exibida, é dimensionada com base na proporção. Ele é dimensionado para um máximo de 20 px de altura.
    • Obtenha os números hexadecimais ou RGB da cor da marca da sua empresa, normalmente com o departamento de marketing. Use-os para decidir como configurar as cores de fundo da IU.

    Função necessária: administrador

    Por Que e Quando Desempenhar Esta Tarefa

    Cada opção de seleção de cor fornece um seletor de cores para selecionar uma cor. A caixa de texto ao lado do seletor de cores permite inserir o valor da cor como qualquer um dos seguintes formatos CSS:
    • Nome: nomes de cores predefinidos, como vermelho, verde ou azul
    • Decimal RGB: RGB (102, 153, 204)
    • RGB hexadecimal: nº 223344
    Consulte Nomes de cores HTML (W3CSchools) para obter informações sobre nomes de cores HTML.
    Nota:
    Essas informações são aplicáveis a IU principal. Para obter informações sobre temas para Next Experience, consulte Exploração de temas no Next Experience.

    Procedimento

    1. Navegar até Tudo > Propriedades do sistema > Configuração Básica - UI16.
    2. Conclua a configuração alterando qualquer uma das seguintes configurações:
      Tabela 1. Propriedades básicas de configuração do sistema
      Rótulo Propriedade Descrição
      Legenda do cabeçalho da página glide.product.description Mude o texto que aparece ao lado do seu logotipo.
      Título da guia do navegador glide.product.name Mude o texto que aparece na guia do navegador.
      Fuso horário do sistema para todos os usuários, exceto se ele for substituído nos registros do usuário glide.sys.default.tz Selecione o fuso horário na lista.

      Selecione Configurar fusos horários disponíveis para selecionar os fusos horários que seus usuários podem selecionar nas preferências do usuário.
      Imagem da faixa para IU principal glide.product.image.light Selecione + ao lado da imagem e carregue seu logotipo.
      Formato de data

      Formato de hora

      		 glide.sys.date_format

      glide.sys.time_format

      		 Selecione o formato de data e hora nas listas de seleção.
      Cor de plano de fundo do cabeçalho css.$navpage-header-bg Selecione ou insira a cor.
      Plano de fundo do cabeçalho
      Essa cor também é usada como parte da visualização do tema na guia Temas em configurações do sistema.
      Cor do texto da faixa css.$navpage-header-color Selecione ou insira a cor.
      Cor do texto da faixa
      Essa cor também é usada como parte da visualização do tema na guia Temas em configurações do sistema.
      Cor da listra do divisor de cabeçalho css.$navpage-header-divider-color Selecione ou insira a cor.
      Divisor de divisor de cabeçalho
      Cabeçalho/rodapé de navegação css.$navpage-nav-bg Selecione ou insira a cor.
      Navegação
      Itens expandidos com plano de fundo da navegação css.$subnav-background-color Selecione ou insira a cor.
      Aplicação com módulos expandidos para mostrar a diferença de cor
      Cor do texto do módulo do IU principal navegador de aplicações css.$navpage-nav-color-sub Selecione ou insira a cor.
      Favoritos, lista do Connect
      Cor de plano de fundo da guia selecionada da navegação css.$navpage-nav-selected-bg Selecione ou insira a cor.
      Guia selecionada
      Cor da barra divisora da guia de navegação selecionada css.$nav-highlight-bar-active
      Navegador de aplicações com a guia Todas as aplicações selecionada e uma seta indicando o fato de que a linha na guia é azul
      Essa cor também é usada como parte da visualização do tema na guia Temas em configurações do sistema.
      Cor da barra divisora da guia de navegação não selecionada css.$nav-highlight-bar-inactive
      Navegador de aplicações com a guia Todas as aplicações selecionada e uma seta apontando para as outras guias para indicar que a linha tem uma cor diferente
      Cor do separador de navegação css.$nav-hr-color Selecione ou insira a cor.
      Separadores
      Plano de fundo para o navegador e as barras laterais css.$navpage-nav-bg-sub Selecione ou insira a cor.
      Navegador, barras laterais
      Cor do ícone da guia Navegação selecionada no momento para IU principal css.$navpage-nav-selected-color Selecione ou insira a cor.
      Ícone de navegação
      Ícone da guia de navegação não selecionada e a cor dos ícones de favoritos css.$navpage-nav-unselected-color Selecione ou insira a cor.

      Ícone de favoritos não selecionados
      Cor da borda para IU principal css.$navpage-nav-border Selecione ou insira a cor. Também afeta a borda da caixa de pesquisa Filtrar conversas na barra lateral do Bate-papo do Connect.
      Navegador de filtros
      Tema base selecionado glide.ui.base_theme.selected_theme Alterna o conteúdo principal (todo o conteúdo, exceto o navegador de aplicações e o cabeçalho) entre os temas La Jolla e Cobalt.
      Para a maioria das configurações, conforme você faz mudanças, a página é atualizada com uma visualização da mudança. Somente você vê essas mudanças. Algumas configurações exigem que você faça logout e login novamente para ver a mudança.
    3. Selecione Salvar na parte superior ou inferior da página.

    Resultado

    Depois de salvar as mudanças de configuração, todos os usuários que selecionam o tema Sistema em suas opções de personalização de IU veem as novas cores de configuração.

    Comparação entre temas La Jolla e cobalt

    O tema La Jolla é o novo tema da marca ServiceNow. Quando você faz upgrade para Madrid, seu tema é atualizado automaticamente para o tema La Jolla. Todas as personalizações feitas no tema do sistema não serão atualizadas. Use os estilos na lista abaixo para fazer upgrade ou reverter qualquer estilo para o tema novo ou antigo.

    Faça mudanças em qualquer um desses estilos navegando até Propriedades do sistema > Configuração Básica - UI16.

    Tabela 2. Estilos de tema La Jolla e Cobalt
    Propriedade Estilo La Jolla Estilo Cobalt
    Cor de plano de fundo do cabeçalho

    css.$navpage-header-bg

    		 #ffffff #303a46
    Cor da listra do divisor de cabeçalho

    css.$navpage-header-divider-color

    		 #5a7f71 #455464
    Cabeçalho/rodapé de navegação

    css.$navpage-nav-bg

    		 #293e40 #303A46
    Itens expandidos com plano de fundo da navegação

    css.$subnav-background-color

    		 #213234 #303a46
    Cor do texto do módulo para UI16

    css.$navpage-nav-color-sub

    		 #bec1c6 #bec1c6
    Cor de plano de fundo da guia selecionada da navegação

    css.$navpage-nav-selected-bg

    		 #2f4fe #4b545f
    Cor da barra divisora da guia de navegação selecionada

    css.$nav-highlight-bar-active

    		 #82c9b8 #278efc
    Cor da barra divisora da guia de navegação não selecionada

    css.$nav-highlight-bar-inactive

    		 #213234 #81878e
    Cor do separador de navegação

    css.$nav-hr-color

    		 #293e40 #303a46
    Plano de fundo para o navegador e as barras laterais

    css.$navpage-nav-bg-sub

    		 #293e40 #455464
    Cor do ícone da guia Navegação selecionada no momento como UI16

    css.$navpage-nav-selected-color

    		 #82c9b8 #ffffff
    Ícone da guia de navegação não selecionada e a cor dos ícones de favoritos

    css.$navpage-nav-unselected-color

    		 #bec1c6 #bec1c6
    Cor da borda para UI16

    css.$navpage-nav-border

    		 #7a828a #ddd
    Tema base selecionado

    glide.ui.base_theme.selected_theme

    		 SysID da La Jolla: c92c1ee153002300dda1ddeeff7b125b SysID do cobalto: 6f3c9ue153002300dda1ddeeff7b124a