› ユーザー インターフェイス › テーマ › テーマの作成

テーマの作成

サイト全体で使用するテーマを作成するには、次の手順を実行します。

  1. [ユーザー インターフェイス] > [テーマ] に移動します。
  2. [新規] をクリックします。
  3. 全般プロパティを設定します。

    [名前]

    MyTheme などのテーマの名前。

    [カテゴリ]

    テーマのカテゴリ。

    [説明]

    この項目は任意です。「顧客オンボーディング ソリューションのテーマ」などの、テーマの説明。

    [デスクトップ スタイル]

    デスクトップ フォームに適用するテーマ。(デフォルト: [TotalAgilityWorkspace])

    利用可能なテーマは、[Classic]、[Crisp]、[Crisp Touch]、[Gray]、[Neptune]、[Neptune Touch]、[TotalAgilityWorkspace]、[Triton]、および [Aria] です。

    TotalAgility 7.6.0 より前のバージョンからインポートされたテーマの場合、または、TotalAgility 7.6.0 へのアップグレードで利用可能なテーマの場合、デスクトップのスタイルはデフォルトで「Classic」になります。デフォルトのスタイルを [TotalAgilityWorkspace] に変更する場合は、スタイル シートを必ず TotalAgilityWorkspace.css に変更します。

    [タッチ スタイル]

    タッチ フォームに適用するテーマ。(デフォルト: TotalAgilityWorkspace)

    利用可能なテーマは、[iOS]、[マテリアル]、[Neptune]、[TotalAgilityWorkspace]、および [トリトン] です。

    TotalAgility 7.6.0 より前のバージョンからインポートされたテーマの場合、または、TotalAgility 7.6.0 へのアップグレードで利用可能なテーマの場合、タッチ スタイルはデフォルトでトリトンになります。デフォルトのスタイルを Kofax TotalAgility Workspace に変更する場合は、スタイル シートを必ず TotalAgilityWorkspace.css に変更します。

    [フォント/背景の無効化]

    選択すると、[バックグラウンド] (ページの色) と [フォント スタイル] を設定できます。設定により、デフォルトのフォントとバックグラウンドの色が上書きされます。

    [スタイルシート]

    テーマに使用するスタイル シート。または、スタイル シートの名前を入力します。ランタイムにスタイル シートが機能するように、スタイル シートの名前が正しいことを確認します。

    Kofax TotalAgility Workspace パッケージからインポートされる TotalAgility Workspace テーマの場合、タッチ スタイルおよびデスクトップ スタイルはデフォルトで TotalAgility Workspace になり、スタイル シートはデフォルトで TotalAgilityWorkspace.css になります。

    [デスクトップを右から左に表示]

    選択した場合 (デフォルト: オフ)、テーマを利用しているサイトを使用してフォームまたは TotalAgility Workspace を表示したときに、コンテンツが右から左に表示されます。

    このオプションは、タブレットまたはモバイルではサポートされていません。

  4. 基本的なコントロール、メニュー、ヘッダー、フッターなどのスタイルを構成するには、[CSS] タブをクリックします。
  5. デフォルトでは、すべてのコントロール タイプと関連する設定が表示されます。リストをコントロール タイプでフィルタリングするには、[コントロール] リストで、[ベーシック] などのコントロール タイプを選択します。

    基本のコントロールが表示されます。

  6. コントロールの [CSS クラス] リストで、スタイルを選択します。

    このスタイルは、選択したコントロールに適用されます。

    使用可能なコントロール タイプは次のとおりです。

    コントロール タイプ

    説明

    [ベーシック]

    [カレンダー]、[チェック ボックス]、[ドロップダウン]、[水平線]、[ハイパーリンク]、[ラジオ ボタン リスト]、および [テキスト ボックス] のコントロールのスタイル。

    カレンダーにスタイルを適用すると、ドロップダウン リストのみに適用され、カレンダー選択ポップアップには適用されません。カレンダーとは異なる色でボタンを表示するには、CSS ファイルで次の手順を実行します。

    1. 行を削除します。

      display: inline-block.

    2. 次のコード スニペットを追加して、ボタンの色を変更します。

      .x-datepicker .x-btn
{
background: black !important;
color: red !important;
}

    このスタイルはすべてのカレンダーに適用されます。

    [ボタン]

    [カレンダー]、[ファイルのアップロード]、[イメージ]、[ピッカー]、[プライマリ ボタン]、[標準]、[テーブル]、および [ツールバー] のスタイル。

    [キャプチャ]

    [確認済み] フィールド、[確認されていません] フィールド、[エラー] メッセージ、[選択されたノード]、[複数選択ノード]、[ステータス バー] のスタイル。

    [KCM]

    KCM コントロールの境界線色の [全般] スタイルと、グループ ボックスのヘッダーの [グループ ヘッダー] のスタイル。

    Kofax TotalAgility 7.6.0 にアップグレードするときに、KCM の全般オプションとグループ ヘッダー オプションは、TotalAgilityWorkspace.css をインポートするときにのみ利用可能になります。

    [セル]

    折り畳み可能な [セル ヘッダー] と [セル全般] のスタイル。

    [フッター]

    [フッター] のスタイル。

    [ヘッダー]

    [ヘッダー] のスタイル。

    [ラベル]

    [ベーシック ラベル]、[見出し 1]、[見出し 2]、[見出し 3]、[見出し 4]、[見出し 5] および [見出し 6] のスタイル。

    [リスト]

    リストの [行の交換]、[行]、および [選択された行] のスタイル。

    [メニュー]

    [水平方向のデフォルト] メニューと [水平ホバー スタイル]、[垂直方向のデフォルト] メニューと [垂直ホバー スタイル] のスタイル。
    [タブ] [コンテンツ スタイル]、[デフォルト] タブ、[ヘッダー/フッターのスタイル]、[ホバー スタイル] および [選択済み] タブのスタイル。

    [テーブル]

    テーブルの [行の交換]、[背景色]、[デフォルトの行]、[フレーム]、[ヘッダー]、および [選択された行] のスタイル。

    • Workspace パッケージをインポートせずに TotalAgility をアップグレードした場合、[垂直方向のデフォルト] スタイルは [水平方向のデフォルト] スタイルと同じように動作し、[垂直ホバー スタイル] は [水平ホバー スタイル] と同じように動作します。

    • Workspace パッケージをインポートすることによって TotalAgility をアップグレードすると、TotalAgility Workspace のテーマは垂直メニュー スタイルになり、すべての CSS スタイルが適用されます。

    • デスクトップ、モバイル、またはタブレット デバイス (非タッチ フォームのみ) でナビゲーションを表示し、水平方向および垂直方向のナビゲーションに対してテーマが定義されている場合、それぞれに対して定義されたスタイルが適用されます。

  7. 同様に、必要に応じて他のコントロールにスタイルを適用します。
  8. [保存] をクリックします。

方法: