カスタマイズ可能なコンポーネントのルック・アンド・フィールの変更

ADF Facesスキンを使用して、要求に合うようにルック・アンド・フィールを変更できます。ADF FacesではOracle、MinimalおよびSimpleというそのまま使用できる3つのスキンが用意されています。これらのスキンによりいくつかの基本的な書式設定をADF Facesコンポーネントに追加できます。どのコンポーネントでもスキンで説明されているスタイルが自動的に使用され、スキンへの変更はすべて実行時に反映されます。

さらに、カスタム・スキンを作成することでアプリケーションの外観をカスタマイズできます。カスタム・スキンとはSimpleスキンの拡張です。ADF Facesスキン内で使用できるセレクタにより、スキンを特定のコンポーネントに適用できます。必要に応じてこれらのセレクタのプロパティを編集して、ADF Facesコンポーネントをスキニングできます。スタイル・セレクタによりスタイル・プロパティを特定のコンポーネントに適用できます。アイコン・セレクタにより特定のコンポーネントのためにアイコンをレンダリングできます。

他のADF Facesコンポーネントと同様に、カスタマイズ可能なコンポーネントのセレクタが提供され、これによりpanelCustomizableshowDetailFrameコンポーネントの外観を変更できるようになります。

カスタマイズ可能なコンポーネントのルック・アンド・フィールを変更するために、カスタム・スキンを作成し、セレクタをカスタム・スキンの.cssファイルに追加できます。ADF Facesスキン、カスタム・スキンの作成、スキンを使用するためのアプリケーションの構成などの詳細は、ADF Facesでのスキンの使用を参照してください。カスタマイズ可能なコア・コンポーネントのスタイル化の詳細は、Oracle WebCenter Framwework開発者ガイドを参照してください。

次の表は、カスタマイズ可能なコンポーネントのルック・アンド・フィールを変更するために、.cssファイルで指定できるセレクタを説明しています。

プロパティ・キー 説明
showDetailFrame {-ora-additional-actions-position-last: true}

このプロパティ・キーにより、シードされたアクションに関連する追加アクションの場所が変更されます。

falseに設定して、シードされたアクションの前に追加アクションを表示します。

このプロパティのデフォルト値は、シードされたアクションの後に追加アクションが常に表示されることを意味するtrueです。

showDetailFrame {-ora-menu-icon-display:false}

「アクション」メニューのshowDetailFrameで関連するコマンドのとなりのアイコンの表示を制御します。

これをtrueに設定して、アイコンが「アクション」メニューの各アクションの左に表示されるようにします。カスタム・アイコンを指定するには、このページのアイコン・セレクタ表を参照してください。

このプロパティのデフォルト値は、各アイコンの左にアイコンが表示されないことを意味するfalseです。

panelCustomizable {-ora-menu-icon-display:false }

「アクション」メニューのpanelCustomizableで関連するコマンドのとなりのアイコンの表示を制御します。

これをtrueに設定して、アイコンが「アクション」メニューの各アクションの左に表示されるようにします。カスタム・アイコンを指定するには、このページのアイコン・セレクタ表を参照してください。

このプロパティのデフォルト値は、各アイコンの左にアイコンが表示されないことを意味するfalseです。

カスタマイズ可能なコンポーネントをスキニングするセレクタ

次の表は、JSFのshowDetailFrameおよびpanelCustomizableコンポーネントの外観を変更するために使用できるセレクタを説明しています。showDetailFrameまたはpanelCustomizableコンポーネントで使用するスキニング・セレクタを指定するには、そのコンポーネント・インスタンスのBACKGROUND属性を使用する必要があります。カスタマイズ可能なコンポーネント固有のセレクタで使用できるカラー・スキーマは、デフォルトおよびカスタム・スキンの両方ともLightMediumDarkの3つです。

グローバル・スタイル・セレクタ

グローバル・セレクタとは、複数のコンポーネントに影響を与えるセレクタです。次の表は、showDetailFrameおよびpanelCustomizableコンポーネント両方のスキンに影響を与えるグローバル・スタイル・セレクタを説明しています。これらのスタイル・セレクタは両方のカスタマイズ可能なコンポーネントの他のスタイル・セレクタに含まれます。

