AEM에서 ServiceNow 구성요소 색상 사용자 지정

  • 릴리스 버전: Zurich
  • 업데이트 날짜 2025년 07월 31일
  • 소요 시간: 7분

    • Adobe Experience Manager(AEM)에서 색상을 지정하여 ServiceNow 구성요소의 모양과 느낌을 정의할 수 있습니다.

    AEM 관리자는 모든 구성요소에 대해 미리 구성된 색상 변수를 수정하거나 사용자 지정 CSS 클래스를 사용하여 특정 구성요소의 색상을 사용자 지정하기 위해 initializeCSS 함수를 사용할 수 있습니다. 사용자 지정 CSS 클래스 속성에서 구성요소에 대한 사용자 지정 CSS 클래스를 지정합니다. 자세한 내용은 Adobe Experience Manager 페이지에서 ServiceNow 지식 문서 표시 및 Adobe Experience Manager 페이지에서 ServiceNow 케이스 표시 문서를 참조하십시오.

    주:
    기본적으로 ServiceNow 구성요소는 부트스트랩 v4.4.1 CSS 스타일을 사용하여 구성됩니다. AEM 페이지에서 다른 부트스트랩 버전을 사용하면 ServiceNow 구성요소 스타일이 페이지 스타일에 의해 무효화됩니다.

    AEM의 모든 ServiceNow 구성요소에 대한 색상 테마 수정

    색상 변수를 구성하여 Adobe Experience Manager(AEM)에서 ServiceNow 구성요소의 색상 테마를 한꺼번에 설정합니다.

    시작하기 전에

    필요한 역할: AEM 관리자

    이 태스크 정보

    주:
    기본적으로 ServiceNow 구성요소는 부트스트랩 v4.4.1 CSS 스타일을 사용하여 구성됩니다. AEM 페이지에서 다른 부트스트랩 버전을 사용하면 ServiceNow 구성요소 스타일이 페이지 스타일에 의해 무효화됩니다.

    프로시저

    1. 브라우저에서 CRXDE Lite를 여십시오.
      예를 들어 브라우저에서 http://<AEM_hostname>:<AEM_port>/crx/de 형식으로 URL을 입력하십시오. CRXDE Lite의 기본 URL은 http://localhost:4502/crx/de입니다.
    2. 다음으로 이동 앱 > servicenow-components > clientlibs > clientlib-공통.
    3. variables.less 파일을 여십시오.
    4. ServiceNow 구성요소에서 HTML 요소에 사용할 수 있는 색상 변수를 구성합니다.
      표 1. 색 변수 설정
      색 설정 변수
      텍스트 컨텐츠 @text-color
      하이퍼링크 @link-color
      배지 @badge-text-color
      배지 배경 @badge-background-color
      시각적 강조를 위한 기본 색상 @primary-color
      시각적 강조를 위한 기본 색상의 보색 @secondary-color
      구성요소 제목 @title-color
      기본 버튼 텍스트 @primary-btn-text-color
      기본 버튼 배경 @primary-btn-bkg-color
      보조 버튼 텍스트 @secondary-btn-text-color
      보조 버튼 배경 @secondary-btn-bkg-color
      주:
      다음 방법 중 하나로 변수 색상을 지정합니다.
      • 색 이름

        예를 들어 red

      • 16진수 값

        예를 들어 #FF0000

      • RGB 값

        예를 들어, rgb(255,0,0)

      • var 함수

        var 함수를 사용하여 색상에 대한 사용자 지정 속성을 지정합니다. 예를 들어, var(--gray-dark).

    5. CRXDE Lite 메뉴에서 모두 저장을 클릭하여 변경 내용을 AEM 서버에 저장합니다.

    AEM의 ServiceNow 구성요소에 대한 색상 테마 수정

    초기화 함수를 사용하여 Adobe Experience Manager(AEM)에서 ServiceNow 구성요소의 색상 테마를 무효화합니다.

    시작하기 전에

    필요한 역할: AEM 관리자

    이 태스크 정보

    variables.less 파일에서 지정하는 색상 변수는 AEM의 모든 ServiceNow 구성요소에 적용됩니다. initializeCSS 함수에서 구성요소에 대한 색상 변수를 설정하여 특정 구성요소에 대한 기본 색상을 무효화할 수 있습니다.
    주:
    기본적으로 ServiceNow 구성요소는 부트스트랩 v4.4.1 CSS 스타일을 사용하여 구성됩니다. AEM 페이지에서 다른 부트스트랩 버전을 사용하면 ServiceNow 구성요소 스타일이 페이지 스타일에 의해 무효화됩니다.

    프로시저

    1. 브라우저에서 CRXDE Lite를 여십시오.
      예를 들어 브라우저에서 http://<AEM_hostname>:<AEM_port>/crx/de 형식으로 URL을 입력하십시오. CRXDE Lite의 기본 URL은 http://localhost:4502/crx/de입니다.
    2. 다음으로 이동 앱 > servicenow-components > clientlibs > clientlib-공통.
    3. variables.less 파일을 여십시오.
    4. 구성요소에 대해 <component_type>;<class_name>;<color_variable_1>;<color_variable_2>;<color_variable_n> 형식으로 initializeCSS 함수를 지정합니다.
      • component_type: 사용자 지정 색상 테마를 적용하려는 구성요소 유형(예: 기사 목록, 기사 보기, 케이스 카드 등)입니다.
      • class_name: 구성요소의 사용자 지정 CSS 클래스 속성에 입력하는 사용자 지정 CSS 클래스입니다.
      • color_variable_1, color_variable_2, color_variable_n: 구성요소의 HTML 요소에 지정하는 색상 변수입니다. 자세한 내용은 색상 변수 설정 테이블을 참조하십시오.

      구성요소 수준에서 색상 스타일링에 대한 참조로 다음 샘플 코드를 사용합니다.

      .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. CRXDE Lite 메뉴에서 모두 저장을 클릭하여 변경 내용을 AEM 서버에 저장합니다.