--- sourceDocument: Yokohama Customer Service Management sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/pt-BR/yokohama/customer-service-management Release : - yokohama ft:locale : - pt-BR ft:publication_title : - Yokohama Customer Service Management ft:clusterId : - csm bundleId : - csm workflow : - Customer and Industry --- # Personalizando as cores de ServiceNowComponentes no AEM # Personalizando as cores de ServiceNowComponentes no AEM {#ariaid-title1} * Versão de lançamento: Yokohama * * Atualizado 30 de jan. de 2025 * * ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 3 min. de leitura Você pode definir a aparência do ServiceNowComponentes no Adobe Experience Manager (AEM) especificando cores para eles. Como administrador do AEM, você pode modificar as variáveis de cor pré-configuradas para todos os componentes ou usar o. Inicialize o CSS Função para personalizar as cores de um componente específico usando uma classe CSS personalizada. Você especifica a classe CSS personalizada para um componente no Classe CSS personalizada propriedade. Para obter mais informações, consulte [Exibição ServiceNowArtigos de conhecimento em uma página do Adobe Experience Manager](https://servicenow-prod.fluidtopics.net/Mv5l13FtsTIjM3cTOyQ_oQ "Use componentes de conhecimento disponíveis no Adobe Experience Manager (AEM) para acessar bases de conhecimento do ServiceNowE exiba artigos de conhecimento associados em um site baseado em AEM.") e [Exibição ServiceNowCasos em uma página do Adobe Experience Manager](https://servicenow-prod.fluidtopics.net/3kCaKCGSZNLESLj5LCavIQ "Componentes de caso de uso disponíveis no Adobe Experience Manager (AEM) para acessar casos de atendimento ao cliente no ServiceNowE exibi-los em um site baseado em AEM."). Nota: Por padrão, o. ServiceNowOs componentes são configurados usando os estilos CSS Bootstrap v4.4.1. Se sua página do AEM usar uma versão de Bootstrap diferente, o. ServiceNowo estilo de componentes é substituído pelo estilo de página. ## Modifique o tema de cores para todos ServiceNowComponentes no AEM {#ariaid-title2} Defina o tema de cores para ServiceNowTodos os componentes no Adobe Experience Manager (AEM) de uma só vez, configurando as variáveis de cor. ### Antes de Iniciar Função necessária: Administrador do AEM ### Por Que e Quando Desempenhar Esta Tarefa Nota: Por padrão, o. ServiceNowOs componentes são configurados usando os estilos CSS Bootstrap v4.4.1. Se sua página do AEM usar uma versão de Bootstrap diferente, o. ServiceNowo estilo de componentes é substituído pelo estilo de página. ### Procedimento 1. [Abra o CRXDE Lite no seu navegador](https://docs.adobe.com/content/help/en/experience-manager-65/administering/security/enabling-crxde-lite.html). Por exemplo, em seu navegador, insira o URL no formato http://\:\/crx/de . O URL padrão do CRXDE Lite é http://localhost:4502/crx/de . 2. Navegar até appsservicenow-componentsclientlibsclientlib-common. 3. Abra o. sem variáveis arquivo. 4. Configure as variáveis de cor disponíveis para os elementos HTML no ServiceNowcomponentes. {#aem-modify-color-all-comp__table_vhh_gjm_2mb__entry__2} | Configuração de cor | Variável | |-|-| | Conteúdo de texto | texto-cor | | Hiperlinks | cor do link | | Cartões de identificação | crachá-text-color | | Fundo dos selos | badge-background-color | | Cor primária para ênfase visual | na cor primária | | Cor complementar à cor primária, para ênfase visual | na cor secundária | | Títulos dos componentes | título-cor | | Texto do botão primário | primary-btn-text-color | | Fundo do botão primário | em primary-btn-bkg-color | | Texto do botão secundário | secondary-btn-text-color | | Fundo do botão secundário | em secondary-btn-bkg-color | [Tabela 1. Configurações de variáveis de cor] {#aem-modify-color-all-comp__table_vhh_gjm_2mb} Nota: Uma cor é especificada para uma variável de uma das seguintes maneiras: * Nome da corPor exemplo, vermelho * Valor HEX Por exemplo, FF0000 * Valor RGB Por exemplo, rgb (255,0,0) * var função Use a função var para especificar uma propriedade personalizada para uma cor. Por exemplo, var(--cinza-escuro) . {#aem-modify-color-all-comp__ul_u1g_slm_2mb} 5. No menu do CRXDE Lite, clique em Salvar tudo Para salvar as mudanças no servidor AEM. ## Modifique o tema de cores de um ServiceNowComponente no AEM {#ariaid-title3} Substitua o tema de cor de um ServiceNowComponente no Adobe Experience Manager (AEM) usando o. inicialize função. ### Antes de Iniciar Função necessária: Administrador do AEM ### Por Que e Quando Desempenhar Esta Tarefa As variáveis de cor especificadas no sem variáveis os arquivos são aplicados a todos ServiceNowComponentes no AEM. Você pode substituir as cores padrão de um componente específico definindo as variáveis de cor do componente no Inicialize o CSS função. Nota: Por padrão, o. ServiceNowOs componentes são configurados usando os estilos CSS Bootstrap v4.4.1. Se sua página do AEM usar uma versão de Bootstrap diferente, o. ServiceNowo estilo de componentes é substituído pelo estilo de página. ### Procedimento 1. [Abra o CRXDE Lite no seu navegador](https://docs.adobe.com/content/help/en/experience-manager-65/administering/security/enabling-crxde-lite.html). Por exemplo, em seu navegador, insira o URL no formato http://\:\/crx/de . O URL padrão do CRXDE Lite é http://localhost:4502/crx/de . 2. Navegar até appsservicenow-componentsclientlibsclientlib-common. 3. Abra o. sem variáveis arquivo. 4. Especifique o. Inicialize o CSS função para um componente no formato <component_type>;<class_name>;<color_variable_1>;<color_variable_2>;<color_variable_n> . * Component_type: O tipo do componente ao qual você deseja aplicar o tema de cor personalizado, por exemplo, articllist, articleview, cartões de casecase, e assim por diante. * Class_name: A classe CSS personalizada que você insere no Classe CSS personalizada propriedade do seu componente. * Color_variable_1, color_variable_2, color_variable_n: As variáveis de cor especificadas para os elementos HTML em um componente. Para obter mais informações, consulte [Configurações de variáveis de cor](https://servicenow-prod.fluidtopics.net/Lz_6O3g0vzCDezyKOV2X~g#aem-modify-color-all-comp__table_vhh_gjm_2mb)tabela. {#aem-modify-color-comp__ul_dyk_py4_2mb} Use o código de amostra a seguir como referência para o estilo de cor no nível do componente. .initialize(@componentType:articlelist;@className:now-article-list;@text-color:red; @link-color:orange;@badge-text-color:blue;@badge-background-color:yellow;@title-color:magenta;@secondary-color:indigo;); .initialize(@componentType:articleview; @className:now-article-view;@text-color:red; @link-color:orange;@badge-text-color:blue;@badge-background-color:yellow;@secondary-color:indigo;); .initialize(@componentType:casecards; @className:now-case-cards; @text-color:red;@link-color:orange;@badge-text-color:blue;@badge-background-color:yellow;@title-color:magenta;@secondary-color:indigo;); .initialize(@componentType:caselist; @className:now-case-list; @text-color:red; @link-color:orange;@title-color:magenta;@primary-color:green;@secondary-btn-text-color:white;@secondary-btn-bkg-color:black;); .initialize(@componentType:searchbox; @className:now-search-box; @text-color:red; @link-color:orange;@title-color:magenta;@primary-color:green;@secondary-btn-text-color:white;@secondary-btn-bkg-color:black;); .initialize(@componentType:searchresults;@className:now-search-results;@text-color:gray; @link-color:orange;@badge-text-color:blue;@badge-background-color:yellow;@title-color:magenta;@secondary-color:indigo;); .initialize(@componentType:caseview;@className:now-case-view;@text-color:red;@link-color:orange;@primary-color:green;@secondary-color:indigo;@primary-btn-text-color:blue;@primary-btn-bkg-color:white;@secondary-btn-text-color:white;@secondary-btn-bkg-color:blue;); .initialize(@componentType:createcase;@className:now-create-case;@text-color:red;@link-color:orange;@primary-color:green;@secondary-color:indigo;@primary-btn-text-color:blue;@primary-btn-bkg-color:white;@secondary-btn-text-color:white;@secondary-btn-bkg-color:blue;) 5. No menu do CRXDE Lite, clique em Salvar tudo Para salvar as mudanças no servidor AEM.