Cisco Service Portal コンフィギュレーション ガイド リリース 9.3.1
カスタム スタイル シート
カスタム スタイル シート
発行日;2012/05/30 | ドキュメントご利用ガイド | ダウンロード ; この章pdf , ドキュメント全体pdf (PDF - 5MB) | フィードバック

目次

カスタム スタイル シート

概要

カスタム スタイル シート

概要

前提条件

組み込みモジュールのカスタマイズ

ユーザ定義ポータルのカスタマイズ

カスタム スタイルの定義

カスタム スタイル シートおよびヘッダー/フッターをオンにする

ブラウザ キャッシュをイネーブルにした状態でのカスタマイゼーション修正

スタイルのカスタマイズ

ページ ヘッダー

ナビゲーション バー

ボタン

サービス フォーム

カスタマイゼーションの維持

既知のエラーおよび省略

不明なエラーおよび省略

以前のバージョンからのアップグレード

スタイルの要約と推奨される方法

スタイル要約 - 組み込みモジュール

スタイル要約 - ユーザ定義モジュール

推奨される方法

スクリーンショットの例および影響を受ける各スタイル

カスタム ヘッダーおよびフッター

概要

手順

ページ ヘッダーおよびフッターのカスタマイズ

概要

この章では、Cisco Service Portal(Service Portal)の Web ページの外観をカスタマイズするための機能について説明します。このカスタマイゼーションは、具体的にはカスケーディング スタイル シート(css)を使用して Web ページの書式を設定することによって、およびカスタム ヘッダーやフッターを追加することによって行います。

これらの機能を使用すると、Service Portal のすべての顧客向けモジュールの外観をカスタマイズできます。カスタマイズできるページは次のとおりです。

Request Center の My Services モジュールや Service Manager モジュールに表示されるページ(たとえば、Service Designer 経由で指定された定義に基づいて動的に生成されるサービス フォーム)

Demand Center のモジュール(Relationship Manager、My Services Executive、および Service Level Manager)に表示されるページ

Reporting および Advanced Reporting のポータル

ログイン ページ

Portal Manager ソリューション内の事前設定済みおよびカスタムのポータル ページ

サービス設計者や管理者が Service Portal の設定および管理に使用するモジュールの外観は、カスタマイズできません。これに該当するモジュールは、Service Item Manager、Service Designer、Organization Designer、Portfolio Designer、Administration、Catalog Deployer、Portal Designer、および Service Link です。

カスタム スタイル シート

概要

Service Portal アプリケーションのコンテンツは Web ページとして提示され、HTML を使用して書式が設定されます。カスケーディング スタイル シート(css)を使用すると、ページの表示に使用されるスタイルの定義を変更することによって Web ページの外観をカスタマイズできるため、Web ページそのものを編集する必要はありません。

カスタム スタイルを使用すると、Service Portal の Web ページ、ヘッダー、およびフッターをカスタマイズできます。1 つのアプリケーション インスタンスのすべてのユーザに同じカスタム スタイルを適用することも、ユーザのホーム組織単位に基づいて異なるスタイルを適用することもできます。

前提条件

アプリケーション サーバのファイル システム(具体的には、RequestCenter.war アーカイブの custom ディレクトリおよびそのサブディレクトリ)に対するアクセス権が必要です。このディレクトリおよびサブディレクトリに対する読み取りと書き込みの両方のアクセス権が必要です。

実行するユーザに付与されたユーザ ロールに、Administration の「Manage Global Settings」機能が含まれている必要があります。これは、カスタム スタイル シート、ヘッダー、およびフッターを使用するかどうかを切り替えるためです。

ブラウザ ページ キャッシングをオフにする必要があります。これは、スタイル シートの変更をテストできるようにするためです。

他のアナリストや開発者の作業に影響することなく変更をテストできる、アプリケーション インスタンスへのアクセス権があれば理想的です。

スタイル シート エディタおよびその他の編集ツールの使用を推奨しますが、必須ではありません。

