인스턴스 모양 사용자 지정

  • 릴리스 버전: Washingtondc
  • 업데이트 날짜 2024년 02월 01일
  • 읽기4분
  • 관리자는 전역 CSS 또는 시스템 속성을 변경하여 기본 인스턴스 인터페이스의 모양과 형식을 바꿀 수 있습니다. 기능에는 영향이 없습니다.

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

    CSS 속성

    다음으로 이동 시스템 속성 > CSS레이블이 표시됩니다.

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

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

    UI 속성

    다음으로 이동 시스템 속성 > UI 속성레이블이 표시됩니다.

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

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

    CSS 클래스 지원

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

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

    애플리케이션 네비게이터의 지우기 옵션을 가리키면 다음을 가리킬 때도 파란색으로 표시됩니다.

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