인스턴스 모양 사용자 지정

  • 릴리스 버전: Zurich
  • 업데이트 날짜 2025년 07월 31일
  • 소요 시간: 5분
  • 관리자는 전역 CSS 또는 시스템 속성을 변경하여 기본 인스턴스 인터페이스의 모양과 느낌을 변경할 수 있습니다. 기능은 영향을 받지 않습니다.

    예를 들어 조직에서는 개발, 테스트 및 프로덕션 활동을 분리하기 위해 여러 인스턴스를 사용하는 경우가 많습니다. 사용자가 실수로 잘못된 인스턴스를 변경하는 것을 방지할 수 있도록 관리자는 시각적으로 구별되는 테마로 각 인스턴스를 구성할 수 있습니다. 인스턴스 테마를 정의하는 데 몇 가지 방법을 사용할 수 있습니다.

    CSS 속성

    다음으로 이동 시스템 속성 > CSS.

    CSS 속성을 통해 다음 속성을 사용할 수 있습니다.

    주:
    색은 미리 정의된 색 이름, RGB 10진수 또는 RGB 16진수를 사용하여 지정됩니다.
    • 배너 텍스트 색
    • 배너 및 목록 캡션 배경색
    • 양식과 목록에 사용되는 글꼴(전역 글꼴 설정)
    • 단추 스타일(배경색, 테두리 색, 테두리 너비, 텍스트 색)
    • 필드 상태 표시기 색상(변경됨, 필수, 채워짐, 필수, 채워지지 않음, 읽기 전용에 대한 표시기 포함)
    • 목록 셀 세로 맞춤
    • 네비게이터 메뉴 스타일(텍스트 글꼴 크기, 배경색, 텍스트 색상)
    • 헤더 글꼴 이름 및 크기
    • 목록 및 양식 캡션 색상 재정의
    • 전역 텍스트 검색 배경 색상(카탈로그 결과와 지식베이스 결과 모두)

    UI 속성

    다음으로 이동 시스템 속성 > UI 속성.

    UI 속성을 통해 다음 속성을 사용할 수 있습니다.

    • 활동 포매터에 사용되는 아이콘
    • 추가 피드백 및 작업 메모의 배경색
    • 양식의 단추 배치
    • 작업 활동 포매터에 사용되는 아이콘
    • 인시던트 추가 설명 및 작업 메모의 배경색

    CSS 클래스 지원

    (UI16)에서 코어 UI CSS 속성과 CSS 속성이 플랫폼 UI에 미치는 영향은 릴리스에 따라 변경됩니다.

    표 1. 에 대한 CSS 클래스 지원 Zurich
    CSS 클래스 설명 구성 방법 영향을 받는 영역
    $navpage-헤더-bg 헤더 배경색 다음으로 이동 시스템 속성 > 기본 구성 UI16 > 헤더 배경색 헤더 배경
    $navpage-헤더-색상 헤더 텍스트와 전역 검색 아이콘의 색상 다음으로 이동 시스템 속성 > 기본 구성 UI16 > 배너 텍스트 색 배너 텍스트 색
    $navpage-헤더-버튼-색상 로그인한 사용자 이름 텍스트와 전역 검색 커넥트, 도움말 및 설정 아이콘의 색상 테마의 CSS 필드에 CSS 속성을 추가합니다. 자세한 내용은 테마 생성 또는 사용자 지정 문서를 참조하십시오. 사용자 이름 및 커넥트, 도움말 및 설정 아이콘이 강조 표시된 헤더
    $navpage-헤더-디바이더-색상 헤더 구분선 색 다음으로 이동 시스템 속성 > 기본 구성 UI16 > 헤더 구분선 색 헤더 구분선 스트라이퍼
    $navpage 버튼 색상 사이드바의 다음 아이콘에 대한 색상
    • 확장/축소
    • 대화 생성하기(사이드바에서 커넥트 )
    • 작업 공간 열기 커넥트
    테마의 CSS 필드에 CSS 속성을 추가합니다. 자세한 내용은 테마 생성 또는 사용자 지정 문서를 참조하십시오. 커넥트 화살표가 더하기 아이콘을 가리키는 사이드바
    $navpage-버튼-색상-호버 사용자가 컨트롤을 가리킬 때 표시되는 아이콘의 색입니다.
    • 전역 검색
    • 도움말
    • 설정
    • 탐색 필터의 명확한 텍스트 아이콘
    테마의 CSS 필드에 CSS 속성을 추가합니다. 자세한 내용은 테마 생성 또는 사용자 지정 문서를 참조하십시오. 도움말 아이콘을 가리키면 사용자가 도움말 아이콘을 가리킬 때 파란색으로 표시된다는 것을 알 수 있습니다.

    애플리케이션 내비게이터에서 지우기 옵션을 가리켜 이 지점도 파란색임을 표시합니다.

    $search-text-color 탐색 필터와 전역 검색 필드 모두에 있는 검색 텍스트의 색상 테마의 CSS 필드에 CSS 속성을 추가합니다. 자세한 내용은 테마 생성 또는 사용자 지정 문서를 참조하십시오. 애플리케이션 네비게이터에서 검색하여 "인시던트"를 흰색으로 표시
    $navpage-nav-border 탐색 필터 및 대화 필터의 테두리 색상 다음으로 이동 시스템 속성 > 기본 구성 UI16 > UI16 테두리 색상 필터 탐색기
    $nav-하이라이트-메인 사용자가 모듈을 클릭하면 모듈을 강조 표시합니다. 커넥트 작업 공간에서 선택한 대화가 강조 표시됩니다. 테마의 CSS 필드에 CSS 속성을 추가합니다. 자세한 내용은 테마 생성 또는 사용자 지정 문서를 참조하십시오. 에서 커넥트 선택한 대화 올바른 색상을 보여주는 작업 공간
    $subnav 배경 색상 확장된 탐색 항목의 배경 다음으로 이동 시스템 속성 > 기본 구성 UI16 > 탐색 배경 확장 항목 색상 차이를 표시하기 위해 모듈이 확장된 애플리케이션
    $navpage-nav-bg 내비게이터 및 사이드바의 헤더와 바닥글. 다음으로 이동 시스템 속성 > 기본 구성 UI16 > 탐색 머리글/바닥글 항행
    $navpage-nav-bg-sub 네비게이터 및 사이드바의 배경 다음으로 이동 시스템 속성 > 기본 구성 UI16 > 네비게이터 및 사이드바의 배경 탐색기, 사이드바
    $navpage-nav-color-sub 메인 탐색의 모듈에 대한 텍스트 색 테마의 CSS 필드에 CSS 속성을 추가합니다. 자세한 내용은 테마 생성 또는 사용자 지정 문서를 참조하십시오. 인시던트가 열려 있고 텍스트 색을 표시하는 인시던트 아래 모듈이 흰색인 애플리케이션 내비게이터
    $navpage-nav-mod-text-hover 메인 탐색에서 항목을 가리킬 때의 텍스트 색 지원되지 않음 지원되지 않음
    $nav-hr-color 내비게이터 구분 기호 색 다음으로 이동 시스템 속성 > 기본 구성 UI16 > 탐색 구분 기호 색 구분 기호
    $nav-highlight-bar-active 애플리케이션 네비게이터의 활성 탭 아래에 있는 선입니다. 이 색상은 시스템 설정의 테마 탭에서 테마 미리 보기의 일부로도 사용됩니다. 다음으로 이동 시스템 속성 > 기본 구성 UI16 > 탐색에서 선택된 탭의 구분선 막대 색 모든 애플리케이션 탭이 선택되고 탭 아래의 선이 파란색임을 나타내는 화살표가 있는 애플리케이션 내비게이터
    $nav-highlight-bar-inactive 애플리케이션 네비게이터의 비활성 탭 아래 라인 다음으로 이동 시스템 속성 > 기본 구성 UI16 > 선택되지 않은 탐색 탭의 구분선 색 모든 애플리케이션 탭이 선택되고 화살표가 다른 탭을 가리키며 선의 색상이 다르다는 것을 나타내는 애플리케이션 내비게이터
    $navpage-nav-selected-bg 탐색에서 선택된 탭의 배경 색 다음으로 이동 시스템 속성 > 기본 구성 UI16 > 탐색에서 선택된 탭의 배경 색 선택한 탭
    $navpage-nav-selected-color 현재 선택한 탐색 탭 아이콘 색상 다음으로 이동 시스템 속성 > 기본 구성 UI16 > UI16용으로 현재 선택한 탐색 탭 색상 탐색 아이콘
    $navpage-nav-unselected-color 선택되지 않은 탐색 탭 아이콘과 즐겨찾기 아이콘 색상 다음으로 이동 시스템 속성 > 기본 구성 UI16 > 선택되지 않은 탐색 탭 아이콘과 즐겨찾기 아이콘 색상 즐겨찾기 아이콘 색상
    최신 메시지 $connect 에서 현재 선택된 메시지의 색상 커넥트 테마의 CSS 필드에 CSS 속성을 추가합니다. 자세한 내용은 테마 생성 또는 사용자 지정 문서를 참조하십시오. 커넥트 화살표로 가리킨 선택된 메시지가 있는 사이드바
    $nav-timeago-header-color 이력 탭의 타임스탬프 헤더 배경 지원되지 않음 지원되지 않음
    $navpage-nav-app-text 애플리케이션과 같은 항목의 핵심 컨텐츠 텍스트 색상과 사이드바의 빈 상태 텍스트입니다 커넥트 . 테마의 CSS 필드에 CSS 속성을 추가합니다. 자세한 내용은 테마 생성 또는 사용자 지정 문서를 참조하십시오. 텍스트가 흰색임을 나타내기 위해 Service Desk를 가리키는 화살표가 있는 애플리케이션 내비게이터
    $navpage-nav-app-text-hover 선택한 모듈의 텍스트 색 테마의 CSS 필드에 CSS 속성을 추가합니다. 자세한 내용은 테마 생성 또는 사용자 지정 문서를 참조하십시오. 인시던트 > 선택한 색상을 표시하기 위해 선택된 모듈 열기