組み込みモジュールのカスタマイズ

次に示す手順は、組み込みモジュールで使用されるスタイルの外観をカスタマイズするための基本的なものです。組み込みモジュールには、My Services、Service Manager、My Services Executive、Relationship Manager、および Reporting があります。これらのスタイルの詳細については、以降のセクションを参照してください。

1. ディレクトリをアプリケーション サーバの RequestCenter.war/custom ディレクトリの下に作成します。ここが、カスタム スタイルに必要なファイルの場所となります。このディレクトリには一般的に images サブディレクトリがあり、ここにカスタム画像が保存されます。ディレクトリ名は、スタイル適用先のテナントや組織の名前を示すように付けてください。

2. Service Portal Web アーカイブ(RequestCenter.war)の custom/CustomExamples ディレクトリにあるファイル example.css をコピーします。このアーカイブの場所は、アプリケーション サーバおよびインストールの設定によって異なります。

3. コピーしたファイルに custom.css という名前を付けます。custom.css ファイル内のスタイルを、次のセクションで説明するガイドラインに従って変更します。

4. カスタマイズ済みファイルを、custom.css 内で参照されている画像とともに、ステップ 1 で作成した新しいディレクトリにコピーします。

5. Administration モジュールの [Custom Styles] ページを使用して、スタイルを定義し、必要なファイルが存在するディレクトリを指定し、スタイル適用先の組織を割り当てます。

6. Administration モジュールの [Settings] ページを使用して、カスタム スタイル シートをオンにします。

7. Service Portal のブラウザ セッションを再起動します。表示されたページには、ログイン済みユーザに適用されるカスタマイゼーションが反映されているはずです。カスタム スタイル シートを初めてアクティブ化したときは、Service Portal セッションを終了して再起動する必要があります。スタイルに対するそれ以降の変更をテストするには、修正済みスタイル シートをアプリケーション サーバにコピーして現在のページをリフレッシュするだけで十分です。
ページ キャッシングが有効になっている場合を除いて、新しいスタイルが適用されます。


注意 カスタム スタイル シートを使用するように Administration の [Settings] を変更した後は、custom.css ファイルが指定のディレクトリに存在している必要があります。このファイルが存在しない場合は、Service Portal の標準スタイルが使用されます。同様に、カスタム ヘッダーまたはフッターを使用するというオプションがオンの場合は、対応するファイルが指定のディレクトリに存在している必要があります。

ユーザ定義ポータルのカスタマイズ

My Services などの組み込みモジュールと同様に、Portal Manager のモジュールも組織ごとに、スタイル シートを使用してカスタマイズできます。カスタム スタイルは、他の組み込みモジュールのものとは別のスタイル シートに保持されるため、Portal Manager のモジュールの提示方法における柔軟性が高まります。

Portal Manager ソリューションには、さまざまなテーマも付属しており、ポータル ページ上のポートレットの色に影響を及ぼします。ユーザが独自のテーマを選択できるようにしたり、この機能をポータル設計者だけに許可したりできます。ポータル ページのテーマの詳細については、『 Cisco Service Portal Designer Guide 』を参照してください。

Portal Manager のカスタム スタイル シートの場所は、Service Portal と同じ custom ディレクトリであり、Service Portal とともにイネーブルまたはディセーブルになります。

1. Service Portal Web アーカイブ(RequestCenter.war)の custom ディレクトリにあるファイル example_portal-custom-header.css をコピーします。

2. コピーしたファイルに portal-custom-header.css という名前を付けます。ファイル内のスタイルを、次のセクションで説明するガイドラインに従って変更します。

3. このファイルを、使用されている画像とともに、テナントまたは組織用に作成した custom ディレクトリにコピーします(「組み込みモジュールのカスタマイズ」、ステップ 1 を参照)。

カスタム スタイルの定義

カスタム スタイル シートやヘッダーとフッターの使用を開始するには、次の手順を実行します。


