Personalizando as cores de ServiceNowComponentes no AEM

  • Versão de lançamento: Yokohama
  • Atualizado 30 de jan. de 2025
  • 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 e Exibição ServiceNowCasos em uma página do Adobe Experience Manager.

    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

    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 .
      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. sem variáveis arquivo.
    4. Configure as variáveis de cor disponíveis para os elementos HTML no ServiceNowcomponentes.
      Tabela 1. Configurações de variáveis de cor
      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
      Nota:
      Uma cor é especificada para uma variável de uma das seguintes maneiras:
      • Nome da cor

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

    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

    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 .
      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. 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 tabela.

      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.