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

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

たとえば、組織では多くの場合、複数のインスタンスを使用して、開発、テスト、および本番アクティビティを分離します。ユーザーが誤って間違ったインスタンスを変更しないように、管理者はそれぞれを視覚的に異なるテーマで構成できます。インスタンステーマを定義するには、いくつかの方法があります。

CSS プロパティ

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

次のプロパティは [CSS プロパティ] から使用できます。

注:

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

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

UI プロパティ

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

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

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

CSS クラスのサポート

コア UI (UI16) では、CSS プロパティとプラットフォーム UI への影響はリリースによって異なります。

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

CSS クラス	Description (説明)	構成方法	影響領域
$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 テーマのサポート
  テーマは、さまざまな色の組み合わせを使用して、ユーザーインターフェイスに特定のルックアンドフィールを与えます。