インスタンスの外観のカスタマイズ
アドミニストレーターは、グローバル CSS またはシステムプロパティを変更して、デフォルトのインスタンスインターフェイスの外観を変更できます。機能は影響を受けません。
たとえば、多くの場合、組織では複数のインスタンスを使用して開発、テスト、および本番アクティビティを分離します。ユーザーが誤って間違ったインスタンスを変更しないように、アドミニストレーターはそれぞれに視覚的に異なるテーマを設定できます。インスタンスのテーマを定義するには、いくつかの方法があります。
CSS プロパティ
移動先 .
次のプロパティは、CSS プロパティから使用できます。
注:
色は、事前定義された 色名、RGB 小数、または RGB 16 進数を使用して指定されます。
- バナーテキストの色
- バナーとリストキャプションの背景色
- フォームとリストで使用されるフォント (これはグローバルフォント設定です)
- ボタンのスタイル (背景色、境界線の色、境界線の幅、テキストの色)
- フィールドステータスインジケーターの色 (変更済み、必須入力済み、必須未入力、読み取り専用インジケーターを含む)
- リストセルの垂直配置
- ナビゲーターメニューのスタイル (テキストのフォントサイズ、背景色、テキストの色)
- ヘッダーのフォント名とサイズ
- リストとフォームのキャプションの色の上書き
- グローバルテキスト検索の背景色 (カタログ結果とナレッジベースの結果の両方)
UI プロパティ
移動先 .
次のプロパティは、UI プロパティから使用できます。
- アクティビティフォーマッターで使用されるアイコン
- 追加のコメントと作業メモの背景色
- フォーム上のボタンの配置
- タスクアクティビティフォーマッターで使用されるアイコン
- インシデントの追加コメントと作業メモの背景色
CSS クラスのサポート
コア UI (UI16) では、CSS プロパティとそれらがプラットフォーム UI に与える影響は、リリースに応じて異なります。
注:
[基本構成 UI16] ページで構成された設定は、 ネクストエクスペリエンス が有効になっているインスタンスには適用されません。
| CSS クラス | 説明 | 構成方法 |
|---|---|---|
| $navpage-header-bg | ヘッダーの背景色 | 移動先 |
| $navpage-header-color | ヘッダーテキストとグローバル検索アイコンの色 | 移動先 |
| $navpage-header-button-color | ログインしているユーザー名のテキスト、およびグローバル検索 コネクト、ヘルプ、および設定アイコンの色 | テーマの [CSS] フィールドに CSS プロパティを追加します。詳細については、「テーマの作成またはカスタマイズ」を参照してください。 |
| $navpage-header-divider-color | ヘッダー分割線の色 | 移動先 |
| $navpage-button-color | サイドバーの次のアイコンの色
|
テーマの [CSS] フィールドに CSS プロパティを追加します。詳細については、「テーマの作成またはカスタマイズ」を参照してください。 |
| $navpage-button-color-hover | ユーザーがコントロールにカーソルを合わせたときの次のアイコンの色:
|
テーマの [CSS] フィールドに CSS プロパティを追加します。詳細については、「テーマの作成またはカスタマイズ」を参照してください。 |
| $search-text-color | ナビゲーションフィルターとグローバル検索フィールドの両方での検索テキストの色 | テーマの [CSS] フィールドに CSS プロパティを追加します。詳細については、「テーマの作成またはカスタマイズ」を参照してください。 |
| $navpage-nav-border | ナビゲーションフィルターと会話フィルターの境界色 | 移動先 |
| $nav-ハイライト-メイン | ユーザーがクリックした後にモジュールをハイライト表示します。コネクトワークスペースで、選択した会話をハイライト表示します。 | テーマの [CSS] フィールドに CSS プロパティを追加します。詳細については、「テーマの作成またはカスタマイズ」を参照してください。 |
| $subnav-background-color | 展開されたナビゲーションアイテムの背景 | 移動先 |
| $navpage-nav-bg | ナビゲーターとサイドバーのヘッダーとフッター。 | 移動先 |
| $navpage-nav-bg-sub | ナビゲーターとサイドバーの背景 | 移動先 |
| $navpage-nav-color-sub | メインナビゲーションのモジュールのテキストの色 | テーマの [CSS] フィールドに CSS プロパティを追加します。詳細については、「テーマの作成またはカスタマイズ」を参照してください。 |
| $navpage-nav-mod-text-hover | メインナビゲーションのアイテムにカーソルを合わせたときのテキストの色 | サポート対象外 |
| $nav-hr-color | ナビゲーターセパレーターの色 | 移動先 |
| $nav-ハイライト-バー-アクティブ | アプリケーションナビゲーターのアクティブタブの下にある線。この色は、システム設定の [テーマ] タブのテーマプレビューの一部としても使用されます。 | 移動先 |
| $nav-highlight-bar-inactive | アプリケーションナビゲーターの非アクティブなタブの下にある線 | 移動先 |
| $navpage-nav-selected-bg | ナビゲーション選択タブの背景色 | 移動先 |
| $navpage-nav-selected-color | 現在選択されているナビゲーションタブアイコンの色 | 移動先 |
| $navpage-nav-unselected-color | 選択していないナビゲーションタブアイコンとお気に入りのアイコンの色 | 移動先 |
| $connect-latest-message | コネクトで現在選択されているメッセージの色 | テーマの [CSS] フィールドに CSS プロパティを追加します。詳細については、「テーマの作成またはカスタマイズ」を参照してください。 |
| $nav-timeago-header-color | [履歴] タブのタイムスタンプヘッダーの背景 | サポート対象外 |
| $navpage-nav-app-text | アプリケーションなどのアイテムのコアコンテンツのテキスト色と コネクト サイドバーの空ステータスのテキスト。 | テーマの [CSS] フィールドに CSS プロパティを追加します。詳細については、「テーマの作成またはカスタマイズ」を参照してください。 |
| $navpage-nav-app-text-hover | 選択したモジュールのテキストの色 | テーマの [CSS] フィールドに CSS プロパティを追加します。詳細については、「テーマの作成またはカスタマイズ」を参照してください。 |