セレクタ名 説明

.AFCUSTFrameComponentBorderBaseLight:alias

.AFCUSTFrameComponentBorderBaseMedium:alias

.AFCUSTFrameComponentBorderBaseDark:alias

この別名スタイルにより、コンポーネントで上枠以外の3つの枠が定義されます。


.AFCUSTFrameComponentBorderBaseLight:alias
{
border-style:solid;
border-width:1px;
border-color:#979991;
}

.AFCUSTFrameComponentTopBorderBaseLight:alias

.AFCUSTFrameComponentTopBorderBaseMedium:alias

.AFCUSTFrameComponentTopBorderBaseDark:alias

この別名スタイルによりコンポーネントの上枠が定義されます。


.AFCUSTFrameComponentTopBorderBaseLight:alias
{
border-style:solid;
border-width:1px;
border-color:#979991;
}

.AFCUSTFrameComponentHeaderBase:alias この別名スタイルによりコンポーネントのヘッダーが定義されます。


.AFCUSTFrameComponentHeaderBase:alias
{
color:#333333;
vertical-align:top;
font-size:11px;

font-weight:bold;
height:20px;
border-style:none;
}

.AFCUSTFrameComponentContentBase:alias この別名スタイルによりコンポーネントのコンテンツが定義されます。


.AFCUSTFrameComponentContentBase:alias
{
color:#333333;
vertical-align:top;
font-size:11px;

font-weight:bold;
height:20px;
border-style:none;
}

.AFCUSTFrameComponentMenuGroupBase カスタマイズ可能なコンポーネントのメイン・メニュー・コンテナをスタイル化します。


.AFCUSTFrameComponentMenuGroupBase
{

color:#003366;
font-size:11px;
}

.AFCUSTFrameComponentMenuItemBase 各メニュー項目をスタイル化します。


.AFCUSTFrameComponentMenuItemBase
{

color:#003366;
font-size:11px;
}

.AFCUSTFrameComponentMenuSeparatorBase メニュー・セパレータをスタイル化します。


.AFCUSTFrameComponentMenuSeparatorBase
{
padding:0px 2px 0px 2px;
}

コンポーネント固有のセレクタ

コンポーネント・レベルのセレクタとは、特定のコンポーネントをスキニングするために使用できるセレクタのことです。次の表は、showDetailFrameまたはpanelCustomizableコンポーネントを特にスキニングするために使用できるセレクタを説明しています。

アイコン・セレクタ
名前 説明
panelCustomizable::ShowContentIcon:alias

このアイコンは、コンポーネントのメイン・メニューの「コンテンツの表示」オプションの左にレンダリングされます。


panelCustomizable::ShowContentIcon:alias
{
content:url(/css/images/show.gif)
}

showDetailFrame::light-ActionsIcon:alias

showDetailFrame::medium-ActionsIcon:alias

showDetailFrame::dark-ActionsIcon:alias 

このアイコンは、ヘッダーの右隅にレンダリングされ、ユーザーが実行できるアクションのドロップダウン・メニューが表示されます。


showDetailFrame::light-ActionsIcon:alias
{
content:url(/css/images/action.gif)
}

panelCustomizable::light-ActionsIcon:alias

panelCustomizable::medium-ActionsIcon:alias

panelCustomizable::dark-ActionsIcon:alias

このアイコンは、ヘッダーの右隅にレンダリングされ、ユーザーが実行できるアクションのドロップダウン・メニューが表示されます。


panelCustomizable::dark-ActionsIcon:alias
{
content:url(/css/images/action.gif)
}

showDetailFrame::light-MinimizeIcon:alias

showDetailFrame::medium-MinimizeIcon:alias

showDetailFrame::dark-MinimizeIcon:alias

このアイコンはヘッダーの左隅にレンダリングされます。


showDetailFrame::light-MinimizeIcon:alias
{
content:url(/css/images/minimize.gif)
}

panelCustomizable::light-MinimizeIcon:alias

panelCustomizable::medium-MinimizeIcon:alias

panelCustomizable::dark-MinimizeIcon:alias

このアイコンはヘッダーの左隅にレンダリングされます。


panelCustomizable::medium-MinimizeIcon:alias
{
content:url(/css/images/minimize.gif)
}

