インスタンスの外観のカスタマイズ

アドミニストレーターは、グローバル CSS またはシステムプロパティを変更して、デフォルトのインスタンスインターフェイスのルックアンドフィールを変更できます。機能は影響を受けません。

たとえば、多くの場合、組織は複数のインスタンスを使用して開発、テスト、本番の各アクティビティを分離します。ユーザーが誤ってインスタンスを変更しないようにするために、アドミニストレーターは視覚的に異なるテーマでそれぞれを構成できます。インスタンスのテーマを定義するには、いくつかのアプローチを使用できます。

CSS Properties (CSS プロパティ)

移動先 システムプロパティ > CSS.

次のプロパティは、CSS プロパティから利用できます。

注:

色は、事前定義された 色名、RGB 10 進数、または RGB 16 進数を使用して指定されます。

• バナーテキストの色：
• バナーとリストキャプションの背景色
• フォームとリストで使用されるフォント (これはグローバルフォント設定です)
• ボタンのスタイル (背景色、境界線の色、境界線の幅、テキストの色)
• フィールドステータスインジケーターの色 (変更済み、入力必須、必須、入力解除、読み取り専用のインジケーターを含む)
• リストセルの垂直配置
• ナビゲーターメニュースタイル (テキストのフォントサイズ、背景色、テキストの色)
• ヘッダーのフォント名とサイズ
• リストおよびフォームのキャプションの色の上書き
• グローバルテキスト検索の背景色 (カタログ結果とナレッジベース結果の両方)

UI プロパティ

移動先 システムプロパティ > UI プロパティ.

次のプロパティは UI プロパティから利用できます。

• アクティビティフォーマッターで使用されるアイコン
• 追加コメントと作業メモの背景色
• フォーム上のボタンの配置
• タスクアクティビティフォーマッターで使用されるアイコン
• インシデントの追加コメントと作業メモの背景色

CSS クラスのサポート

コア UI (UI16) では、CSS プロパティとそれらがプラットフォーム UI に与える影響は、リリースに応じて異なります。

表 : 1. の CSS クラスサポート Zurich

CSS クラス	説明	構成方法	影響を受ける領域
$navpage-header-bg	ヘッダーの背景色	移動先 システムプロパティ > 基本構成 UI16 > ヘッダーの背景色
$navpage-header-color	ヘッダーテキストとグローバル検索アイコンの色	移動先 システムプロパティ > 基本構成 UI16 > バナーテキストの色：
$navpage-header-button-color	ログインユーザー名のテキスト、グローバル検索 コネクト、ヘルプ、および設定アイコンの色	テーマの CSS フィールドに CSS プロパティを追加します。詳細については、「テーマの作成またはカスタマイズ」を参照してください。
$navpage-header-divider-color	ヘッダー分割線の色	移動先 システムプロパティ > 基本構成 UI16 > ヘッダー分割線のストライプカラー
$navpage-button-color	サイドバーの次のアイコンの色 展開/折りたたむ 会話を作成( コネクト サイドバー) コネクトワークスペースを開く	テーマの CSS フィールドに CSS プロパティを追加します。詳細については、「テーマの作成またはカスタマイズ」を参照してください。
$navpage-button-color-hover	ユーザーがコントロールをポイントしたときの次のアイコンの色。 グローバル検索 ヘルプ 設定 ナビゲーションフィルターの [テキストをクリア] アイコン	テーマの CSS フィールドに CSS プロパティを追加します。詳細については、「テーマの作成またはカスタマイズ」を参照してください。
$search-text-color	ナビゲーションフィルターとグローバル検索フィールドの両方での、検索テキストの色	テーマの CSS フィールドに CSS プロパティを追加します。詳細については、「テーマの作成またはカスタマイズ」を参照してください。
$navpage-nav-border	ナビゲーションフィルターと会話フィルターのボーダー色	移動先 システムプロパティ > 基本構成 UI16 > UI16 の境界色
$nav-highlight-main	ユーザーがクリックしたモジュールをハイライト表示します。コネクトワークスペースで、選択した会話がハイライト表示されます。	テーマの CSS フィールドに CSS プロパティを追加します。詳細については、「テーマの作成またはカスタマイズ」を参照してください。
$subnav-background-color	展開されたナビゲーションアイテムの背景	移動先 システムプロパティ > 基本構成 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-latest-message	で現在選択されているメッセージの色 コネクト	テーマの CSS フィールドに CSS プロパティを追加します。詳細については、「テーマの作成またはカスタマイズ」を参照してください。
$nav-timeago-header-color	[履歴] タブのタイムスタンプヘッダーの背景	サポート対象外	サポート対象外
$navpage-nav-app-text	アプリケーションなどのアイテムのコアコンテンツのテキスト色と、 コネクト サイドバーの空ステータスのテキスト。	テーマの CSS フィールドに CSS プロパティを追加します。詳細については、「テーマの作成またはカスタマイズ」を参照してください。
$navpage-nav-app-text-hover	選択したモジュールのテキストの色	テーマの CSS フィールドに CSS プロパティを追加します。詳細については、「テーマの作成またはカスタマイズ」を参照してください。

• のロゴ、色、およびシステムデフォルトの設定 コア UI
  [基本構成] コア UI モジュールを使用して、会社のロゴと色でインスタンスをブランディングし、基本的なシステムのデフォルトを設定できます。この場所は、インスタンスを初めて設定する場合、または最近 コア UIを有効にした場合に最適な開始点です。
• コア UI でテーマを選択
  ユーザーインターフェイスのさまざまなテーマを切り替えることができます。
• メニューカテゴリのカスタマイズ
  メニューカテゴリを使用して、CSS スタイルをアプリケーションラベルに適用します。
• サーベイの質問ヘッダーの色の変更
  クラシック環境では、ベースカラーのヘッダーカラーが使用されます。これにより、CSS プロパティからテーマを作成できます。
• CSS テーマのサポート
  テーマは、さまざまな色の組み合わせを使用することで、ユーザーインターフェイスに特定のルックアンドフィールを与えます。