ステップ 1 Service Portal にログインし、[Administration] モジュールを選択し、[Settings] タブに移動します。[Customizations] ページが表示されます。

ステップ 2 [Custom Style] オプションを画面右側のオプション リストから選択します。新しいスタイルを作成するには、[Add] をクリックします。[Custom Style Properties] ページが表示されます。

 

ステップ 3 次のとおりにプロパティを入力します。

スタイル名には、そのスタイルの適用先である組織を反映してください。

スタイルの 1 つをデフォルトとして指定できます。デフォルトが指定されている場合は、ユーザのホーム組織(OU)にスタイルが割り当てられていないときにそのデフォルトが使用されます。デフォルトが指定されていない場合は、Service Portal デフォルトのスタイル シートが使用されます。

組織に階層構造が反映されている場合は、同じ親のすべての子 OU にスタイルを継承するかどうかを指定できます。

RequestCenter.war/custom の下にある任意のディレクトリからスタイル ディレクトリを選択できます。スタイルを作成するには、ディレクトリが存在している必要があります。

[Description] は必須ではありませんが、入力することを推奨します。

ステップ 4 [Add] をクリックするとスタイルが作成されます。これで、スタイルを編集してスタイルの適用先である組織を指定できるようになりました。

 

ステップ 5 [Associated Organizational Units] パネルの [Add] をクリックします。[Organizational Unit Search] ウィンドウが表示されます。事業単位を 1 つ以上選択します。

ステップ 6 スタイル定義や、スタイル適用先の事業単位の編集は、いつでもできます。


 

カスタム スタイル シートおよびヘッダー/フッターをオンにする

[Administration] モジュールを選択して [Settings] タブに移動します。[Customizations] ページが表示されます。次に示すように、[Common] の設定の中に [Enable Custom Header Footer] パラメータおよび [Enable Custom Style Sheets] パラメータがあります。

 

カスタム スタイル シートをイネーブルにするには、対応するパラメータ設定を [Off] から左の [On] ボタンに変更します。変更を保存するには、ページを更新します。新しい Service Portal セッションを開始すると、アプリケーション サーバ上の所定の場所にある custom.css ファイルで指定されているカスタム スタイルが有効になります。

同様に、カスタム ヘッダーやフッターをイネーブルにするには、[Enable Custom Header Footer] パラメータの設定を [On] に変更します。

これらのパラメータをオンにした状態で Service Portal セッションを開始した後は、セッションを終了しなくてもスタイルの変更が反映されます。スタイルの定義が変更されてファイルがアプリケーション サーバ上の指定のディレクトリに配置されると、それ以降は、ページをリフレッシュしたときに新しいスタイル定義が使用されます。

ブラウザ キャッシュをイネーブルにした状態でのカスタマイゼーション修正

Administration の [Settings] で [Browser Cache] 設定がイネーブルになっている場合は、カスタム スタイル シート、ヘッダー、およびフッターに対する変更が有効になるのはブラウザ キャッシュが削除された後となります。アプリケーション ユーザに各自のブラウザ キャッシュを削除するように求めるには、「[Browser Cache] 設定」の手順に従ってブラウザ キャッシュのバージョンをインクリメントしてください。

スタイルのカスタマイズ

custom¥CustomExamples ディレクトリにあるファイルは、Service Portal カスタマイゼーションの開始点として使用できます。次の表に、ディレクトリの内容の要約を示します。

custom(フォルダ)の内容
説明

customExamples

カスタム スタイル、ヘッダー、およびフッターの開始点となるものが格納されているフォルダ

images

Service Portal のスタイル(カスタム スタイル シート経由での置き換えが可能)で現在使用されている画像が格納されているフォルダ

common_task_bg.gif

[Common Tasks] ペインの背景

headerGradient.gif

ヘッダー スタイル(各ポートレットまたはペインの先頭に現れるスタイル)の背景

logo_bottom.gif

(廃止)

lvl1_nav_shade.gif