showDetailFrame::light-MaximizeIcon:alias

showDetailFrame::medium-MaximizeIcon:alias

showDetailFrame::dark-MaximizeIcon:alias

このアイコンは、コンポーネントのメイン・メニューの「最大化」アクションの左にレンダリングされます。


showDetailFrame::light-MaximizeIcon:alias
{
content:url(/css/images/maximize.gif)
}

panelCustomizable::light-MaximizeIcon:alias

panelCustomizable::medium-MaximizeIcon:alias

panelCustomizable::dark-MaximizeIcon:alias

このアイコンは、コンポーネントのメイン・メニューの「最大化」アクションの左にレンダリングされます。


panelCustomizable::dark-MaximizeIcon:alias
{
content:url(/css/images/maximize.gif)
}

showDetailFrame::light-ExpandIcon:alias

showDetailFrame::medium-ExpandIcon:alias

showDetailFrame::dark-ExpandIcon:alias

このアイコンは、コンポーネントにより公開される「最小化」アクションに対応する「リストア」アクションを表します。これはヘッダーの左隅にレンダリングされます。


showDetailFrame::medium-ExpandIcon:alias
{
content:url(/css/images/expand.gif)
}

panelCustomizable::light-ExpandIcon:alias

panelCustomizable::medium-ExpandIcon:alias

panelCustomizable::dark-ExpandIcon:alias

このアイコンは、コンポーネントにより公開される「最小化」アクションに対応する「リストア」アクションを表します。これはヘッダーの左隅にレンダリングされます。


panelCustomizable::dark-ExpandIcon:alias
{
content:url(/css/images/expand.gif)
}

showDetailFrame::light-RestoreIcon:alias

showDetailFrame::medium-RestoreIcon:alias

showDetailFrame::dark-light-RestoreIcon:alias

このアイコンは、コンポーネントにより公開される「最大化」アクションに対応する「リストア」アクションを表します。これはコンポーネントのメイン・メニューの「リストア」アクションの左にレンダリングされます。


showDetailFrame::light-RestoreIcon:alias
{
content:url(/css/images/restore.gif)
}

panelCustomizable::light-RestoreIcon:alias

panelCustomizable::medium-RestoreIcon:alias

panelCustomizable::dark-RestoreIcon:alias

このアイコンは、コンポーネントにより公開される「最大化」アクションに対応する「リストア」アクションを表します。これはコンポーネントのメイン・メニューの「リストア」アクションの左にレンダリングされます。


panelCustomizable::light-RestoreIcon:alias
{
content:url(/css/images/restore.gif)
}

showDetailFrame::light-MoveIcon:alias

showDetailFrame::medium-MoveIcon:alias

showDetailFrame::dark-MoveIcon:alias

このアイコンは、コンポーネントのメイン・メニューの「移動」オプションの左にレンダリングされます。


showDetailFrame::dark-MoveIcon:alias
{
content:url(/css/images/move.gif)
}

panelCustomizable::light-MoveIcon:alias

panelCustomizable::medium-MoveIcon:alias

panelCustomizable::dark-MoveIcon:alias

このアイコンは、コンポーネントのメイン・メニューの「移動」オプションの左にレンダリングされます。


panelCustomizable::dark-MoveIcon:alias
{
content:url(/css/images/move.gif)
}

showDetailFrame::light-MoveLeftIcon:alias

showDetailFrame::medium-MoveLeftIcon:alias

showDetailFrame::dark-MoveLeftIcon:alias

このアイコンは、コンポーネントのサブ・メニューの「左へ移動」オプションの左にレンダリングされます。


showDetailFrame::light-MoveLeftIcon:alias
{
content:url(/css/images/left.gif)
}

panelCustomizable::light-MoveLeftIcon:alias

panelCustomizable::medium-MoveLeftIcon:alias

panelCustomizable::dark-MoveLeftIcon:alias

このアイコンは、コンポーネントのサブ・メニューの「左へ移動」オプションの左にレンダリングされます。


panelCustomizable::dark-MoveLeftIcon:alias
{
content:url(/css/images/left.gif)
}

showDetailFrame::light-MoveRightIcon:alias

showDetailFrame::medium-MoveRightIcon:alias

