Joomla!1.5 Manual
Joomla! 1.5使い方解説サイト
>
Sep
20
2008
CSSクラス: .sectiontableentry PDF 印刷 Eメール
.sectiontableentryクラスは、テーブルを偶数行が奇数行かによってスタイルを指定します。偶数・奇数で異なるスタイルを適用するため、一行ごと交互にデザインを指定できます(マウスオーバーの場合のスタイルも設定可)。



JA PurityでどのようにCSSが記述されているか確認しましょう。

td.sectiontableheader {
padding: 4px;
border-right: 1px solid #fff;
}
tr.sectiontableentry0 td,
tr.sectiontableentry1 td,
tr.sectiontableentry2 td {
padding: 4px;
}
td.sectiontableentry0,
td.sectiontableentry1,
td.sectiontableentry2 {
padding: 3px;
}



.sectiontableheaderでヘッダー部のスタイルを記述していることに注意してください。

続いて、行によってカラーを別々に設定するスタイルを見てみましょう。

tr.sectiontableentry1 td {
padding: 8px 5px;
background: url(../images/hdot2.gif) repeat-x bottom;
}
tr.sectiontableentry2 td {
padding: 8px 5px;
background: url(../images/hdot2.gif) repeat-x bottom #ECECEC;
}
tr.sectiontableentry1:hover td,
tr.sectiontableentry2:hover td {
background: url('/../images/hdot2.gif') repeat-x bottom #FFFFCC;
}



.sectiontableentry1が奇数行、sectiontableentry2が偶数行を表しています。また、マウスオーバー時にもスタイルを変えたい場合は、sectiontableentry1:hoverのように記述していることに注目してください。

 

テンプレート変更

xhtml_starter_kit

アクセスカウンタ

アクセス [+/-]
今日:
1日前:
2日前:
178
150
148

+2
今週:
先週:
2週間前:
1297
1269
1087

+182
今月:
先月:
2ヶ月前:
832
5007
5096

-89
現在
 ゲスト 6 人
 がオンラインです

Joomla!1.5なサイト







にほんブログ村 IT技術ブログへにほんブログ村 IT技術ブログ CMSへ