Personalizando as cores de ServiceNow Componentes no AEM

  • Versão de lançamento: Zurich
  • Atualizado 31 de jul. de 2025
  • 3 min. de leitura

    • Você pode definir a aparência do ServiceNow Componentes 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. InicializeCSS 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 ServiceNow Artigos de conhecimento em uma página do Adobe Experience Manager e Exibição ServiceNow Casos em uma página do Adobe Experience Manager.

    Nota:
    Por padrão, o ServiceNow Os componentes são configurados usando os estilos CSS Bootstrap v4.4.1. . Se sua página do AEM usar uma versão de inicialização diferente, o. ServiceNow o estilo de componentes é substituído pelo estilo de página.

    Modifique o tema de cor para todos ServiceNow Componentes no AEM

    Defina o tema de cor para ServiceNow Todos 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 ServiceNow Os componentes são configurados usando os estilos CSS Bootstrap v4.4.1. . Se sua página do AEM usar uma versão de inicialização diferente, o. ServiceNow o estilo de componentes é substituído pelo estilo de página.

    Procedimento

    1. Abra o CRXDE Lite no seu navegador .
      Por exemplo, em seu navegador, insira o URL no formato http://<AEM_hostname>:<AEM_port>/crx/DE . O URL padrão do CRXDE Lite é http://localhost:4502/crx/de .
    2. Navegar até apps > servicenow-components > clientlibs > clientlib-common.
    3. Abra o. variáveis.menos arquivo.
    4. Configure as variáveis de cor disponíveis para os elementos HTML no ServiceNow componentes.
      Tabela 1. Configurações de variáveis de cor
      Configuração de cor Variável
      Conteúdo de texto texto-color
      Hiperlinks link-color
      Cartões de identificação texto-color do selo
      Fundo dos selos crachá-background-color
      Cor primária para ênfase visual na cor primária
      Cor complementar à cor primária, para ênfase visual cor secundária
      Títulos do componente título-color
      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
      Nota:
      Especifique uma cor para uma variável de uma das seguintes maneiras:
      • Nome da cor

        Por exemplo, vermelho

      • Valor HEX

        Por exemplo, FF000

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

    5. No menu CRXDE Lite, clique em Salvar tudo Para salvar as mudanças no servidor AEM.

    Modifique o tema de cor de um ServiceNow Componente no AEM

    Substitua o tema de cor de um ServiceNow Componente no Adobe Experience Manager (AEM) usando 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 variáveis.menos os arquivos são aplicados a todos ServiceNow Componentes no AEM. Você pode substituir as cores padrão de um componente específico definindo as variáveis de cor para o componente no InicializeCSS função.
    Nota:
    Por padrão, o ServiceNow Os componentes são configurados usando os estilos CSS Bootstrap v4.4.1. . Se sua página do AEM usar uma versão de inicialização diferente, o. ServiceNow o estilo de componentes é substituído pelo estilo de página.

    Procedimento

    1. Abra o CRXDE Lite no seu navegador .
      Por exemplo, em seu navegador, insira o URL no formato http://<AEM_hostname>:<AEM_port>/crx/DE . O URL padrão do CRXDE Lite é http://localhost:4502/crx/de .
    2. Navegar até apps > servicenow-components > clientlibs > clientlib-common.
    3. Abra o. variáveis.menos arquivo.
    4. Especifique InicializeCSS 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 no qual você deseja aplicar o tema de cor personalizado, por exemplo, articllist, articleview, casecards, 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 tabela.

      Use o código de amostra a seguir como referência para 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 CRXDE Lite, clique em Salvar tudo Para salvar as mudanças no servidor AEM.