showDetailFrame::dark-MoveRightIcon:alias

このアイコンは、コンポーネントのサブ・メニューの「右へ移動」オプションの左にレンダリングされます。


showDetailFrame::medium-MoveRightIcon:alias
{
content:url(/css/images/right.gif)
}

panelCustomizable::light-MoveRightIcon:alias

panelCustomizable::medium-MoveRightIcon:alias

panelCustomizable::dark-MoveRightIcon:alias

このアイコンは、コンポーネントのサブ・メニューの「右へ移動」オプションの左にレンダリングされます。


panelCustomizable::medium-MoveRightIcon:alias
{
content:url(/css/images/right.gif)
}

showDetailFrame::light-MoveUpIcon:alias

showDetailFrame::medium-MoveUpIcon:alias

showDetailFrame::dark-MoveUpIcon:alias

このアイコンは、コンポーネントのサブ・メニューの「上へ移動」オプションの左にレンダリングされます。


showDetailFrame::medium-Move UpIcon:alias
{
content:url(/css/images/up.gif)
}

panelCustomizable::light-MoveUpIcon:alias

panelCustomizable::medium-MoveUpIcon:alias

panelCustomizable::dark-MoveUpIcon:alias

このアイコンは、コンポーネントのサブ・メニューの「上へ移動」オプションの左にレンダリングされます。


panelCustomizable::light-Move UpIcon:alias
{
content:url(/css/images/up.gif)
}

showDetailFrame::light-MoveDownIcon:alias

showDetailFrame::medium-MoveDownIcon:alias

showDetailFrame::dark-MoveDownIcon:alias

このアイコンは、コンポーネントのサブ・メニューの「下へ移動」オプションの左にレンダリングされます。


showDetailFrame::light-MoveDownIcon:alias
{
content:url(/css/images/down.gif)
}

panelCustomizable::light-MoveDownIcon:alias

panelCustomizable::medium-MoveDownIcon:alias

panelCustomizable::dark-MoveDownIcon:alias

このアイコンは、コンポーネントのサブ・メニューの「下へ移動」オプションの左にレンダリングされます。


panelCustomizable::medium-MoveDownIcon:alias
{
content:url(/css/images/down.gif)
}

showDetailFrame::light-EditIcon:alias

showDetailFrame::medium-EditIcon:alias

showDetailFrame::dark-EditIcon:alias

このアイコンは、編集アクション・ファセットを使用してレンダリングされる「編集」アクション・アイテムにレンダリングされます。


showDetailFrame::light-EditIcon:alias
{
content:url(/css/images/edit.gif)
}

panelCustomizable::light-EditIcon:alias

panelCustomizable::medium-EditIcon:alias

panelCustomizable::dark-EditIcon:alias

このアイコンは、編集アクション・ファセットを使用してレンダリングされる「編集」アクション・アイテムにレンダリングされます。


panelCustomizable::dark-EditIcon:alias
{
content:url(/css/images/edit.gif)
}

showDetailFrame::light-HelpIcon:alias

showDetailFrame::medium-HelpIcon:alias

showDetailFrame::dark-HelpIcon:alias

このアイコンは、ヘルプ・アクション・ファセットを使用してレンダリングされる「ヘルプ」アクション・アイテムにレンダリングされます。


showDetailFrame::dark-HelpIcon:alias
{
content:url(/css/images/help.gif)
}

panelCustomizable::light-HelpIcon:alias

panelCustomizable::medium-HelpIcon:alias

panelCustomizable::dark-HelpIcon:alias

このアイコンは、ヘルプ・アクション・ファセットを使用してレンダリングされる「ヘルプ」アクション・アイテムにレンダリングされます。


panelCustomizable ::dark-HelpIcon:alias
{
content:url(/css/images/help.gif)
}

showDetailFrame::light-HeaderLeftIcon:alias

showDetailFrame::medium-HeaderLeftIcon:alias

showDetailFrame::dark-HeaderLeftIcon:alias

このアイコンは、コンポーネントの左上隅のカーブしたイメージにレンダリングされます。


showDetailFrame::HeaderLeftIcon:alias
{
content:url(/css/images/headerleft.gif)
}

panelCustomizable::light-HeaderLeftIcon:alias

