1: 2012-12-02 (日) 07:55:00 なーお[4] ![]() ![]() |
2: 2012-12-02 (日) 11:42:07 なーお[4] ![]() ![]() Deleted an attach file: bulletin_legacy_default.jpg at 2012-12-02 (日) 11:25:48 |
||
---|---|---|---|
Line 1: | Line 1: | ||
+ | ** レガシーテーマのスタイルを利用したモジュールテンプレート [#wbfcbb2b] | ||
+ | |||
+ | XOOPSで気に行ったテーマを探す時に、使っているモジュールが固定の文字色指定のためにテーマによって文字が見えづらくなったりすることは良く経験します。 「テーマの色調に合わせて変わってくれれば良いのに・・」 と思いますね。 | ||
+ | |||
+ | テーマに合わせて色調や文字サイズなどを完全にフィットさせるには、 | ||
+ | - Bootstrap対応の最新のテーマ | ||
+ | - Bootstrap用にカスタマイズしたモジュールテンプレート | ||
+ | |||
+ | これらを組み合わせればベストだと思いますが、 テーマもまだ少ないですし、対応モジュールも現時点ではまだありません。 | ||
+ | でも諦めるのはまだ早い、もう少し簡単な方法でそれに近いことが可能なので、あらためてご紹介します。 | ||
+ | |||
+ | *** ニュースモジュールの表示を見てみよう [#e67259ed] | ||
+ | 典型的で分かり易い例で、newsモジュールから派生したbulletinモジュールの表示を見てみましょう。 | ||
+ | &ref(bulletin_legacy_default.jpg,mw:480,mh:360); | ||
+ | ヘッダー、本文、フッター をブロック要素であるdivでくくり、"itemHead" "itemInfo" "itemBody" "itemFoot" というクラス指定しています。 | ||
+ | そして、その中でspanやpなどの要素でくくり、"itemTitle" "itemPoster" "itempostDate" "itemText" "itemAdminLink" "itemPermaLink" というセレクタ指定です。 | ||
+ | これらクラス・セレクタ名は、XOOPS2.0系以前の古いテーマから使われてきており、ほぼ全てのテーマでスタイル指定されているレガシーなクラス群で、最新のlegacy_themeでもしっかりと記述されています。 | ||
+ | - https://github.com/XoopsX/legacy/blob/CorePack/html/themes/legacy_default/item.css | ||
+ | |||
+ | 実際のbulletinのテンプレート群で、確認してみてください。 item.htmlの例はこちらで見れます。 | ||
+ | - https://github.com/XoopsX/bulletin/blob/master/xoops_trust_path/modules/bulletin/templates/item.html | ||
+ | |||
+ | |||
[[inc]] | [[inc]] |
(This host) = http://motioncafe.naaon.com