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

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

    시작하기 전에

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

    필요한 역할: admin

    이 태스크 정보

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

    프로시저

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

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

      UI16의 배너 이미지 glide.product.image.light 이미지 옆에 있는 + 를 클릭하고 로고를 업로드합니다.
      날짜 형식

      시간 형식

      glide.sys.date_format

      glide.sys.time_format

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

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

      UI16 테두리 색상 css.$navpage-nav-border 색상을 선택하거나 입력합니다. Connect 채팅 사이드바의 대화 필터링 검색 상자의 테두리에도 영향을 줍니다.
      탐색기 필터링
      선택한 기본 테마 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-헤더-디바이더 색상

    #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-강조 표시 막대-활성

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

    css.$nav-강조 표시 비활성

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

    css.$nav-hr-색상

    #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