panelCustomizable::medium-HeaderLeftIcon:alias

panelCustomizable::dark-HeaderLeftIcon:alias

このアイコンは、コンポーネントの左上隅のカーブしたイメージにレンダリングされます。


panelCustomizable::light-HeaderLeftIcon:alias
{
content:url(/css/images/headerleft.gif)
}

showDetailFrame::light-HeaderRightIcon:alias

showDetailFrame::medium-HeaderRightIcon:alias

showDetailFrame::dark-HeaderRightIcon:alias

このアイコンは、コンポーネントの右上隅のカーブしたイメージにレンダリングされます。


showDetailFrame::dark-HeaderRightIcon:alias
{
content:url(/css/images/headerright.gif)
}

panelCustomizable::light-HeaderRightIcon:alias

panelCustomizable::medium-HeaderRightIcon:alias

panelCustomizable::dark-HeaderRightIcon:alias

このアイコンは、コンポーネントの右上隅のカーブしたイメージにレンダリングされます。


panelCustomizable::medium-HeaderRightIcon:alias
{
content:url(/css/images/headerright.gif)
}

showDetailFrame::light-ToolbarLeftIcon:alias

showDetailFrame::medium-ToolbarLeftIcon:alias

showDetailFrame::dark-ToolbarLeftIcon:alias

このアイコンは、フェードイン-フェードアウト・ツールバーの左部分にレンダリングされます。


showDetailFrame::medium-ToolbarLeftIcon:alias
{
content:url(/css/images/toolbarleft.gif)
}

panelCustomizable::light-ToolbarLeftIcon:alias

panelCustomizable::medium-ToolbarLeftIcon:alias

panelCustomizable::dark-ToolbarLeftIcon:alias

このアイコンは、フェードイン-フェードアウト・ツールバーの左部分にレンダリングされます。


panelCustomizable::light-ToolbarLeftIcon:alias
{
content:url(/css/images/toolbarleft.gif)
}

showDetailFrame::light-ToolbarRightIcon:alias

showDetailFrame::medium-ToolbarRightIcon:alias

showDetailFrame::dark-ToolbarRightIcon:alias

このアイコンは、フェードイン-フェードアウト・ツールバーの右部分にレンダリングされます。


showDetailFrame::medium-ToolbarRightIcon:alias
{
content:url(/css/images/toolbarright.gif)
}

panelCustomizable::light-ToolbarRightIcon:alias

panelCustomizable::medium-ToolbarRightIcon:alias

panelCustomizable::dark-ToolbarRightIcon:alias

このアイコンは、フェードイン-フェードアウト・ツールバーの右部分にレンダリングされます。


panelCustomizable::dark-ToolbarRightIcon:alias
{
content:url(/css/images/toolbarright.gif)
}

showDetailFrame::light-ToolbarCenterIcon:alias

showDetailFrame::medium-ToolbarCenterIcon:alias

showDetailFrame::dark-ToolbarCenterIcon:alias

このアイコンは、フェードイン-フェードアウト・ツールバーの中央部分にレンダリングされます。


showDetailFrame::light-ToolbarCenterIcon:alias
{
content:url(/css/images/toobarcenter.gif)
}

panelCustomizable::light-ToolbarCenterIcon:alias

panelCustomizable::medium-ToolbarCenterIcon:alias

panelCustomizable::dark-ToolbarCenterIcon:alias

このアイコンは、フェードイン-フェードアウト・ツールバーの中央部分にレンダリングされます。


panelCustomizable::light-ToolbarCenterIcon:alias
{
content:url(/css/images/toobarcenter.gif)
}

showDetailFrameコンポーネント

スタイル・セレクタ
名前 説明

showDetailFrame::header-top-border-light

showDetailFrame::header-top-border-medium

showDetailFrame::header-top-border-dark

showDetailFrameコンポーネントの上枠のスタイルを指定します。


af|showDetailFrame::header-top-border-medium
{
border-top:1px #6699CC solid;
border-bottom:1px #6699CC solid;
background-color:#F7F7E7;
background-image:url(/<path>/setJoin.gif);
}

showDetailFrame::header-light

showDetailFrame::header-medium

showDetailFrame::header-dark

showDetailFrameコンポーネントのヘッダーのスタイルを指定します。


