--- sourceDocument: Interface do usuário da Now Platform Yokohama sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/pt-BR/yokohama/platform-user-interface Release : - yokohama ft:locale : - pt-BR ft:publication_title : - Interface do usuário da Now Platform Yokohama ft:clusterId : - platux bundleId : - platux workflow : - Platform --- # Configure os padrões de logotipo, cores e sistema para IU principal # Configure os padrões de logotipo, cores e sistema para IU principal {#ariaid-title1} * Versão de lançamento: Yokohama * * Atualizado 30 de jan. de 2025 * * ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 4 min. de leitura Você pode usar a Configuração básica IU principalmó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. ## Antes de Iniciar Reúna o seguinte: * Obtenha a imagem da faixa da empresa a ser usada no cabeçalho. A imagem pode ser de alta resolução, mas quando exibida, ela é dimensionada com base na proporção. Ele escala para um máximo de 20 px de altura. * Obtenha os números hexadecimais ou RGB da cor da marca da sua empresa, normalmente do seu departamento de marketing. Use-os para decidir como configurar as cores de fundo da IU. {#t_ConfigureLogoColorsSysDfltsUI16__ul_f1s_zzy_pt} 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 * RGB decimal: RGB (102, 153, 204) * RGB HEX: Nº 223344 {#t_ConfigureLogoColorsSysDfltsUI16__ul_g31_1bz_pt}Consulte [Nomes de cores HTML (W3CSchools)](http://www.w3schools.com/tags/ref_colornames.asp)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 [Explorando temas em Next Experience](https://servicenow-prod.fluidtopics.net/mP91Ez3e8dkxZNtC9OG1jA "Os temas permitem que você personalize a experiência visual para seus usuários, ajudando a atualizar a aparência para ser mais parecido com a sua marca."). ## Procedimento 1. Navegar até TudoPropriedades do sistemaConfiguração Básica - UI16. 2. Para concluir a configuração, altere qualquer uma das seguintes configurações: {#t_ConfigureLogoColorsSysDfltsUI16__table_n1g_xty_pt__entry__3} | 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 Configure 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 tempo | 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 | 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 | 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 | navpage-header-divider-color | Selecione ou insira a cor. ![Separador divisor da plataforma]() | | Cabeçalho/rodapé de navegação | navpage-nav-bg | Selecione ou insira a cor. ![Navegação]() | | Itens expandidos com plano de fundo da navegação | 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 IU principalnavegador de aplicações | navpage-nav-nav-color-sub | Selecione ou insira a cor. ![Favoritos, Lista de conexão]() | | Cor de plano de fundo da guia selecionada da navegação | navpage-nav-selected-bg | Selecione ou insira a cor. ![Guia selecionada]() | | Cor da barra divisora da guia de navegação selecionada | 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 abaixo da 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 | nav-highlight-bar-inactive | ![Navegador de aplicações com a guia Todas as aplicações selecionada e uma seta aponta para as outras guias para indicar que a linha tem uma cor diferente]() | | Cor do separador de navegação | nav-hr-color | Selecione ou insira a cor. ![Separadores]() | | Plano de fundo para o navegador e as barras laterais | navpage-nav-nav-bg-sub | Selecione ou insira a cor. | | Cor do ícone da guia de navegação selecionada no momento para IU principal | 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 | navpage-nav-selected-color | Selecione ou insira a cor. ![Ícone de favoritos não selecionados]() | | Cor da borda para IU principal | navpage-nav-border | Selecione ou insira a cor. Também afeta a borda do Filtrar conversas Caixa de pesquisa 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 (tudo que não seja o navegador da aplicação e o cabeçalho) entre os temas La Jolla e Cobalt. | [Tabela 1. Propriedades básicas de configuração do sistema] {#t_ConfigureLogoColorsSysDfltsUI16__table_n1g_xty_pt} Na maioria das configurações, conforme você faz mudanças, a página é atualizada com uma visualização da mudança. Essas mudanças são exibidas somente você. 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 Após salvar as mudanças de configuração, todos os usuários que selecionarem Sistema O tema nas opções de personalização da IU veja as novas cores de configuração. ## La jolla e cobalto tema comparação {#ariaid-title2} O tema de La Jolla é o novo tema da marca ServiceNow. Quando você faz upgrade para Madrid, Seu tema é atualizado automaticamente para o tema La Jolla. As personalizações feitas no tema do sistema não serão atualizadas. Use os estilos na lista abaixo para fazer upgrade ou reverter estilos para o tema novo ou antigo. Para fazer mudanças em qualquer um desses estilos, navegue até Propriedades do sistemaConfiguração Básica - UI16. {#new-old-theme-comparison__table_jhh_yv5_yfb__entry__3} | Propriedade | La jolla estilo | Estilo cobalto | |-|-|-| | Cor de plano de fundo do cabeçalho navpage-header-bg | ffffff | 303a46 | | Cor da listra do divisor de cabeçalho navpage-header-divider-color | 5a7f71 | #455464 | | Cabeçalho/rodapé de navegação navpage-nav-bg | 293e40 | 303A46 | | Itens expandidos com plano de fundo da navegação subnav-background-color | #213234 | 303a46 | | Cor do texto do módulo para UI16 navpage-nav-nav-color-sub | bec1c6 | bec1c6 | | Cor de plano de fundo da guia selecionada da navegação navpage-nav-selected-bg | 2f4fe | 4b545f | | Cor da barra divisora da guia de navegação selecionada nav-highlight-bar-active | 82c9b8 | 278efc | | Cor da barra divisora da guia de navegação não selecionada nav-highlight-bar-inactive | Nº 213234 | 81878e | | Cor do separador de navegação nav-hr-color | 293e40 | 303a46 | | Plano de fundo para o navegador e as barras laterais navpage-nav-nav-bg-sub | 293e40 | Nº 455464 | | Cor do ícone da guia Navegação selecionada no momento como UI16 navpage-nav-selected-color | 82c9b8 | ffffff | | Ícone da guia de navegação não selecionada e a cor dos ícones de favoritos navpage-nav-selected-color | bec1c6 | bec1c6 | | Cor da borda para UI16 navpage-nav-border | nº 7a828a | ddd | | Tema base selecionado glide.ui.base_theme.selected_theme | La Jolla SYSID: C92c1ee153002300dda1ddeeff7b125b | Cobalt SYSID: 6f3c9ae153002300dda1ddeeff7b124a | [Tabela 2. Estilos temáticos de La jolla e Cobalt] {#new-old-theme-comparison__table_jhh_yv5_yfb}