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

  • 릴리스 버전: Australia
  • 업데이트 날짜 2026년 03월 12일
  • 소요 시간: 7분

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

    AEM 관리자는 모든 구성 요소에 대해 미리 구성된 색상 변수를 수정하거나 initializeCSS 함수를 사용하여 사용자 지정 CSS 클래스를 사용하여 특정 구성 요소의 색상을 사용자 지정할 수 있습니다. 사용자 지정 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 > 클라이언트 라이브러리 > clientlib-일반.
    3. variables.less 파일을 엽니다.
    4. 구성요소의 HTML 요소에 사용할 수 있는 색상 변수를 구성합니다 ServiceNow .
      표 1. 색상 변수 설정
      색 설정 변수
      텍스트 컨텐츠 @text색
      하이퍼링크 @link색
      배지 @badge-텍스트-색상
      배지 배경 @badge-배경-색상
      시각적 강조를 위한 기본 색상 @primary색
      시각적 강조를 위한 기본 색상의 보색 @secondary색
      구성요소 제목 @title색
      기본 버튼 텍스트 @primary-btn-텍스트-색상
      기본 버튼 배경 @primary-btn-bkg-color
      보조 버튼 텍스트 @secondary-btn-텍스트-색상
      보조 버튼 배경 @secondary-btn-bkg-color
      주:
      다음 방법 중 하나로 변수 색상을 지정합니다.
      • 색 이름

        예: 빨간색

      • 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 > 클라이언트 라이브러리 > clientlib-일반.
    3. variables.less 파일을 엽니다.
    4. 구성요소에 대해 initializeCSS 함수를 <component_type> 형식으로 지정합니다. <class_name>; <color_variable_1>; <color_variable_2>; <color_variable_n>.
      • 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 서버에 저장합니다.