af|showDetailFrame::header-medium
{
color:#336699;

font-size:small;
font-weight:bold;
white-space:nowrap;
vertical-align:middle;
width:100%;
position:relative
}

showDetailFrame::content-light

showDetailFrame::content-medium

showDetailFrame::content-dark

showDetailFrameコンポーネントのコンテンツ・リージョンのスタイルを指定します。


af|showDetailFrame::content-dark
{
border-left:1px #6699CC solid;
border-right:1px #515151 solid;
border-bottom:1px #515151 solid;
position:relative;
width:100%
}

showDetailFrame::main-menu-container

showDetailFrameコンポーネントのメイン・メニュー・ブロック・コンテナのスタイルを指定します。


af|showDetailFrame::main-menu-container
{
background:#FFFFFF;
border-left:1px #969664 solid;
border-right:1px #515151 solid;
border-top:1px #969664 solid;
border-bottom:1px #515151 solid;
width:110px
}

showDetailFrame::sub-menu-container

showDetailFrameコンポーネントのサブメニュー・コンテナのスタイルを指定します。


af|showDetailFrame::sub-menu-container
{
background:#FFFFFF;
border-left:1px #969664 solid;
border-right:1px #515151 solid;
border-top:1px #969664 solid;
border-bottom:1px #515151 solid;
}

A.af|showDetailFrame::menu-item

showDetailFrameコンポーネントの各メイン・メニュー項目のスタイルを指定します。


A.af|showDetailFrame::menu-item
{
font-weight:normal;
font-size:small;
color:#000000;
display:block;
cursor:pointer;
text-decoration:none;
white-space:nowrap;
background:#FFFFFF;
padding-top:4px;
padding-bottom:3px;
padding-left:5px;
padding-right:5px;
width:100%
}

A:hover.af|showDetailFrame::menu-item

showDetailFrameコンポーネントのメニュー項目にマウスを移動したときに使用するスタイルを指定します。


A:hover.af|showDetailFrame::menu-item
{
background-color:#CCCC99
}

A.af|showDetailFrame::sub-menu-item

showDetailFrameコンポーネントの各サブメニュー項目のスタイルを指定します。


A.af|showDetailFrame::sub-menu-item
{
font-weight:normal;
font-size:small;
color:#000000;
display:block;
cursor:pointer;
text-decoration:none;
white-space:nowrap;
background:#FFFFFF;
padding-top:4px;
padding-bottom:3px;
padding-left:5px;
padding-right:5px;
width:100%
}

showDetailFrame::menu-item-separator

showDetailFrameコンポーネントのメニュー項目セパレータのスタイルを指定します。


af|showDetailFrame::menu-item-separator
{
border-top:1px solid #969664;
border-bottom:1px solid #515151;
margin:4px 2px
}

showDetailFrame::actions-image-separator

showDetailFrameコンポーネントの「アクション」ボタン、「最小化」アイコンおよび「リストア」アイコンのスタイルを指定します。


af|showDetailFrame::actions-image-separator
{
padding-right:5px;
padding-top:1px;
padding-bottom:1px
}

A.af|showDetailFrame::title-clickable

showDetailFrameコンポーネントでタイトルをクリックできる場合に使用するスタイルを指定します。


A.af|showDetailFrame::title-clickable
{

font-size:small;
font-weight:bold;
text-decoration:none;
display:block;color:#336699;
margin-left:5px
}

showDetailFrame::no-header-content-light

showDetailFrame::no-header-content-medium

showDetailFrame::no-header-content-dark

showDetailFrameコンポーネントのヘッダーをオフにする場合に使用するライト・カラーのスタイルを指定します。


af|showDetailFrame::no-header-content-medium
{
border-left:1px #6699CC solid;
border-right:1px #515151 solid;
border-bottom:1px #515151 solid;
border-top:1px #6699CC solid;
position:relative;
width:100%
}

panelCustomizableコンポーネント

スタイル・セレクタ
名前 説明

panelCustomizable::header-top-border-light

panelCustomizable::header-top-border-medium

panelCustomizable::header-top-border-dark

panelCustomizableコンポーネントの上枠のスタイルを指定します。


