テーマを使用したサイトの外観の変更

カスタム・カスケーディング・スタイル・シートを作成し、カスタム・イメージを提供することで、IBM® Rational® Asset Manager Web アプリケーションの外観を変更することができます。

始める前に

Rational Asset Manager の前のリリースでテーマをカスタマイズするためにデフォルト・ファイルを変更した場合は、バージョン 7.5.2 に更新する前に、現行テーマをダウンロードしてください。 現行テーマは、そのバージョンのデフォルト・テーマに更新中に上書きされます。 サーバーに対する Rational Asset Manager 更新の完了後、前のバージョンからの問題を特定するために、テーマをテスト・インストール済み環境に再適用してください。

このタスクについて

リポジトリー管理者は、web アプリケーションの外観を定義するイメージおよびカスケーディング・スタイル・シートが含まれるアーカイブをダウンロードすることができます。 これらのファイルをカスタマイズ後、リポジトリー管理者は変更を実装するために、更新されたアーカイブをアップロードします。

手順

  1. Web クライアントにリポジトリー管理者としてログインします。
  2. 管理」をクリックします。
  3. 「リポジトリー管理」サイドバーで、「ツール」をクリックします。
  4. 「ツール」ページで、「テーマの管理」セクションを見つけます。
  5. 現在のテーマのダウンロード」をクリックします。
  6. currentTheme.zip アーカイブをローカル・コンピューターに保存します。 このアーカイブ・ファイルには、カスケーディング・スタイル・シート (CSS)、JavaServer Pages (JSP)、およびイメージ・ファイルが含まれています。
  7. アーカイブを解凍します。 フォルダー構造は維持するようにしてください。
  8. 1 つ以上の CSS ファイルを作成し、theme/custom/css ディレクトリーに保存します。
  9. Rational Asset Manager とともにインストールされたデフォルトのスタイル・シートをレビューします。 変更したいすべてのスタイルについて、スタイル規則をご使用の CSS ファイルにコピーし、編集してください。 新しい CSS ファイルで行った変更により、デフォルトのスタイル・シートにあるスタイル規則がオーバーライドされます。
    重要: テーマ・アーカイブ・ファイルにあるデフォルトのスタイル・シートは変更しないでください。 これらのスタイル・シートはリリース間で変更され、Rational Asset Manager のアップグレード時に上書きされます。
  10. ご使用のカスタム・スタイル・シートを theme/custom/cssIncludes.jspf にリンクとして追加します。 サンプル:

    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/${applicationScope.themePath}/custom/css/jkeEnterprises.css" />

  11. images フォルダーをカスタム・ディレクトリーに作成し、テーマで使用するイメージ・ファイルをその中に保存します。 例: theme/custom/images-jke-enterprises
  12. 更新済みのファイルを含むアーカイブを作成します。 アーカイブの名前はカスタマイズできますが、「theme」という名前のフォルダーがアーカイブのルート・フォルダーでなければなりません。 変更を行わなかった場合でも、作成したカスタマイズ CSS ファイルに加えて、テーマ・アーカイブに以下のファイルが含まれていることが必要です。
    • theme/custom/header.jspf: ロゴ・イメージ、ログイン・ユーザー名、および「ログイン」、「ログアウト」、「ヘルプ」、「拡張」の各リンクを含みます。
    • theme/custom/cssIncludes.jspf: カスタム CSS ファイルへの <link> タグを含みます。
    • theme/custom/homeContent.jspf: ホーム・ページのコンテンツ領域を含みます。
    • theme/custom/jspHeader.jspf: 追加のバナー詳細を含みます。
    • theme/custom/requestAccess.jspf: このファイルはサインイン・ページのサインイン ・フォームの下に表示されます。 デフォルト・テーマでは、このフラグメントには何もありませんが、Web アプリケーションで一般的な「パスワードを忘れた場合」や「登録」などのリンクを追加できます。
    • theme/custom/requestAccessForm.jspf: このファイルはホーム・ページのサインイン・フォームの下に表示されます。 デフォルト・テーマでは、このフラグメントには何もありませんが、Web アプリケーションで一般的な「パスワードを忘れた場合」や「登録」などのリンクを追加できます。
    • theme/custom/css/advanced.css: サイズ変更および位置決めのための拡張 CSS。
    • theme/custom/css/basic.css: イメージ、背景、フォント・スタイルのための基本 CSS。
    • theme/custom/css/hideRightColumn.css: 右の列のないページのための CSS。
    • theme/custom/css/pageLayout.css: 一般ページ・レイアウトのための CSS。
    • theme/custom/css/showLeftColumn.css: 左の列のあるページのための CSS。
  13. 「ツール」ページの「テーマの管理」セクションで、「参照」をクリックします。
  14. 更新されたアーカイブを見つけます。
  15. アップロード」をクリックします。

タスクの結果

新しいテーマが適用されます。 変更内容が表示されない場合は、ブラウザーの最新表示ボタンまたは再ロード・ボタンをクリックしてください。 Web ブラウザーのキャッシュの消去が必要な場合もあります。 Web アプリケーションを再始動する必要はありません。 テーマが正しく適用されたかを検証するには、Web アプリケーションのいくつかのページを表示してください。 結果が予想と異なる場合は、カスタム CSS ファイルを変更して再度テーマをアップロードしてください。

次のタスク

テーマ・アーカイブのコピーを保存しておいてください。 オリジナル・テーマを復元する必要がある場合は、「デフォルト・テーマを復元します」をクリックしてください。

Web アプリケーションが再デプロイされた場合、または新バージョンにアップグレードされた場合は、デフォルト・テーマが適用されるため、カスタム・テーマをアップロードする必要があります。


フィードバック