トップレベル ナビゲーション用のタブ(Service Portal の各モジュールで使用できるオプションが配置されます)の背景

lvl3_nav_shade.gif

レベル 3 ヘッダーの背景(ページ フッターに対しても推奨されます)

mark.gif

サービス フォーム上の必須フィールドを示す

orange_bullet.gif

共通タスクの箇条書き記号

orange_li_bullet.gif

(example custom.css では使用されていません)

page_footer_shade.gif

ページ フッターのシェーディングに使用できる gif

PopupHeaderGradient.gif

(example custom.css では使用されていません)

requiredMark.gif

サービス フォーム以外のすべてのユーザ インターフェイス ページでの必須フィールドを表す

tfoot_shade.gif

(example custom.css では使用されていません)

example.css

サンプル ファイル(開始点となる Service Portal のデフォルト設定が反映されており、グラデーションが単色で置き換えられます)

example_portal-custom-header.css

サンプル ファイル(Portal Manager デフォルトのヘッダー領域設定が反映されています)

example_footer.html

カスタム フッター開発の開始点

example_header.html

カスタム ヘッダー開発の開始点

CustomExamples/example.css ファイルおよび example_portal-custom-header.css ファイル(作成する custom.css ファイルのテンプレート)の形式は、標準カスケーディング スタイル シート ファイルとして設定されており、特定のスタイルについては修正方法を案内するコメントが含まれています。このコメントには、そのスタイルがどこでどのように使用されているかに関する簡単な説明が含まれていますが、カスタマイゼーションを詳細にチューニングするには、ある程度の検証作業が必要です。

カスタマイズしたスタイルのオリジナルの定義を、スタイル シート内にコメントとして記録しておいてください。このことが推奨されるのは、カスタマイズによる変更の破棄が必要になった場合に備えるためであり、元のページ外観がわかるようにするためでもあります。

オリジナルの custom.css ファイルおよび example_portal-custom-header.css ファイルについては、「カスタム ヘッダーおよびフッター」を参照してください。(オリジナルのレイアウトに小さな変更が加えられていますが、これは可読性を高めるためです)。変更を加える前に、ファイル全体に目を通してください。

ページ ヘッダー

エンドユーザ向けモジュールのページ ヘッダーには、次に示すスタイルが適用されます。

lvl1_nav(組み込みモジュールのみ):「レベル 1 ナビゲーション バー」は、アプリケーション モジュール ドロップダウン メニューおよびメニュー バーの背景となります。アプリケーション名は修正できませんが、lvl1_nav_title スタイルを使用して非表示にすることもできます。

header(ユーザ定義モジュールのみ):このヘッダー スタイルは、Portal Designer を使用して作成および管理されるポータル モジュールに使用されます。使用方法は、上記の lvl1_nav に似ています。

headerlogo、leftheaderlogo:この 2 つのヘッダー ロゴ スタイルを利用すると、次に示す例のようにロゴをヘッダーの左右どちら側にも柔軟に配置できるようになります。左ロゴを使用するときは、アプリケーション名の background プロパティを none に設定する必要があります。アプリケーション モジュール メニューに適用されるスタイルも、修正してメニューを右隅に配置できます。

右隅のロゴ(デフォルト設定)は、次のとおりです。

 

1

#leftheaderlogo{
background: none;
}

2

#headerlogo{
background:
url(/RequestCenter/images/logo_shaded.png) top right no-repeat;
margin-right: 5px;
min-height:25px !important;
}

左隅のロゴ:

 

1

#leftheaderlogo{
background:
url(/RequestCenter/images/logo_shaded.png) top left no-repeat;
width:4.5% !important;
}

#lvl1_nav_title{
display:none !important;

}

2

#headerlogo{
background: none top left no-repeat !important;
}

ナビゲーション バー

 

1

#bread_nav

5

#lvl3_nav

2

table.halfGrid

6

div.longHeader

3

#lvl1_nav

7

#footer

4

.levelTwoNavigation