af|panelCustomizable::header-top-border-medium
{
border-top:1px #6699CC solid;
border-bottom:1px #6699CC solid;
background-color:#F7F7E7;
background-image:url(/<path>/setJoin.gif);
}

panelCustomizable::header-light

panelCustomizable::header-medium

panelCustomizable::header-dark

panelCustomizableコンポーネントのヘッダーのスタイルを指定します。


af|panelCustomizable::header-light
{
color:#336699;

font-size:small;
font-weight:bold;
white-space:nowrap;
vertical-align:middle;
width:100%;
position:relative
}

panelCustomizable::content-light

panelCustomizable::content-medium

panelCustomizable::content-dark

panelCustomizableコンポーネントのコンテンツ・リージョンのスタイルを指定します。


af|panelCustomizable::content-dark
{
border-left:1px #6699CC solid;
border-right:1px #515151 solid;
border-bottom:1px #515151 solid;
position:relative;
width:100%
}

panelCustomizable::main-menu-container

panelCustomizableコンポーネントのメイン・メニュー・ブロック・コンテナのスタイルを指定します。


af|panelCustomizable::main-menu-container
{
background:#FFFFFF;
border-left:1px #969664 solid;
border-right:1px #515151 solid;
border-top:1px #969664 solid;
border-bottom:1px #515151 solid;
width:110px
}

panelCustomizable::sub-menu-container

panelCustomizableコンポーネントのサブメニュー・コンテナのスタイルを指定します。


af|panelCustomizable::sub-menu-container
{
background:#FFFFFF;
border-left:1px #969664 solid;
border-right:1px #515151 solid;
border-top:1px #969664 solid;
border-bottom:1px #515151 solid;
}

A.af|panelCustomizable::menu-item

panelCustomizableコンポーネントの各メイン・メニュー項目のスタイルを指定します。


A.af|panelCustomizable::menu-item
{
font-weight:normal;
font-size:small;
color:#000000;
display:block;
cursor:pointer;
text-decoration:none;
white-space:nowrap;
background:#FFFFFF;
padding-top:4px;
padding-bottom:3px;
padding-left:5px;
padding-right:5px;
width:100%
}

A:hover.af|panelCustomizable::menu-item

panelCustomizableコンポーネントのメニュー項目にマウスを移動したときに使用するスタイルを指定します。


A:hover.af|panelCustomizable::menu-item
{
background-color:#CCCC99
}

A.af|panelCustomizable::sub-menu-item

panelCustomizableコンポーネントの各サブメニュー項目のスタイルを指定します。


A.af|panelCustomizable::sub-menu-item
{
font-weight:normal;
font-size:small;
color:#000000;
display:block;
cursor:pointer;
text-decoration:none;
white-space:nowrap;
background:#FFFFFF;
padding-top:4px;
padding-bottom:3px;
padding-left:5px;
padding-right:5px;
width:100%
}

panelCustomizable::menu-item-separator

panelCustomizableコンポーネントのメニュー項目セパレータのスタイルを指定します。


af|panelCustomizable::menu-item-separator
{
border-top:1px solid #969664;
border-bottom:1px solid #515151;
margin:4px 2px
}

panelCustomizable::actions-image-separator

panelCustomizableコンポーネントの「アクション」ボタン、「最小化」アイコンおよび「リストア」アイコンのスタイルを指定します。


af|panelCustomizable::actions-image-separator
{
padding-right:5px;
padding-top:1px;
padding-bottom:1px
}

A.af|panelCustomizable::title-clickable

panelCustomizableコンポーネントでタイトルをクリックできる場合に使用するスタイルを指定します。


A.af|panelCustomizable::title-clickable
{

font-size:small;
font-weight:bold;
text-decoration:none;
display:block;color:#336699;
margin-left:5px
}

panelCustomizable::no-header-content

panelCustomizableコンポーネントのヘッダーをオフにする場合に使用するスタイルを指定します。


af|panelCustomizable::no-header-content
{
border-left:1px #6699CC solid;
border-right:1px #515151 solid;
border-bottom:1px #515151 solid;
border-top:1px #6699CC solid;
position:relative;
width:100%
}

 


関連項目

ADF Facesコンポーネントをスキニングするセレクタ
スキンについて
カスタム・スキンについて