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

  • Versão de lançamento: Washingtondc
  • Atualizado 1 de fev. de 2024
  • 4 min. de leitura

    • Você pode usar o módulo Configuração básica IU principal para criar uma identidade visual para 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.

    Antes de Iniciar

    Para se preparar para concluir a configuração básica, reúna as seguintes informações:
    • 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)
    • Hexagonal RGB: #223344
    Consulte Nomes de cores HTML (W3CSchools) para obter informações sobre nomes de cores HTML.

    Procedimento

    1. Navegar até Todos > Propriedades do sistema > Configuração Básica - UI16.
    2. Conclua a configuração alterando qualquer uma das seguintes configurações:
      Tabela 1. Propriedades de configuração básica do sistema
      Rótulo Propriedade Descrição
      Legenda do cabeçalho da página glide.product.description Altere o texto que aparece ao lado do seu logotipo.
      Título da guia do navegador glide.product.name Altere 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 de seleção.

      Clique em 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 UI16 glide.product.image.light Clique em + ao lado da imagem e carregue seu logotipo.
      Formato de data

      Formato de hora

      		 glide.sys.date_format

      glide.sys.time_format

      		 Selecione os formatos 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 nas 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 nas configurações do sistema.
      Cor da listra do divisor de cabeçalho css.$navpage-header-divider-color Selecione ou insira a cor.
      Removedor 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 para UI16 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-destaque-bar-ativo
      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 nas configurações do sistema.
      Cor da barra divisora da guia de navegação não selecionada css.$nav-destaque-bar-inativo
      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 como UI16 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 Favoritos não selecionados
      Cor da borda para UI16 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 filtro
      Tema base selecionado glide.ui.base_theme.selected_theme Alterna o conteúdo principal (tudo menos 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ê saia e faça login novamente para ver a mudança.
    3. Clique em 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 do sistema em suas opções de personalização da IU veem as novas cores de configuração.

    Comparação do tema La Jolla e cobalt

    O tema La Jolla é o novo tema da marca para ServiceNow. Quando você atualiza 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 atualizar 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 cobalto
    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-destaque-bar-ativo

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

    css.$nav-destaque-bar-inativo

    		 #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 de La Jolla: c92c1ee153002300dda1ddeeff7b125b SysID do cobalto: 6f3c9ae153002300dda1ddeeff7b124a