この製品のマニュアルセットは、偏向のない言語を使用するように配慮されています。このマニュアルセットでの偏向のない言語とは、年齢、障害、性別、人種的アイデンティティ、民族的アイデンティティ、性的指向、社会経済的地位、およびインターセクショナリティに基づく差別を意味しない言語として定義されています。製品ソフトウェアのユーザーインターフェイスにハードコードされている言語、RFP のドキュメントに基づいて使用されている言語、または参照されているサードパーティ製品で使用されている言語によりドキュメントに例外が存在する場合があります。シスコのインクルーシブランゲージに対する取り組みの詳細は、こちらをご覧ください。
このドキュメントは、米国シスコ発行ドキュメントの参考和訳です。リンク情報につきましては、日本語版掲載時点で、英語版にアップデートがあり、リンク先のページが移動/変更されている場合がありますことをご了承ください。あくまでも参考和訳となりますので、正式な内容については米国サイトのドキュメントを参照ください。
目次
この章は次のトピックで構成されています。
この章では、Service Catalog Web ページの外観をカスタマイズするための機能について説明します。 アプリケーション内の顧客向けモジュールの外観をカスタマイズするには、カスケーディング スタイル シート(CSS)とカスタム ヘッダーおよびフッターを使用します。
カスタマイズできるページは次のとおりです。
サービス設計者や管理者が Service Catalog の設定および管理に使用するモジュールの外観は、カスタマイズできません。 これに該当するモジュールは、Service Item Manager、Service Designer、Organization Designer、Administration、Catalog Deployer、Portal Designer、および Service Link です。
Service Catalog アプリケーションのコンテンツは、HTML5 を使用して書式設定され Web ページとして表示されます。 カスケーディング スタイル シート(CSS)を使用すると、ページの表示に使用されるスタイルの定義を変更することによって Web ページの外観をカスタマイズできるため、Web ページそのものを編集する必要はありません。
カスタム スタイルを使用すると、Service Catalog の Web ページ、ヘッダー、およびフッターをカスタマイズできます。 1 つのアプリケーション インスタンスのすべてのユーザに同じカスタム スタイルを適用することも、ユーザのホーム組織単位に基づいて異なるスタイルを適用することもできます。
次の手順は、組み込みモジュール(My Services、Service Catalog、Service Manager、および Reporting)で使用されるスタイルの外観をカスタマイズするための基本ステップです。 これらのスタイルの詳細については、以降の項を参照してください。
注意 |
カスタム スタイル シートを使用するように Administration 設定を変更した後は、custom.css ファイルが指定のディレクトリに存在している必要があります。 このファイルが存在しない場合は、Service Catalog の標準スタイルが使用されます。 同様に、カスタム ヘッダーまたはフッターを使用するというオプションがオンの場合は、対応するファイルが指定のディレクトリに存在している必要があります。 |
CSS スタイルの設計者は、サーバ上のディレクトリに CSS を配置します。 次の例では、カスタム スタイルに名前を付け、スタイル ディレクトリに関連付けて、説明を入力します。さらに、このスタイルをサイト(関連付けられた組織ユニットの下のサブ OU)のすべてのユーザに適用するかどうか、また Service Catalog モジュールに適用するかどうかを指定します。
次のとおりにプロパティを入力します。
フィールド |
説明 |
---|---|
[名前(Name)] |
スタイルの名前は、スタイルが適用される組織の OU または OU のグループを反映している必要があります。 |
このスタイルをサイト全体のデフォルトにする(Make this Style the default for the entire site) |
スタイルの 1 つをデフォルトとして指定できます。 デフォルトが指定されている場合は、ユーザのホーム組織(OU)にスタイルが割り当てられていないときにそのデフォルトが使用されます。 デフォルトが指定されていない場合は、システム定義のスタイル シートが使用されます。 |
このスタイルをすべてのサブOUに適用する(Apply this Style to all sub OUs) |
組織で階層構造が使用されている場合は、同じ親のすべての子 OU にスタイルを継承するかどうかを指定できます。 |
Service Catalogにスタイルを適用する(Apply the Style to Service Catalog) |
Service Catalog モジュールに CSS を適用することもできます。 |
サイトディレクトリ(Style Directory) |
RequestCenter.war\custom の下にある任意のディレクトリからスタイル ディレクトリを選択できます。 スタイルを作成するには、ディレクトリが存在している必要があります。 デフォルトである 1 という名前のディレクトリは、すでに存在しています。 |
説明 |
(オプション)カスタム スタイルの説明を入力します。 |
カスタム スタイル シートやヘッダーとフッターの使用を開始するには、次の手順を実行します。
アプリケーション内の顧客向けモジュールの外観をカスタマイズするには、カスケーディング スタイル シート(CSS)とカスタム ヘッダーおよびフッターを使用します。
Administration モジュールを選択して [設定(Settings)] タブに移動します。 [カスタマイゼーション(Customizations)] ページが表示されます。 共通設定には、[カスタムヘッダーフッターの有効化(Enable Custom Header Footer)] と [カスタムスタイルシートの有効化(Enable Custom Style Sheets)] に対するパラメータが含まれています。
カスタム スタイルシートはデフォルトで有効にされます。 対応するパラメータ設定を [オン(On)] から [オフ(Off)] に変更できます。ページを更新して変更を保存します。 custom.css ファイル(アプリケーション サーバ上に配置)で指定されたものが有効になります。
同様に、カスタム ヘッダーおよびフッターを有効にするには、[カスタムヘッダーフッターの有効化(Enable Custom Header Footer)] パラメータの設定を [オン(On)] に変更します。
これらのパラメータをオンにした状態でセッションを開始した後は、セッションを終了しなくてもスタイルの変更が反映されます。 スタイルの定義が変更されてファイルがアプリケーション サーバ上の指定のディレクトリに配置されると、それ以降は、ページをリフレッシュしたときに新しいスタイル定義が使用されます。 RequestCenter.war/custom の下に ServiceCatalogExamples という名前のディレクトリがあり、ここに、ブランドや GUI デザインに合わせてカスタマイズ可能なベース アプリケーション CSS ファイルが保存されています。
Administration 設定で [ブラウザキャッシュ(Browser Cache)] 設定が有効になっている場合は、ブラウザ キャッシュが削除されるまで、カスタム スタイル シート、ヘッダー、およびフッターに対する変更が有効になりません。 アプリケーション ユーザに各自のブラウザ キャッシュを削除するように求めるには、ブラウザ キャッシュの設定の手順に従ってブラウザ キャッシュのバージョンを上げてください。
UI のさらに詳細なカスタマイズが必要な場合は、custom\ServiceCatalogExamples ディレクトリ内のファイルを利用できます。 最初に使用する 3 つの主なファイルを次に示します。
<script> serviceCatalogMessage.putString("15162", 'Small Company'); </script>
Firebug やその他 Web 開発者ツールを使用して、Service Catalog モジュールの HTML コードを検証します。 上書き可能なその他の文字列を確認します。
<style> .homeslider .blocks.block1 { background-color: #9E6F9A; /*#2B6F9A;*/ background-image: linear-gradient(to bottom, #985DC2, #B6115E); /*#258DC2, #04415E);*/ background-repeat: repeat-x; } .homeslider .blocks.block2 { background-color: #9E6F9A; /*#2B6F9A;*/ background-image: linear-gradient(to bottom, #D486C0, #B43557); /*#6486C0, #213557);*/ background-repeat: repeat-x; } .homeslider .blocks.block3 { background-color: #9E6F9A; /*#2B6F9A;*/ background-image: linear-gradient(to bottom, #EE86C0, #BE3157); /*#7B86C0, #2B3157);*/ background-repeat: repeat-x; } </style>
head.html ファイルでデフォルトのシスコ ロゴを他の会社のロゴに変更する方法、つまり、スタイルの上書きの簡単な例を以下に示します。
<style> .navbar-inner { background-color: transparent; background-image: none; filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); /*disable gray header bar in IE*/ } .navbar .nav { color: #333; text-shadow: none; } .navbar .nav ) li ) a { color: #333; text-shadow: none; } .psc-goto-cart { color: #333 !important; } .psc-top-icon { border:2px solid #333; background-color: #333; } /* Change company logo */ .psc-header.navbar.brand { background-image: url("/RequestCenter/custom/SmallCo/images/SmallCo_logo92x33.gif"); background-repeat: no-repeat; background-position: 0 .514em; background-size:75px auto; padding-left: 3em!important; padding-top: 0.25em!important; padding-right: 5em!important; font-size: 1.571em; line-height: 2.28em; color: #333; /* Small Company's website H1 color */ text-shadow: none; }/* Change company logo */ </style> <style> /* The following block changes the colors "Home", "Browse Categories" and magnifying glass (search) box to orange(!), including the search box hover state */ .categories > .navbar li.menu.menu > a, .categories > .navbar li.menuHome.menu > a, .categories > .navbar li.search.menu > a { background: none repeat scroll 0 0 orange; } .categories > .navbar li.menu > a, .categories > .navbar li.menuHome > a, .categories > .navbar li.search > a { background: none repeat scroll 0 0 orange; } .categories > .navbar li.menu, .categories > .navbar li.menuHome, .categories > .navbar li.search { background: orange; } .categories > .navbar li.menu:hover, .categories > .navbar li.menuHome:hover, .categories > .navbar li.search:hover { background-color: orange; background-image: linear-gradient(to bottom, orange, orange); background-repeat: repeat-x; } /* This changes the navbar background color to the right of the Home, Browse Categories and magnifying glass box.*/ .categories > .navbar { background-color: rgba(255, 255, 102, 0.75); /* this sets the color and transparency of the navbar*/ } .page-heading { /* This overrides the default : background-image:*/ url("../../ngc/img/page_heading_bg.png"); in the “Categories” view, so the color behind the “Categories” text is light green rather than the blue from the png. background-color: lightgreen; background-image: none; } </style>
Service Catalog や My Services などの組み込みモジュールと同様に、Service Portal モジュールもスタイル シートを使用して組織単位でカスタマイズできます。 カスタム スタイルは、他の組み込みモジュールとは別のスタイル シートに保持されるため、Portal Designer モジュールのプレゼンテーション方法に関して柔軟性が向上します。
また、Service Portal ソリューションには、ポータル ページ上のポートレットの色を変更できるさまざまなテーマが用意されています。 ユーザが独自のテーマを選択できるようにしたり、この機能をポータル設計者だけに許可したりできます。 ポータル ページのテーマに関する詳細については、『Cisco Prime Service Catalog Designer Guide』を参照してください。
Service Portal モジュール用のカスタム スタイルシートは Service Catalog と同じ custom/ServiceCatalogExamples または custom/CustomExamples ディレクトリに配置されており、それと一緒に有効/無効になります。
次の例では、ポータル ヘッダー内のロゴ(92x33 ピクセル)、製品名、および背景色を変更する方法について説明します。
.reboot2 .xwtBackgroundSimplified { background: transparent !important; } /*style to modify logo image*/ .reboot2 .applicationHeader17 .applicationLogoImage { background: url("images/SmallCo_logo92x33.gif") no-repeat transparent !important; /*background-repeat: no-repeat; background-position: 0 .514em; background-size:75px auto; padding-left: 3em!important; padding-right: 5em!important;*/ height: 33px !important; width:92px !important; /* Note: un-comment display property to hide the Product Logo if needed */ /*display:none !important;*/ } /* This style is used to display or hide the Product Title in Portal modules See Also: .applicationHeaderAppSubTitle, .applicationLogoImage, .applicationHeaderLogoText style - which will be the new style used to display branding logo */ .reboot2 .applicationHeader17 .applicationHeaderAppName { visibility: hidden; }
次の例では、ポータル ヘッダー内のロゴ(135x70 ピクセル)、製品名、および背景色を変更する方法について説明します。
.reboot2 .xwtBackgroundSimplified { background: transparent !important; } .reboot2 .applicationHeader17 { padding-left: 5px !important; } /*style to modify logo image*/ .reboot2 .applicationHeader17 .applicationLogoImage { background: url("/RequestCenter/custom/style_dir/images/custom_logo.png") no-repeat scroll -2px -8px transparent !important; background-size: auto auto !important; height: 73px !important; line-height: 70px !important; top: 1px !important; width: 130px !important; } /*This style will reduce the left, right and top padding for logo container*/ .reboot2 .applicationHeader17 .applicationHeaderLogo { margin-left: 2px !important; margin-right: 2px !important; padding-top: 5px !important; } .reboot2 .applicationHeader17 .applicationHeaderAppSubTitle { color: #202020; cursor: default; font-size: 17px !important; font-weight: bold !important; font-family: CiscoSans,Arial,"Helvetica Neue",Helvetica,sans-serif !important; text-shadow: 0 0.071em 0 #585858 !important; }
次の例では、製品名を変更して、PortalFullpagePrimeUi.js ファイルをカスタマイズする方法について説明します。 Linux では、パス /opt/CiscoPrimeServiceCatalog/jboss-as-7.1.1.Final/ServiceCatalogServer/deployments/RequestCenter.war/ns360/js/PortalFullpagePrimeUi.js でこのファイルを見つけることができます。 機能名「getNavItems」を検索して、「Service Catalog」から「Cloud Manager」に名前を変更することができます。
if(defaultSelectedId != ""){ /*existing code*/ navItems.items.defaultSelected = defaultSelectedId; } /*existing code*/ navItems.items.toolbar.push(getToolbar()); /*existing code*/ /*Overwrite the app header text with custom application name “Cloud Manager” If text need to add for AppName div then from custom css file its "visibility“ attribute should be "block !important“*/ var appNameDiv = dojo.query('.applicationHeaderAppName')[0]; appNameDiv.style.display = "block !important"; appNameDiv.innerHTML = "Cloud Manager"; var appSubTitleDiv = dojo.query('.applicationHeaderAppSubTitle')[0]; appSubTitleDiv.style.display = "block !important"; appSubTitleDiv.innerHTML = "Cloud Manager"; return navItems; /*existing code*/
custom\CustomExamples ディレクトリには、My Services モジュールのカスタマイゼーションの開始点として使用可能なファイルが格納されています。 次の表に、ディレクトリの内容の要約を示します。
custom(フォルダ)の内容 |
説明 |
---|---|
CustomExamples |
カスタム スタイル、ヘッダー、およびフッターの開始点となるものが格納されているフォルダ |
画像 |
Service Catalog のスタイル(カスタム スタイル シート経由での置き換えが可能)で現在使用されている画像が格納されているフォルダ |
common_task_bg.gif |
[共通タスク(Common Tasks)] ペインの背景 |
headerGradient.gif |
ヘッダー スタイル(各ポートレットまたはペインの先頭に現れるスタイル)の背景 |
logo_bottom.gif |
(非推奨) |
lvl1_nav_shade.gif |
各 Service Catalog モジュールで使用可能なオプションを通じてトップ レベルのナビゲーションを行うタブの背景 |
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 Catalog のデフォルト設定が反映されており、グラデーションが単色で置き換えられます) |
example_portal-custom-header.css |
サンプル ファイル(Portal Designer デフォルトのヘッダー領域設定が反映されています) |
example_footer.html |
カスタム フッター開発の開始点 |
example_header.html |
カスタム ヘッダー開発の開始点 |
CustomExamples/example.css ファイルと example_portal-custom-header.css ファイル(custom.css と portal-custom-header.css のテンプレート)は、標準のカスケーディング スタイル シートとして書式設定されており、変更するスタイルの選択を支援するコメントが含まれています。 このコメントには、そのスタイルがどこでどのように使用されているかに関する簡単な説明が含まれていますが、カスタマイゼーションを詳細にチューニングするには、ある程度の検証作業が必要です。
カスタマイズしたスタイルのオリジナルの定義を、スタイル シート内にコメントとして記録しておいてください。 このことが推奨されるのは、カスタマイズによる変更の破棄が必要になった場合に備えるためであり、元のページ外観がわかるようにするためでもあります。
エンドユーザ向けモジュールのページ ヘッダーには、次に示すスタイルが適用されます。
デフォルトでは、ほとんどのナビゲーション バーは、背景色を指定しているだけです。 ただし、スタイル シート内で指定される他の背景と同様に、バナーやグラフィックを使用するように変更できます。
My Services のページのその他の部分では、ヘッダーやフッターなどの装飾がページの各部分に使用されます。 たとえば、上の図に示すように、「レベル 3 ナビゲーション」(lvl3_nav)スタイルおよび footer スタイルによって My Services ホームページのページ本体の境界を示します。 これらは同時に変更してください。
「ブレッドクラム ナビゲーション」(bread_nav)は、ブレッドクラム領域の背景となります。
ボタンは、サービス フォーム上と Service Catalog ユーザ インターフェイス経由で表示されます。 ボタンの外観は、button.primary スタイルによって決まります。 プライマリ ボタン用のデフォルトのスタイルは、太字を使用するように設定されており、必要に応じてさらに目立つスタイルに変更することもできます。
1 |
プライマリ ボタン |
サービス フォーム上のフィールドおよびキャプションの外観は、スタイルのセットによって決定されます。これらのスタイルについて、次の表に要約を示し、その後に例を示します。 .form のスタイルはすべて同時に変更してください。
スタイル(Style) |
使用方法 |
---|---|
shortHeader |
ディクショナリのキャプション |
subhead |
キャプション付きで表示される各ディクショナリの開始を表すバー |
.formReq_border |
フィールド ラベルの左のブランク スペース、およびフィールドどうしを区切る線 |
.formLabel |
フィールド ラベル |
.formElement |
フィールドの HTML 表現の入力要素の書式設定 |
.formInfo |
フォーム要素の右のブランク スペース、およびフィールドどうしを区切る線 |
.formIcon |
フォーム右側の灰色のバー |
1 |
shortHeader |
2 |
subhead |
カスタム スタイル シート ファイル、およびカスタム ページ ヘッダーおよびフッターを定義する html ファイルは、アプリケーション サーバ上のアプリケーションの一部となっている必要があります。 したがって、アプリケーション インスタンスのアップグレードや移行が必要になった場合に備えて、これらのカスタマイズを維持するためのメカニズムが必要になります。
アプリケーションのアップグレードまたは移行時にカスタマイズを維持するには、次の手順を実行します。
Service Catalog に付属のオンライン ヘルプ ファイルはカスタマイズできません。
Service Catalog のページで使用されているスタイルの中には、CustomExamples/example.css ファイルに含まれていないものもあります。 このような欠落が見つかった場合は、Cisco Technical Assistance Center(TAC)までお知らせください。
一時的な回避策を利用できる可能性があります。 生成されたページのソースを表示して、そのスタイルの適用先であるセクションのクラスや ID を特定します。 このクラスまたは ID によって一意に特定されるオブジェクトの外観を変更する場合は、該当するスタイルをカスタム スタイル シートに追加するか、該当する属性をスタイル定義に追加してください。 この方法を使用する場合は、十分に注意してください。カスタム スタイル シートに追加したものは、以降のリリースでサポートされないことがあるためです。
このバージョンの Service Catalog で使用されているスタイルは、以前のバージョンのスタイルから変更されている可能性があります。 このような変更は、ページの外観を更新するだけでなく、以前のリリースで発見されたパフォーマンスや一貫性の問題を解決するものでもあります。
ここでは、さまざまなスタイルの要約と推奨される方法について説明します。
次の表は、custom.css で設定できるスタイルの要約です。
スタイル/クラス名 |
コメント |
---|---|
本体およびグローバルのスタイル |
|
本体 |
|
#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.longHeaderdiv.shortHeader |
|
div.longHeader h4div.shortHeader h4div.longHeader spandiv.shortHeader span |
|
div.subHeader |
|
h4.header |
|
h4.header span |
|
ボタンのスタイル |
|
buttoninput.primaryinput.secondaryinput.disabled |
|
button.primaryinput.primary |
|
button.secondarybutton.helpinput.secondary |
|
button.disabledinput.disabled |
|
カタログおよびサービス表示のスタイル |
|
table.browser |
|
table.browser td.categoryImage |
Service Catalog とカテゴリの画像のピクセル サイズ |
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 thbody.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:hovertable.fullGrid tbody.th.kvpKeyHi:hovertable.fullGrid tbody.td.kvpKeyHi:hover + td.kvpValuetable.fullGrid tbody.th.kvpKeyHi:hover + td.kvpValue |
|
table.fullGrid tbody.td.kvpKeyHitable.fullGrid tbody.th.kvpKeyHi |
|
table.fullGrid tbody td.kvpValueHi |
|
他のテーブルおよびテーブル関連コンテンツのスタイル |
|
div.theaddiv tfoot |
|
div.tsubfoot |
|
div.detailHeader |
|
div.detailHeader td.owi |
|
div.tfoot input.textBoxdiv.tsubfoot input.textBox |
|
コメントおよび履歴のスタイル |
|
table.commentstable |
|
table.commentsTable div.commentContainer |
|
共通タスクおよびポートレットのスタイル |
|
div.shell |
|
.commonTaskCellul.tasks.li |
|
ul.tasks |
|
img.commontaskbullet |
|
通常のポートレット、フォーム、およびコンテナのスタイル |
|
div.servicediv.shelldiv.smallshelldiv smallShelltable.halfGridtable.fullGridtable.footGridtable.taskGridtable.noGrid#treecontainerdiv.loginBox |
|
入力要素 |
|
inputselect |
サービス フォーム テキスト要素 |
input.textBoxtextarea |
サービス フォーム テキストエリア要素 |
コンテンツ スイッチングのスタイル |
|
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 Catalog の Web ページとともに表示されるページのヘッダーおよびフッターをカスタマイズするためのテンプレートを用意しています。
これらのスタイルの詳細については、ページ ヘッダーおよびフッターのカスタマイズのセクションで説明します。 Service Catalog アプリケーションにカスタム ヘッダーまたはフッターを追加するには、次の手順を実行します。
カスタム ページ ヘッダーおよびフッターは、標準のページ ヘッダーおよびフッターに追加して表示されます。これらの代わりに表示されるわけではありません。 ヘッダーおよびフッター HTML ファイルには、適切と思われる任意の HTML コマンド(デフォルトの Service Catalog スタイルの使用を含む)が含まれます。
たとえば、footer.html ファイルで次のようなコンテンツを使用するとします。
<img src="/RequestCenter/images/eAdmin.gif" alt="eAdmin logo" align="top" name="eAdminLogo"/>
この結果、フッターは次のように表示されます。この図で、「Technology by Cisco」のロゴが My Services の標準ページ フッターです。
目次
この章は次のトピックで構成されています。
この章では、Service Catalog Web ページの外観をカスタマイズするための機能について説明します。 アプリケーション内の顧客向けモジュールの外観をカスタマイズするには、カスケーディング スタイル シート(CSS)とカスタム ヘッダーおよびフッターを使用します。
カスタマイズできるページは次のとおりです。
サービス設計者や管理者が Service Catalog の設定および管理に使用するモジュールの外観は、カスタマイズできません。 これに該当するモジュールは、Service Item Manager、Service Designer、Organization Designer、Administration、Catalog Deployer、Portal Designer、および Service Link です。
Service Catalog アプリケーションのコンテンツは、HTML5 を使用して書式設定され Web ページとして表示されます。 カスケーディング スタイル シート(CSS)を使用すると、ページの表示に使用されるスタイルの定義を変更することによって Web ページの外観をカスタマイズできるため、Web ページそのものを編集する必要はありません。
カスタム スタイルを使用すると、Service Catalog の Web ページ、ヘッダー、およびフッターをカスタマイズできます。 1 つのアプリケーション インスタンスのすべてのユーザに同じカスタム スタイルを適用することも、ユーザのホーム組織単位に基づいて異なるスタイルを適用することもできます。
次の手順は、組み込みモジュール(My Services、Service Catalog、Service Manager、および Reporting)で使用されるスタイルの外観をカスタマイズするための基本ステップです。 これらのスタイルの詳細については、以降の項を参照してください。
注意 |
カスタム スタイル シートを使用するように Administration 設定を変更した後は、custom.css ファイルが指定のディレクトリに存在している必要があります。 このファイルが存在しない場合は、Service Catalog の標準スタイルが使用されます。 同様に、カスタム ヘッダーまたはフッターを使用するというオプションがオンの場合は、対応するファイルが指定のディレクトリに存在している必要があります。 |
CSS スタイルの設計者は、サーバ上のディレクトリに CSS を配置します。 次の例では、カスタム スタイルに名前を付け、スタイル ディレクトリに関連付けて、説明を入力します。さらに、このスタイルをサイト(関連付けられた組織ユニットの下のサブ OU)のすべてのユーザに適用するかどうか、また Service Catalog モジュールに適用するかどうかを指定します。
次のとおりにプロパティを入力します。
フィールド |
説明 |
---|---|
[名前(Name)] |
スタイルの名前は、スタイルが適用される組織の OU または OU のグループを反映している必要があります。 |
このスタイルをサイト全体のデフォルトにする(Make this Style the default for the entire site) |
スタイルの 1 つをデフォルトとして指定できます。 デフォルトが指定されている場合は、ユーザのホーム組織(OU)にスタイルが割り当てられていないときにそのデフォルトが使用されます。 デフォルトが指定されていない場合は、システム定義のスタイル シートが使用されます。 |
このスタイルをすべてのサブOUに適用する(Apply this Style to all sub OUs) |
組織で階層構造が使用されている場合は、同じ親のすべての子 OU にスタイルを継承するかどうかを指定できます。 |
Service Catalogにスタイルを適用する(Apply the Style to Service Catalog) |
Service Catalog モジュールに CSS を適用することもできます。 |
サイトディレクトリ(Style Directory) |
RequestCenter.war\custom の下にある任意のディレクトリからスタイル ディレクトリを選択できます。 スタイルを作成するには、ディレクトリが存在している必要があります。 デフォルトである 1 という名前のディレクトリは、すでに存在しています。 |
説明 |
(オプション)カスタム スタイルの説明を入力します。 |
カスタム スタイル シートやヘッダーとフッターの使用を開始するには、次の手順を実行します。
アプリケーション内の顧客向けモジュールの外観をカスタマイズするには、カスケーディング スタイル シート(CSS)とカスタム ヘッダーおよびフッターを使用します。
Administration モジュールを選択して [設定(Settings)] タブに移動します。 [カスタマイゼーション(Customizations)] ページが表示されます。 共通設定には、[カスタムヘッダーフッターの有効化(Enable Custom Header Footer)] と [カスタムスタイルシートの有効化(Enable Custom Style Sheets)] に対するパラメータが含まれています。
カスタム スタイルシートはデフォルトで有効にされます。 対応するパラメータ設定を [オン(On)] から [オフ(Off)] に変更できます。ページを更新して変更を保存します。 custom.css ファイル(アプリケーション サーバ上に配置)で指定されたものが有効になります。
同様に、カスタム ヘッダーおよびフッターを有効にするには、[カスタムヘッダーフッターの有効化(Enable Custom Header Footer)] パラメータの設定を [オン(On)] に変更します。
これらのパラメータをオンにした状態でセッションを開始した後は、セッションを終了しなくてもスタイルの変更が反映されます。 スタイルの定義が変更されてファイルがアプリケーション サーバ上の指定のディレクトリに配置されると、それ以降は、ページをリフレッシュしたときに新しいスタイル定義が使用されます。 RequestCenter.war/custom の下に ServiceCatalogExamples という名前のディレクトリがあり、ここに、ブランドや GUI デザインに合わせてカスタマイズ可能なベース アプリケーション CSS ファイルが保存されています。
Administration 設定で [ブラウザキャッシュ(Browser Cache)] 設定が有効になっている場合は、ブラウザ キャッシュが削除されるまで、カスタム スタイル シート、ヘッダー、およびフッターに対する変更が有効になりません。 アプリケーション ユーザに各自のブラウザ キャッシュを削除するように求めるには、ブラウザ キャッシュの設定の手順に従ってブラウザ キャッシュのバージョンを上げてください。
UI のさらに詳細なカスタマイズが必要な場合は、custom\ServiceCatalogExamples ディレクトリ内のファイルを利用できます。 最初に使用する 3 つの主なファイルを次に示します。
<script> serviceCatalogMessage.putString("15162", 'Small Company'); </script>
Firebug やその他 Web 開発者ツールを使用して、Service Catalog モジュールの HTML コードを検証します。 上書き可能なその他の文字列を確認します。
<style> .homeslider .blocks.block1 { background-color: #9E6F9A; /*#2B6F9A;*/ background-image: linear-gradient(to bottom, #985DC2, #B6115E); /*#258DC2, #04415E);*/ background-repeat: repeat-x; } .homeslider .blocks.block2 { background-color: #9E6F9A; /*#2B6F9A;*/ background-image: linear-gradient(to bottom, #D486C0, #B43557); /*#6486C0, #213557);*/ background-repeat: repeat-x; } .homeslider .blocks.block3 { background-color: #9E6F9A; /*#2B6F9A;*/ background-image: linear-gradient(to bottom, #EE86C0, #BE3157); /*#7B86C0, #2B3157);*/ background-repeat: repeat-x; } </style>
head.html ファイルでデフォルトのシスコ ロゴを他の会社のロゴに変更する方法、つまり、スタイルの上書きの簡単な例を以下に示します。
<style> .navbar-inner { background-color: transparent; background-image: none; filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); /*disable gray header bar in IE*/ } .navbar .nav { color: #333; text-shadow: none; } .navbar .nav ) li ) a { color: #333; text-shadow: none; } .psc-goto-cart { color: #333 !important; } .psc-top-icon { border:2px solid #333; background-color: #333; } /* Change company logo */ .psc-header.navbar.brand { background-image: url("/RequestCenter/custom/SmallCo/images/SmallCo_logo92x33.gif"); background-repeat: no-repeat; background-position: 0 .514em; background-size:75px auto; padding-left: 3em!important; padding-top: 0.25em!important; padding-right: 5em!important; font-size: 1.571em; line-height: 2.28em; color: #333; /* Small Company's website H1 color */ text-shadow: none; }/* Change company logo */ </style> <style> /* The following block changes the colors "Home", "Browse Categories" and magnifying glass (search) box to orange(!), including the search box hover state */ .categories > .navbar li.menu.menu > a, .categories > .navbar li.menuHome.menu > a, .categories > .navbar li.search.menu > a { background: none repeat scroll 0 0 orange; } .categories > .navbar li.menu > a, .categories > .navbar li.menuHome > a, .categories > .navbar li.search > a { background: none repeat scroll 0 0 orange; } .categories > .navbar li.menu, .categories > .navbar li.menuHome, .categories > .navbar li.search { background: orange; } .categories > .navbar li.menu:hover, .categories > .navbar li.menuHome:hover, .categories > .navbar li.search:hover { background-color: orange; background-image: linear-gradient(to bottom, orange, orange); background-repeat: repeat-x; } /* This changes the navbar background color to the right of the Home, Browse Categories and magnifying glass box.*/ .categories > .navbar { background-color: rgba(255, 255, 102, 0.75); /* this sets the color and transparency of the navbar*/ } .page-heading { /* This overrides the default : background-image:*/ url("../../ngc/img/page_heading_bg.png"); in the “Categories” view, so the color behind the “Categories” text is light green rather than the blue from the png. background-color: lightgreen; background-image: none; } </style>
Service Catalog や My Services などの組み込みモジュールと同様に、Service Portal モジュールもスタイル シートを使用して組織単位でカスタマイズできます。 カスタム スタイルは、他の組み込みモジュールとは別のスタイル シートに保持されるため、Portal Designer モジュールのプレゼンテーション方法に関して柔軟性が向上します。
また、Service Portal ソリューションには、ポータル ページ上のポートレットの色を変更できるさまざまなテーマが用意されています。 ユーザが独自のテーマを選択できるようにしたり、この機能をポータル設計者だけに許可したりできます。 ポータル ページのテーマに関する詳細については、『Cisco Prime Service Catalog Designer Guide』を参照してください。
Service Portal モジュール用のカスタム スタイルシートは Service Catalog と同じ custom/ServiceCatalogExamples または custom/CustomExamples ディレクトリに配置されており、それと一緒に有効/無効になります。
次の例では、ポータル ヘッダー内のロゴ(92x33 ピクセル)、製品名、および背景色を変更する方法について説明します。
.reboot2 .xwtBackgroundSimplified { background: transparent !important; } /*style to modify logo image*/ .reboot2 .applicationHeader17 .applicationLogoImage { background: url("images/SmallCo_logo92x33.gif") no-repeat transparent !important; /*background-repeat: no-repeat; background-position: 0 .514em; background-size:75px auto; padding-left: 3em!important; padding-right: 5em!important;*/ height: 33px !important; width:92px !important; /* Note: un-comment display property to hide the Product Logo if needed */ /*display:none !important;*/ } /* This style is used to display or hide the Product Title in Portal modules See Also: .applicationHeaderAppSubTitle, .applicationLogoImage, .applicationHeaderLogoText style - which will be the new style used to display branding logo */ .reboot2 .applicationHeader17 .applicationHeaderAppName { visibility: hidden; }
次の例では、ポータル ヘッダー内のロゴ(135x70 ピクセル)、製品名、および背景色を変更する方法について説明します。
.reboot2 .xwtBackgroundSimplified { background: transparent !important; } .reboot2 .applicationHeader17 { padding-left: 5px !important; } /*style to modify logo image*/ .reboot2 .applicationHeader17 .applicationLogoImage { background: url("/RequestCenter/custom/style_dir/images/custom_logo.png") no-repeat scroll -2px -8px transparent !important; background-size: auto auto !important; height: 73px !important; line-height: 70px !important; top: 1px !important; width: 130px !important; } /*This style will reduce the left, right and top padding for logo container*/ .reboot2 .applicationHeader17 .applicationHeaderLogo { margin-left: 2px !important; margin-right: 2px !important; padding-top: 5px !important; } .reboot2 .applicationHeader17 .applicationHeaderAppSubTitle { color: #202020; cursor: default; font-size: 17px !important; font-weight: bold !important; font-family: CiscoSans,Arial,"Helvetica Neue",Helvetica,sans-serif !important; text-shadow: 0 0.071em 0 #585858 !important; }
次の例では、製品名を変更して、PortalFullpagePrimeUi.js ファイルをカスタマイズする方法について説明します。 Linux では、パス /opt/CiscoPrimeServiceCatalog/jboss-as-7.1.1.Final/ServiceCatalogServer/deployments/RequestCenter.war/ns360/js/PortalFullpagePrimeUi.js でこのファイルを見つけることができます。 機能名「getNavItems」を検索して、「Service Catalog」から「Cloud Manager」に名前を変更することができます。
if(defaultSelectedId != ""){ /*existing code*/ navItems.items.defaultSelected = defaultSelectedId; } /*existing code*/ navItems.items.toolbar.push(getToolbar()); /*existing code*/ /*Overwrite the app header text with custom application name “Cloud Manager” If text need to add for AppName div then from custom css file its "visibility“ attribute should be "block !important“*/ var appNameDiv = dojo.query('.applicationHeaderAppName')[0]; appNameDiv.style.display = "block !important"; appNameDiv.innerHTML = "Cloud Manager"; var appSubTitleDiv = dojo.query('.applicationHeaderAppSubTitle')[0]; appSubTitleDiv.style.display = "block !important"; appSubTitleDiv.innerHTML = "Cloud Manager"; return navItems; /*existing code*/
custom\CustomExamples ディレクトリには、My Services モジュールのカスタマイゼーションの開始点として使用可能なファイルが格納されています。 次の表に、ディレクトリの内容の要約を示します。
custom(フォルダ)の内容 |
説明 |
---|---|
CustomExamples |
カスタム スタイル、ヘッダー、およびフッターの開始点となるものが格納されているフォルダ |
画像 |
Service Catalog のスタイル(カスタム スタイル シート経由での置き換えが可能)で現在使用されている画像が格納されているフォルダ |
common_task_bg.gif |
[共通タスク(Common Tasks)] ペインの背景 |
headerGradient.gif |
ヘッダー スタイル(各ポートレットまたはペインの先頭に現れるスタイル)の背景 |
logo_bottom.gif |
(非推奨) |
lvl1_nav_shade.gif |
各 Service Catalog モジュールで使用可能なオプションを通じてトップ レベルのナビゲーションを行うタブの背景 |
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 Catalog のデフォルト設定が反映されており、グラデーションが単色で置き換えられます) |
example_portal-custom-header.css |
サンプル ファイル(Portal Designer デフォルトのヘッダー領域設定が反映されています) |
example_footer.html |
カスタム フッター開発の開始点 |
example_header.html |
カスタム ヘッダー開発の開始点 |
CustomExamples/example.css ファイルと example_portal-custom-header.css ファイル(custom.css と portal-custom-header.css のテンプレート)は、標準のカスケーディング スタイル シートとして書式設定されており、変更するスタイルの選択を支援するコメントが含まれています。 このコメントには、そのスタイルがどこでどのように使用されているかに関する簡単な説明が含まれていますが、カスタマイゼーションを詳細にチューニングするには、ある程度の検証作業が必要です。
カスタマイズしたスタイルのオリジナルの定義を、スタイル シート内にコメントとして記録しておいてください。 このことが推奨されるのは、カスタマイズによる変更の破棄が必要になった場合に備えるためであり、元のページ外観がわかるようにするためでもあります。
エンドユーザ向けモジュールのページ ヘッダーには、次に示すスタイルが適用されます。
デフォルトでは、ほとんどのナビゲーション バーは、背景色を指定しているだけです。 ただし、スタイル シート内で指定される他の背景と同様に、バナーやグラフィックを使用するように変更できます。
My Services のページのその他の部分では、ヘッダーやフッターなどの装飾がページの各部分に使用されます。 たとえば、上の図に示すように、「レベル 3 ナビゲーション」(lvl3_nav)スタイルおよび footer スタイルによって My Services ホームページのページ本体の境界を示します。 これらは同時に変更してください。
「ブレッドクラム ナビゲーション」(bread_nav)は、ブレッドクラム領域の背景となります。
サービス フォーム上のフィールドおよびキャプションの外観は、スタイルのセットによって決定されます。これらのスタイルについて、次の表に要約を示し、その後に例を示します。 .form のスタイルはすべて同時に変更してください。
カスタム スタイル シート ファイル、およびカスタム ページ ヘッダーおよびフッターを定義する html ファイルは、アプリケーション サーバ上のアプリケーションの一部となっている必要があります。 したがって、アプリケーション インスタンスのアップグレードや移行が必要になった場合に備えて、これらのカスタマイズを維持するためのメカニズムが必要になります。
アプリケーションのアップグレードまたは移行時にカスタマイズを維持するには、次の手順を実行します。
Service Catalog のページで使用されているスタイルの中には、CustomExamples/example.css ファイルに含まれていないものもあります。 このような欠落が見つかった場合は、Cisco Technical Assistance Center(TAC)までお知らせください。
一時的な回避策を利用できる可能性があります。 生成されたページのソースを表示して、そのスタイルの適用先であるセクションのクラスや ID を特定します。 このクラスまたは ID によって一意に特定されるオブジェクトの外観を変更する場合は、該当するスタイルをカスタム スタイル シートに追加するか、該当する属性をスタイル定義に追加してください。 この方法を使用する場合は、十分に注意してください。カスタム スタイル シートに追加したものは、以降のリリースでサポートされないことがあるためです。
ここでは、さまざまなスタイルの要約と推奨される方法について説明します。
次の表は、custom.css で設定できるスタイルの要約です。
スタイル/クラス名 |
コメント |
---|---|
本体およびグローバルのスタイル |
|
本体 |
|
#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.longHeaderdiv.shortHeader |
|
div.longHeader h4div.shortHeader h4div.longHeader spandiv.shortHeader span |
|
div.subHeader |
|
h4.header |
|
h4.header span |
|
ボタンのスタイル |
|
buttoninput.primaryinput.secondaryinput.disabled |
|
button.primaryinput.primary |
|
button.secondarybutton.helpinput.secondary |
|
button.disabledinput.disabled |
|
カタログおよびサービス表示のスタイル |
|
table.browser |
|
table.browser td.categoryImage |
Service Catalog とカテゴリの画像のピクセル サイズ |
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 thbody.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:hovertable.fullGrid tbody.th.kvpKeyHi:hovertable.fullGrid tbody.td.kvpKeyHi:hover + td.kvpValuetable.fullGrid tbody.th.kvpKeyHi:hover + td.kvpValue |
|
table.fullGrid tbody.td.kvpKeyHitable.fullGrid tbody.th.kvpKeyHi |
|
table.fullGrid tbody td.kvpValueHi |
|
他のテーブルおよびテーブル関連コンテンツのスタイル |
|
div.theaddiv tfoot |
|
div.tsubfoot |
|
div.detailHeader |
|
div.detailHeader td.owi |
|
div.tfoot input.textBoxdiv.tsubfoot input.textBox |
|
コメントおよび履歴のスタイル |
|
table.commentstable |
|
table.commentsTable div.commentContainer |
|
共通タスクおよびポートレットのスタイル |
|
div.shell |
|
.commonTaskCellul.tasks.li |
|
ul.tasks |
|
img.commontaskbullet |
|
通常のポートレット、フォーム、およびコンテナのスタイル |
|
div.servicediv.shelldiv.smallshelldiv smallShelltable.halfGridtable.fullGridtable.footGridtable.taskGridtable.noGrid#treecontainerdiv.loginBox |
|
入力要素 |
|
inputselect |
サービス フォーム テキスト要素 |
input.textBoxtextarea |
サービス フォーム テキストエリア要素 |
コンテンツ スイッチングのスタイル |
|
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 |
|
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 Catalog アプリケーションにカスタム ヘッダーまたはフッターを追加するには、次の手順を実行します。
カスタム ページ ヘッダーおよびフッターは、標準のページ ヘッダーおよびフッターに追加して表示されます。これらの代わりに表示されるわけではありません。 ヘッダーおよびフッター HTML ファイルには、適切と思われる任意の HTML コマンド(デフォルトの Service Catalog スタイルの使用を含む)が含まれます。
たとえば、footer.html ファイルで次のようなコンテンツを使用するとします。
<img src="/RequestCenter/images/eAdmin.gif" alt="eAdmin logo" align="top" name="eAdminLogo"/>
この結果、フッターは次のように表示されます。この図で、「Technology by Cisco」のロゴが My Services の標準ページ フッターです。