다음의 로고, 색상, 시스템 기본값 구성 코어 UI

  • 릴리스 버전: Xanadu
  • 업데이트 날짜 2024년 08월 01일
  • 소요 시간: 5분
  • 기본 구성 코어 UI 모듈을 사용하여 회사 로고와 색상으로 인스턴스를 브랜딩하고 기본 시스템 기본값을 설정할 수 있습니다. 인스턴스를 처음 설정하거나 최근에 활성화 코어 UI한 경우 이 위치가 가장 좋은 시작점입니다.

    시작하기 전에

    다음을 수집합니다.
    • 헤더에 사용할 회사 배너 이미지를 가져옵니다. 이미지는 고해상도일 수 있지만 표시될 때 가로 세로 비율에 따라 크기가 조정됩니다. 최대 20px 높이로 확장됩니다.
    • 일반적으로 마케팅 부서에서 회사의 브랜드 색상 16진수 또는 RGB 번호를 가져옵니다. 이를 사용하여 UI 배경색을 구성하는 방법을 결정합니다.

    필요한 역할: admin

    이 태스크 정보

    각 색상 선택 옵션은 색상을 선택할 수 있는 색상 선택기를 제공합니다. 색상 선택기 옆의 텍스트 상자를 사용하여 색상 값을 다음 CSS 형식으로 입력할 수 있습니다.
    • 이름: 빨강, 녹색 또는 파랑과 같은 미리 정의된 색 이름
    • RGB 10진수: RGB(102, 153, 204)
    • RGB 16진수: #223344
    HTML 색 이름에 대한 자세한 내용은 HTML 색 이름(W3CSchools) 을 참조하세요.
    주:
    이 정보는 에 적용할 수 있습니다 코어 UI. 에 대한 Next Experience테마 정보는 다음 문서를 참조하십시오 에서 테마 탐색 Next Experience.

    프로시저

    1. 다음으로 이동 모두 > 시스템 속성 > 기본 구성 UI16.
    2. 다음 설정을 변경하여 구성을 완료합니다.
      표 1. 기본 시스템 구성 속성
      레이블 속성 설명
      페이지 헤더 캡션 glide.product.description 로고 옆에 표시되는 텍스트를 변경합니다.
      브라우저 탭 제목 glide.product.name 브라우저 탭에 표시되는 텍스트를 변경합니다.
      사용자 기록에서 오버라이드되지 않은 경우 모든 사용자에 대한 시스템 시간대 glide.sys.default.tz 목록에서 시간대를 선택합니다.

      사용 가능한 시간대 구성을 선택하여 사용자가 사용자 기본 설정에서 선택할 수 있는 시간대를 선택합니다.

      에 대한 배너 이미지 코어 UI glide.product.image.light 이미지 옆에 있는 + 를 선택하고 로고를 업로드합니다.
      날짜 형식

      시간 형식

      glide.sys.date_format

      glide.sys.time_format

      선택 목록에서 날짜 및 시간 형식을 선택합니다.
      헤더 배경색 css.$navpage-헤더-bg 색상을 선택하거나 입력합니다.
      헤더 배경
      이 색상은 시스템 설정 아래의 테마 탭에서 테마 미리 보기의 일부로도 사용됩니다.
      배너 텍스트 색 css.$navpage-헤더-색상 색상을 선택하거나 입력합니다.
      배너 텍스트 색
      이 색상은 시스템 설정 아래의 테마 탭에서 테마 미리 보기의 일부로도 사용됩니다.
      헤더 구분선 색 css.$navpage-header-divider-color 색상을 선택하거나 입력합니다.
      헤더 구분선 스트라이퍼
      탐색 머리글/바닥글 css.$navpage-nav-bg 색상을 선택하거나 입력합니다.
      탐색
      탐색 배경 확장 항목 css.$subnav-background-color 색상을 선택하거나 입력합니다.
      색상 차이를 표시하기 위해 확장된 모듈이 있는 애플리케이션
      애플리케이션 네비게이터의 코어 UI 모듈 텍스트 색 css.$navpage-nav-color-sub 색상을 선택하거나 입력합니다.
      즐겨찾기, 연결 목록
      탐색에서 선택된 탭의 배경 색 css.$navpage-nav-selected-bg 색상을 선택하거나 입력합니다.
      선택한 탭
      탐색에서 선택된 탭의 구분선 막대 색 css.$nav-highlight-bar-active
      모든 애플리케이션 탭이 선택되어 있고 탭 아래 라인이 파란색이라는 사실을 나타내는 화살표가 있는 애플리케이션 내비게이터
      이 색상은 시스템 설정 아래의 테마 탭에서 테마 미리 보기의 일부로도 사용됩니다.
      선택되지 않은 탐색 탭의 구분선 색 css.$nav-highlight-bar-inactive
      모든 애플리케이션 탭이 선택되어 있고 화살표가 다른 탭을 가리키면 선이 다른 색임을 나타내는 애플리케이션 네비게이터
      탐색 구분 기호 색 css.$nav-hr-color 색상을 선택하거나 입력합니다.
      구분 기호
      네비게이터 및 사이드바의 배경 css.$navpage-nav-bg-sub 색상을 선택하거나 입력합니다.
      내비게이터, 사이드바
      에 대해 현재 선택한 탐색 탭 아이콘 색상 코어 UI css.$navpage-nav-selected-color 색상을 선택하거나 입력합니다.
      탐색 아이콘
      선택되지 않은 탐색 탭 아이콘과 즐겨찾기 아이콘 색상 css.$navpage-nav-unselected-color 색상을 선택하거나 입력합니다.

      선택되지 않은 즐겨찾기 아이콘

      다음의 테두리 색상 코어 UI css.$navpage-nav-border 색상을 선택하거나 입력합니다. 커넥트 채팅 사이드바의 대화 필터링 검색 상자의 테두리에도 영향을 줍니다.
      탐색기 필터링
      선택한 기본 테마 glide.ui.base_theme.selected_theme 메인 컨텐츠(애플리케이션 네비게이터와 헤더를 제외한 모든 항목)를 La Jolla와 Cobalt 테마 사이에서 전환합니다.
      대부분의 설정에서 변경하면 변경 내용의 미리 보기와 함께 페이지가 새로 고쳐집니다. 이러한 변경 내용은 사용자만 볼 수 있습니다. 일부 설정에서는 로그아웃했다가 다시 로그인해야 변경 사항을 볼 수 있습니다.
    3. 페이지 위쪽 또는 아래쪽에서 저장 을 선택합니다.

    결과

    구성 변경 내용을 저장하면 UI 개인화 옵션에서 시스템 테마를 선택하는 모든 사용자에게 새 구성 색상이 표시됩니다.

    라호야와 코발트 테마 비교

    La Jolla 테마는 의 ServiceNow새로운 브랜드 테마입니다. 로 Madrid업그레이드하면 테마가 La Jolla 테마로 자동 업그레이드됩니다. 시스템 테마에 대한 사용자 지정은 업그레이드되지 않습니다. 아래 목록의 스타일을 사용하여 스타일을 새 테마나 이전 테마로 업그레이드하거나 되돌립니다.

    다음으로 이동하여 이러한 스타일을 변경합니다. 시스템 속성 > 기본 구성 UI16.

    표 2. 라호야와 코발트 테마 스타일
    속성 라호야 스타일 코발트 스타일
    헤더 배경색

    css.$navpage-헤더-bg

    #ffffff #303a46
    헤더 구분선 색

    css.$navpage-header-divider-color

    #5a7f71 #455464
    탐색 머리글/바닥글

    css.$navpage-nav-bg

    #293e40 #303A46
    탐색 배경 확장 항목

    css.$subnav-background-color

    #213234 #303a46
    UI16의 모듈 텍스트 색

    css.$navpage-nav-color-sub

    #bec1c6 #bec1c6
    탐색에서 선택된 탭의 배경 색

    css.$navpage-nav-selected-bg

    #2f4fe #4b545f
    탐색에서 선택된 탭의 구분선 막대 색

    css.$nav-highlight-bar-active

    #82c9b8 #278efc
    선택되지 않은 탐색 탭의 구분선 색

    css.$nav-highlight-bar-inactive

    #213234 #81878e
    탐색 구분 기호 색

    css.$nav-hr-color

    #293e40 #303a46
    네비게이터 및 사이드바의 배경

    css.$navpage-nav-bg-sub

    #293e40 #455464
    UI16용으로 현재 선택한 탐색 탭 아이콘 색상

    css.$navpage-nav-selected-color

    #82c9b8 #ffffff
    선택되지 않은 탐색 탭 아이콘과 즐겨찾기 아이콘 색상

    css.$navpage-nav-unselected-color

    #bec1c6 #bec1c6
    UI16 테두리 색상

    css.$navpage-nav-border

    #7a828a #ddd
    선택한 기본 테마

    glide.ui.base_theme.selected_theme

    라호야 SysID: c92c1ee153002300dda1ddeeff7b125b 코발트 SysID: 6f3c9ae153002300dda1ddeeff7b124a