デフォルトでは、ナビゲーション バーのほとんどには背景色のみが指定されています。ただし、スタイル シート内で指定される他の背景と同様に、バナーやグラフィックを使用するように変更できます。

My Services および My Services Executive のページのその他の部分では、ヘッダーやフッターなどの装飾がページの各部分に使用されます。たとえば、上の図に示すように、「レベル 3 ナビゲーション」(lvl3_nav)スタイルおよび footer スタイルによって My Services ホームページのページ本体の境界を示します。これらは同時に変更してください。

「ブレッドクラム ナビゲーション」(bread_nav)は、ブレッドクラム領域の背景となります。

ボタン

ボタンはサービス フォームに表示されるほか、Service Portal ユーザ インターフェイスにも表示されます。ボタンの外観は、button.primary スタイルによって決まります。プライマリ ボタン用のデフォルトのスタイルは、太字を使用するように設定されており、必要に応じてさらに目立つスタイルに変更することもできます。

 

1

プライマリ ボタン

サービス フォーム

サービス フォームに表示されるフィールドおよびキャプションの外観は、スタイルのセットによって決定されます。これらのスタイルについて、次の表に要約を示し、その後に例を示します。.form のスタイルはすべて同時に変更してください。

スタイル
用途

shortHeader

ディクショナリのキャプション

subhead

キャプション付きで表示される各ディクショナリの開始を表すバー

.formReq_border

フィールド ラベルの左のブランク スペース、およびフィールドどうしを区切る線

.formLabel

フィールド ラベル

.formElement

フィールドの HTML 表現の入力要素の書式設定

.formInfo

フォーム要素の右のブランク スペース、およびフィールドどうしを区切る線

.formIcon

フォーム右側の灰色のバー

 

1

shortHeader

2

subhead

カスタマイゼーションの維持

カスタム スタイル シートのファイル、およびカスタム ページ ヘッダーおよびフッターを定義する html ファイルは、アプリケーション サーバ上のアプリケーションの一部となっている必要があります。したがって、アプリケーション インスタンスのアップグレードや移行が必要になった場合に備えて、これらのカスタマイゼーションを維持するためのメカニズムが必要になります。カスタマイゼーションを維持するには、次の手順を実行します。


ステップ 1 アーカイブ ファイル(zip、またはアプリケーション サーバ プラットフォームに適したアーカイブ タイプ)を作成し、この中にカスタマイズ済みファイルを格納します。アーカイブ ファイルのルート ディレクトリは RequestCenter.war ディレクトリとする必要があります。

ステップ 2 Service Portal アプリケーションのアップグレードを実行します。インストール時に、「Site Component Installation Options」に関する次のような質問が表示されます。

 

ステップ 3 「Include custom content?」という質問(この例では 19 番)に「Yes」と回答します。ページ表示が次のように変化して、カスタム コンテンツが格納されているアーカイブ ファイルの場所をたずねる質問が追加されます。

 

ステップ 4 アーカイブ ファイルのディレクトリと名前を入力します。

ステップ 5 Cisco Service Portal Installation Guide 』の手順に従ってインストール/アップグレード プロセスを完了します。カスタム コンテンツは、アプリケーション サーバ展開パッケージに組み込まれます。


 

既知のエラーおよび省略

Service Portal のオンライン ヘルプ ファイルをカスタマイズすることはできません。

不明なエラーおよび省略

Service Portal のページで使用されているスタイルの中には、CustomExamples/example.css ファイルに含まれていないものもあります。このような省略が見つかった場合は、Cisco Technical Assistance Center(TAC)までお知らせください。

一時的な回避策を利用できる可能性があります。生成されたページのソースを表示して、そのスタイルの適用先であるセクションのクラスや ID を特定します。このクラスまたは ID によって一意に特定されるオブジェクトの外観を変更する場合は、該当するスタイルをカスタム スタイル シートに追加するか、該当する属性をスタイル定義に追加してください。この方法を使用する場合は、十分に注意してください。カスタム スタイル シートに追加したものは、以降のリリースでサポートされないことがあるためです。

