複合メニュー・スタイルのカスタマイズ
MenuComposite.cls の XData Style ブロックに、CSS スタイルを追加できます。
次のように、MenuComposite.cls の XData Style ブロックを更新して、クラスをコンパイルします。
XData Style
{
<style type="text/css">
/*Styles for components in this composite component*/
.title {
background: #C5D6D6;
color: black;
font-size: 1.5em;
font-weight: bold;
padding: 5px;
border-bottom: 1px solid black;
text-align: center;
}
/* Default style overrides*/
/* Override default menu item style */
a.menuItem {
font-size: 0.9em;
color: black;
}
a.menuItemDisabled {
font-size: 0.9em;
color: black;
}
</style>
}
このスタイル定義について、以下のことに注意してください。
-
最初の定義は、<html> コンポーネントのスタイルを制御します。セレクタとして、.title が使用されます。これは、<html> 要素の id 値と合致します。
-
残りの CSS 定義は、menuItem コンポーネントの既定のスタイルをオーバーライドします。