--- 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 --- # Personalizando a aparência da instância # Personalizando a aparência da instância {#ariaid-title1} * Versão de lançamento: Yokohama * * Atualizado 30 de jan. de 2025 * * ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 5 min. de leitura Um administrador pode mudar as propriedades globais do CSS ou 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 {#customizing-instance-appearance__section_ag1_qz2_p1b} Navegar até Propriedades do sistemaCSS. As propriedades a seguir estão disponíveis por meio de Propriedades de CSS. Nota: As cores são especificadas usando predefinido [nomes de cores](https://www.w3schools.com/css/css_colors.asp)RGB decimais 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 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 do plano 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) {#customizing-instance-appearance__ul_yxr_f3k_2p} ## Propriedades de IU {#customizing-instance-appearance__section_b45_d2f_p1b} Navegar até Propriedades do sistemaPropriedades da IU. As propriedades a seguir estão disponíveis em Propriedades de IU. * Ícones usados no formatador de atividades * Cores de plano de fundo para comentários adicionais e anotações de trabalho * Posicionamento do botão nos formulários * Ícones usados no formatador de atividade de tarefa * Cores de plano de fundo para comentários adicionais do incidente e anotações de trabalho {#customizing-instance-appearance__ul_chy_f2f_p1b} ## Suporte à classe CSS {#customizing-instance-appearance__section_nzg_l2f_p1b} Em IU principal(UI16), as propriedades do CSS e como elas afetam a IU da plataforma mudam dependendo da versão. {#customizing-instance-appearance__table_xxt_5bk_11b__entry__4} | Classe do CSS | Descrição | Como configurar | Área afetada | |-|-|-|-| | navpage-header-bg | Cor de plano de fundo do cabeçalho | Navegar até Propriedades do sistemaConfiguração Básica - UI16Cor de plano de fundo do cabeçalho | ![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 sistemaConfiguração Básica - UI16Cor do texto da faixa | ![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](https://servicenow-prod.fluidtopics.net/ArajioHVg6O8xJr747eUaQ "Você pode criar temas ou personalizar temas existentes."). | ![Cabeçalho com nome de usuário e. Connect, Ajuda e ícones de configurações realçados]() | | navpage-header-divider-color | Cor do divisor do cabeçalho | Navegar até Propriedades do sistemaConfiguração Básica - UI16Cor da listra do divisor de cabeçalho | ![Separador divisor da plataforma]() | | navpage-button-color | Cor dos seguintes ícones nas barras laterais * Expandir/recolher * Criar uma conversa (no Connectbarra lateral) * Aberto Connectespaço {#customizing-instance-appearance__ul_tt4_ckt_b1b} | Adicione a propriedade CSS ao campo CSS de um tema. Para obter mais informações, consulte [Crie ou personalize um tema](https://servicenow-prod.fluidtopics.net/ArajioHVg6O8xJr747eUaQ "Você pode criar temas ou personalizar temas existentes."). | ![Connect barra lateral com seta apontando para o ícone de mais]() | | navpage-button-color-hover | Cor dos seguintes ícones quando um usuário aponta para o controle: * Pesquisa global * Ajuda * Configurações * Limpar ícone de texto no filtro de navegação {#customizing-instance-appearance__ul_dh2_lkt_b1b} | Adicione a propriedade CSS ao campo CSS de um tema. Para obter mais informações, consulte [Crie ou personalize um tema](https://servicenow-prod.fluidtopics.net/ArajioHVg6O8xJr747eUaQ "Você pode criar temas ou personalizar temas existentes."). | ![Aponte para o ícone Ajuda para mostrar que ele fica azul quando um usuário aponta para ele]() ![Aponte para a opção Limpar no Navegador de aplicações para mostrar que ela também está azul no ponto para]() | | search-text-color | 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 [Crie ou personalize um tema](https://servicenow-prod.fluidtopics.net/ArajioHVg6O8xJr747eUaQ "Você pode criar temas ou personalizar temas existentes."). | ![Pesquisa no navegador de aplicações mostrando "incidente" em branco]() | | navpage-nav-border | Cor da borda do filtro de navegação e do filtro de conversa | Navegar até Propriedades do sistemaConfiguração Básica - UI16Cor da borda para UI16 | ![Navegador de filtros]() | | nav-highlight-main | Destaca o módulo depois que o usuário clica nele. Em Connectespaç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](https://servicenow-prod.fluidtopics.net/ArajioHVg6O8xJr747eUaQ "Você pode criar temas ou personalizar temas existentes."). | ![Conversa selecionada no ConnectEspaço mostrando a cor correta]() | | subnav-background-color | Plano de fundo para itens de navegação expandidos | Navegar até Propriedades do sistemaConfiguração Básica - UI16Itens expandidos com plano de fundo da navegação | ![Aplicação com módulos expandidos para mostrar a diferença de cor]() | | navpage-nav-bg | Cabeçalho e rodapé para navegador e barras laterais. | Navegar até Propriedades do sistemaConfiguração Básica - UI16Cabeçalho/rodapé de navegação | ![Navegação]() | | navpage-nav-bg-sub | Plano de fundo para o navegador e as barras laterais | Navegar até Propriedades do sistemaConfiguração Básica - UI16Plano 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 [Crie ou personalize um tema](https://servicenow-prod.fluidtopics.net/ArajioHVg6O8xJr747eUaQ "Você pode criar temas ou personalizar temas existentes."). | | | 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 sistemaConfiguração Básica - UI16Cor do separador de navegação | ![Separadores]() | | barra de destaque-nav-ative | Linha abaixo da guia ativa no navegador de aplicações. Essa cor também é usada como parte da visualização do tema na guia Temas nas configurações do sistema. | Navegar até Propriedades do sistemaConfiguração Básica - UI16Cor da barra divisora da guia de navegação selecionada | ![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]() | | barra de destaque de nav-highlight-bar-inactive | Linha sob as guias inativas no navegador de aplicações | Navegar até Propriedades do sistemaConfiguração Básica - UI16Cor da barra divisora da guia de navegação não selecionada | ![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]() | | navpage-nav-selected-bg | Cor de plano de fundo da guia selecionada da navegação | Navegar até Propriedades do sistemaConfiguração Básica - UI16Cor de plano de fundo da guia selecionada da navegação | ![Guia selecionada]() | | navpage-nav-selected-color | Cor do ícone da guia de navegação selecionada no momento | Navegar até Propriedades do sistemaConfiguração Básica - UI16Cor da guia de navegação selecionada no momento para UI16 | ![Ícone de navegação]() | | navpage-nav-selected-color | Ícone da guia de navegação não selecionada e a cor dos ícones de favoritos | Navegar até Propriedades do sistemaConfiguração Básica - UI16Ícone da guia de navegação não selecionada e a cor dos ícones de favoritos | ![Cor do ícone favorito]() | | 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 [Crie ou personalize um tema](https://servicenow-prod.fluidtopics.net/ArajioHVg6O8xJr747eUaQ "Você pode criar temas ou personalizar temas existentes."). | | | 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 Connectbarra lateral. | Adicione a propriedade CSS ao campo CSS de um tema. Para obter mais informações, consulte [Crie ou personalize um tema](https://servicenow-prod.fluidtopics.net/ArajioHVg6O8xJr747eUaQ "Você pode criar temas ou personalizar temas existentes."). | | | 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](https://servicenow-prod.fluidtopics.net/ArajioHVg6O8xJr747eUaQ "Você pode criar temas ou personalizar temas existentes."). | | [Tabela 1. Suporte de classe CSS para Yokohama] {#customizing-instance-appearance__table_xxt_5bk_11b} * **[Configure os padrões de logotipo, cores e sistema para IU principal](https://servicenow-prod.fluidtopics.net/7FwaQrXBL3p2FeYthU3ueA#t_ConfigureLogoColorsSysDfltsUI16)** 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. * **[Selecione um tema na IU principal](https://servicenow-prod.fluidtopics.net/NBIgPAXK5YPvETWESQt81Q)** Você pode alternar entre diferentes temas para a interface do usuário. * **[Personalizar categorias de menu](https://servicenow-prod.fluidtopics.net/3EPV4n22AtGlX4Q0zsn35w)** Use categorias de menu para aplicar estilos CSS aos rótulos da aplicação. * **[Altere as cores do cabeçalho da pergunta da pesquisa](https://servicenow-prod.fluidtopics.net/wJBJz9AbBe8S3UPMArP1Uw)** O Ambiente Clássico usa uma cor de cabeçalho da cor de base, que permite a criação de temas das propriedades CSS. * **[Suporte ao tema CSS](https://servicenow-prod.fluidtopics.net/vH5pE~kEVyu4yK~zZde5sA)** Os temas dão à interface do usuário uma aparência específica usando diferentes combinações de cores.