以前のバージョンからのアップグレード

このバージョンの Service Portal で使用されているスタイルは、以前のバージョンのスタイルから変更されている可能性があります。このような変更は、ページの外観を更新するだけでなく、以前のリリースで発見されたパフォーマンスや一貫性の問題を解決するものでもあります。

スタイルの要約と推奨される方法

スタイル要約 - 組み込みモジュール

次の表は、custom.css で設定できるスタイルの要約です。

スタイル/クラス名
備考
本体およびグローバルのスタイル

body

#lvl3_nav

#headerlogo

右側ロゴ

#leftheaderlogo

左側ロゴ

#lvl1_nav_title

アプリケーション名

#footer

.levelTwoNavigation

タブ選択

table#nsLayout.rightMenu td#layoutright

ナビゲーションのスタイル

#lvl1_nav

#lvl1_nav span
#lvl1_nav a

#llvl1_nav a:hover

.menuDivider

#lvl2_nav

#lvl2_nav a

#lvl2_nav td.active

h2#title_nav

#bread_nav

#bread_nav a

#logobottom

廃止(ダミー画像を使用)

タブ ナビゲーション制御のスタイル

.levelTwoNavigation a
.tabNavigation a

.levelTwoNavigation a:hover
.tabNavigation a:hover

.levelTwoNavigation a.selected
.tabNavigation a.selected

.levelTwoNavigation a.selected:hover
.tabNavigation a.selected:hover

.propertyTabNavigation a

#levelTwoTabDiv img

タブ ボタンの左右端の画像

.levelTwoNavigation div.levelTwoTab

.levelTwoNavigation a

My Services サービス項目タブのスタイル

.x-grid3-row

グリッド行の背景色

.x-grid3-row TD

グリッド行のフォント

.x-grid3-row-alt

1 行おきに変える背景色

.x-grid3-hd-row td

グリッド ヘッダーのフォント

ul.x-tab-strip-top

タブの背景色

.x-tree-node A SPAN

ツリーのフォント

ヘッダーおよびタイトルのスタイル

div.longHeader
div.shortHeader

div.longHeader h4
div.shortHeader h4
div.longHeader span
div.shortHeader span

div.subHeader

h4.header

h4.header span

ボタンのスタイル

button
input.primary
input.secondary
input.disabled

button.primary
input.primary

button.secondary
button.help
input.secondary

button.disabled
input.disabled

カタログおよびサービス表示のスタイル

table.browser

table.browser td.categoryImage
table.browser td.categoryText

table.browser td.categoryText

div.smallshell

div.service

table#columns select

データ テーブルのスタイル

table.
halfGrid,fullGrid,footGrid,taskGrid,noGrid

table.
halfGrid,taskGrid,noGrid

table.
footGrid,noGrid

table.dProcess

table.
halfGrid,fullGrid,footGrid,
taskGrid,noGrid,dProcess
thead th.first

table.
halfGrid,fullGrid,footGrid,
taskGrid,noGrid,dProcess
thead th.firstSel

table.
halfGrid,taskGrid,fullGrid
tbody td
tbody th

table.
footGrid,fullGrid
tbody td
tbody th

table.kpi

table.fullGrid tbody.subHeader td

table.
halfGrid,fullGrid,footGrid,
taskGrid,noGrid,smGrid
tbody tr.shade td
tbody tr.shade th
taskGrid
tbody tr.current th
tbody tr.current td

table.
halfGrid,footGrid,taskGrid,noGrid
tbody tr:hover
th
td

table.
halfGrid,fullGrid,footGrid,
taskGrid,noGrid,dProcess,smGrid
thead th
body.calendar table#calendar th

table.
halfGrid,fullGrid,footGrid,noGrid
tfoot th
tfoot td

table.
halfGrid,fullGrid,footGrid,noGrid
tbody tr td.select
tbody tr th.select

table.
halfGrid,fullGrid,footGrid,noGrid
tbody tr
td.select + td
td.select + th
th.select + td
th.select + th

table.fullGrid tbody.td.kvpKeyHi:hover
table.fullGrid tbody.th.kvpKeyHi:hover
table.fullGrid tbody.td.kvpKeyHi:hover + td.kvpValue
table.fullGrid tbody.th.kvpKeyHi:hover + td.kvpValue

table.fullGrid tbody.td.kvpKeyHi
table.fullGrid tbody.th.kvpKeyHi

table.fullGrid tbody td.kvpValueHi

他のテーブルおよびテーブル関連コンテンツのスタイル

div.thead
div tfoot

div.tsubfoot

div.detailHeader

div.detailHeader td.owi

div.tfoot input.textBox
div.tsubfoot input.textBox

コメントおよび履歴のスタイル

table.commentstable

table.commentsTable div.commentContainer

共通タスクおよびポートレットのスタイル

div.shell

.commonTaskCell
ul.tasks.li

ul.tasks

img.commontaskbullet

通常のポートレット、フォーム、およびコンテナのスタイル

div.service
div.shell
div.smallshell
div smallShell
table.halfGrid
table.fullGrid
table.footGrid
table.taskGrid
table.noGrid
#treecontainer
div.loginBox

入力要素

input
select

サービス フォーム テキスト要素

input.textBox
textarea

サービス フォーム テキストエリア要素

コンテンツ スイッチングのスタイル

ul.MDITabs li:hover

ul.MDITabs li.active

サービス フォームのスタイル

tr.error td.
formReq
formLabel
formElement
formFlex
formInfo

サービス フォームで使用されるディクショナリ内で定義されているフィールドのコンポーネント(必須記号、フィールド ラベル、入力要素)

tr.error td.formIcon

.formReq_border

.formLabel

.formElement

.formFlex

.formInfo

.formIcon

div#formMonitor div a

div#formMonitor div.valid

div#formMonitor div.invalid

カレンダーのスタイル

body.calendar table#calendar td

body.calendar table#calendar td.selected

Service Manager のスタイル

table#SMLayout

table#SMLayout td#SMTreeFrame

div.SMToolbar

table.smGrid tbody tr.hilight
td, th

div.
treeHeader
treeNode
treeItem
treeNode span.unselected

div.treeNode span.selected

div.treeHeader span

table.smGrid thead th

table.smGrid tbody
td, th

table.smGrid tbody tr.shade
td, th

モジュールのメニュー

.modulemenu

.modulemenu .menuheadingrow

menuHighlight

スタイル要約 - ユーザ定義モジュール

次の表は、portal-custom-header.css で設定できるスタイルの要約です。

スタイル/クラス名
備考
ヘッダーのスタイル

#headerlogo

右側ロゴ

#leftheaderlogo

左側ロゴ

#lvl1_nav_title

アプリケーション名

#header

#usercontrols

#cornerpiece

#moduleMenuDiv

.modulemenu

.menuHighlight

#userinfoandcontrols

#userinforow

#usercontrolstable

#userconrolsrow

#profilef

#logoutref

#helpref

推奨される方法

example.css を複製して custom.css を作成した直後は、スタイルはユーザ インターフェイスに対して効力を持ちませんが、個々のプロパティが変更されると、その結果がカスタマイズ可能モジュールに反映されます。

デフォルトのユーザ インターフェイスで使用されているスタイルの中には、色の値としてではなく、背景画像として実装されるものがあります。画像の中には、置き換えのために custom/CustomExamples/images サブディレクトリに複製されているものがあります。置き換える画像は、タイプ、サイズ、形状、および名前が同一である必要があります。そうでない場合は、ユーザ インターフェイスに正しく組み込まれません。

カスタム スタイル シートの中には、背景画像を使用するか単純に色の値を指定するかを選択できる場所が多数あります。このような場所のそれぞれに代替属性があり、どちらの属性を使用するかは、属性のコメント化またはコメント解除によって指定します。次に例を示します。

div.longHeader,
div.shortHeader
{ /* background: #FD2312; */
background: url(./images/headerGradient.gif);
border-bottom: 2px solid #cc3333;
}
 

ここでは、ポートレットをグラデーション ヘッダーにするための画像が使用されています。そのグラデーションを変更するには、custom サブディレクトリ内にあるこの画像を置き換えます。単色の背景色に切り替えるには、画像を指定している背景を /* */ のパターンを使用してコメント化し、16 進数で色が指定されている背景のコメントを解除します。

新しい画像を作成して、その画像を指すように custom.css ファイルを修正することもできます。次に例を示します。

#header
{
background: #ffffff url(./images/logo.gif) top left no-repeat;
border-bottom: 1px solid #a7a7a7;
}
 

この場合は、新しい logo.gif を作成してファイルを置き換えることも、新しい画像(たとえば acme_logo.gif)を生成することもできます。その後で、プロパティ宣言を次のように変更します。

background: #ffffff url(./images/acelogo.gif) top left no-repeat;
 

ルック アンド フィールで使用されている他の画像についても同様です。

Portal Designer で定義および管理されるモジュールについては、ポータル ページ本体にカスタム スタイル シートの影響が及ぶことはありません。代わりに、Page Settings を使用して、ヘッダー スタイルに一致するポータル ページ テーマを設定します。

スクリーンショットの例および影響を受ける各スタイル

この図は、スタイルの効果を表しています。すべてのスタイルが含まれているわけではありませんが、最もよく使用されるものが含まれています。

 

* は、これがスタイル グルーピング内の最初の記述子であり、他にもあることを示します。

カスタム ヘッダーおよびフッター

概要

シスコは、Service Portal の Web ページとともに表示されるページのヘッダーおよびフッターをカスタマイズするためのテンプレートを用意しています。

手順

次に示す手順は、カスタム ヘッダーやフッターを Service Portal アプリケーションに追加するための基本的なステップです。これらのスタイルの詳細については、次のセクションで説明します。


ステップ 1 example_header.html ファイルおよび example_footer.html ファイルを Service Portal Web アーカイブ(RequestCenter.war)の custom ディレクトリからコピーします。

ステップ 2 コピーしたファイルの名前を、header.html および footer.html と変更します。

ステップ 3 次のセクションに示すガイドラインに従って、ヘッダーやフッターのファイルにコンテンツを追加します。

ステップ 4 カスタム ヘッダーおよびフッターのファイルを、適用するスタイルに応じた所定のディレクトリに置きます。両方のファイルが存在している必要があります。カスタム ヘッダーやフッターを使用しない場合は、空のファイルをアプリケーション サーバにコピーして該当する名前および .html 拡張子を付けます。

ステップ 5 Administration の [Site Administration] > [Site Configuration] ページを使用してカスタム ヘッダーおよびフッターをオンにします。具体的には、サイト設定パラメータ [Enable Custom Header Footer] を [On] に設定します。

ステップ 6 Service Portal のブラウザ セッションを再起動します。表示されたページに、カスタマイゼーションが反映されているはずです。


 

ページ ヘッダーおよびフッターのカスタマイズ

カスタム ページ ヘッダーおよびフッターは、標準のページ ヘッダーおよびフッターに追加して表示されます。これらの代わりに表示されるわけではありません。ヘッダーおよびフッターの html ファイルでは、適切と見なされるコマンドはどれでも使用できます。これには、Service Portal のデフォルトのスタイルも含まれます。

たとえば、footer.html ファイルで次のようなコンテンツを使用するとします。

<img src="/RequestCenter/images/eAdmin.gif"
alt="eAdmin logo" align="top" name="eAdminLogo"/>
 

この結果、フッターは次のように表示されます。この図で、「Technology by Cisco」のロゴが My Services の標準ページ フッターです。