2006 07 29_xtc2006_x_cube_template

XOOPS Cube 2.1 管理画面テンプレート Malaika System 早川知道 (Tom_G3X ) 2006.7.29

Xcube2.1 のテーマ・テンプレート仕様概要 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

管理画面テーマ・テンプレートの特徴 ,[object Object],[object Object],[object Object],[object Object],[object Object]

ホールバック (Fallback) ,[object Object],[object Object],[object Object],触っちゃいけない、禁断のディレクトリ～ ,[object Object],/modules/ (module_dir) /admin/templates/ / ＊ .html /icons/ ＊ .gif ( モジュール専用のアイコン等 ) /modules/base/admin/theme/ / admin_theme.html 　 ( 管理画面用テ－マ ) /style.css 　　 ( 管理画面テーマ用 CSS) /icons/ ＊ .gif 　　 ( 管理画面用共通アイコン ) /design/ ＊ .gif 　 ( テーマ専用画像 ) ,[object Object]

オーバーライド (Override) ,[object Object],[object Object],[object Object],[object Object],変更したいテーマ・テンプレートだけを、これらのディレクトリに入れておけば、デフォルトを上書きした状態になり、デザインの変更が容易になる。上書き専用！失敗したら、消そう！　元に戻るよ～ /themes/admin/ / admin_theme.html (override 管理画面用テ－マ ) /style.css (override 管理画面テーマ用 CSS) /icons/ ＊ .gif (override 理画面用共通アイコン ) /design/ ＊ .gif (override テーマ専用画像 ) ,[object Object],/themes/admin/modules/ (module_dir) / / ＊ .html (override 管理画面テンプレート ) ,[object Object]

オーバーライドの問題点 ,[object Object],これらを解決する為、管理画面専用の Smarty モディファイを実装。管理画面のデザインを変更しよう！そうだ！オーバーライド機能を使おう！！だけど、まてよ？？ハテ？？ info.gif だけを変更したいのに、 admin_theme.html も書き換えなければならない・・ ? style.css を書き換えた時、背景画像のパスも書き換えなければならない・・ ? 困ったもんだぁ～～。やっとれんがやぁ～！ (fallback)/admin_theme.html で、 (fallback)/icons/info.gif を表示する時通常は、こう記述するが・・・・・。例 : <img src=“<{$smarty.const._XOOPS_URL}>/modules/base/admin/theme/icons/info.gif” />

モディファイ theme ,[object Object],記述方法： <{ “icons/info.gif” | theme }> 優先順位 1. 　 /themes/admin/modules/ (module_dir) /icons/ info.gif オーバーライド内の各モジュールの icons ディレクトリ 2. 　 /themes/admin/icons/ info.gif オーバーライド内の共通 icons ディレクトリ 3. 　 /modules/ (module_dir) /admin/template/icons/ info.gif 各モジュールのテンプレート内の icons ディレクトリ 4. 　 /modules/base/admin/theme/icons/ info.gif ホールバックディレクトリ管理画面だけで有効なモディファイである優先順位に従ってファイルの有無をチェックし、最初に見つかったファイルを表示する。

モディファイ stylesheet ,[object Object],[object Object],記述方法： <{stylesheet file=style.css}> 優先順位 1 　 /themes/admin/ style.css オーバーライド内の style.css 2 　 /modules/base/admin/theme/ style.css ホールバックディレクトリ内の style.css 優先順位に従って CSS ファイルの有無をチェックし、最初に見つかった CSS ファイルを使用する。 ↓ /modules/base/admin/css.php より実行 ↓ CSS の背景画像などの相対パスの問題を解決。特に、相対パスの関係を意識する必要が無くなる管理画面だけで有効なモディファイである

StyleSheet について ,[object Object],[object Object],[object Object],[object Object],こんな記述が出来るのは、管理画面の style.css だけです。 ← ・・・・・・・・・・・・・・・・・・・・　 /modules/base/admin/css.php ,[object Object],h2 { color : #666666 ; background : url( <{“icons/h2bg.gif"|theme}> ) repeat-x ; padding-left : 5px ; }

管理画面テンプレート指針 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

見出し用 HTML タグ ,[object Object],[object Object],[object Object],h1 　テーマ用（予約タグ） h2 　テーマ用（主に、現在のモジュール名の表示用に使用） h3 　テンプレート用（管理画面名の表示用に使用する） h4 　テンプレート用（管理画面内の見出し用） h5 　テンプレート用（管理画面内の見出し用）

管理画面ヘルプ ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

ヘルプ専用モディファイ helpurl ,[object Object],[object Object],<a href = “<{ ‘xxxx.html’ | helpurl }>” > 次のページ </a> ( /modules/hogehoge/language/japanese/help.html ) Hogehoge モジュールヘルプ・・・・・・・・・・・・・・・・・・・・・・・ <a href = “<{ ‘help2.html’ | helpurl }>” > 続きは「ヘルプ２」 </a> ( /modules/hogehoge/language/japanese/help2.html ) Hogehoge モジュールヘルプ２・・・・・・・・・・・・・・・・・・・・・・・ <a href = “<{ ‘help.html’ | helpurl }>” > 「ヘルプ１」に戻る </a>

ヘルプ記述ルール ,[object Object],[object Object],各ヘルプファイルは、 <ul><li> などの簡素な形式で記述するのが望ましい。 ( /modules/base/admin/templates/help.html ) < div class = "adminnavi" > < a href = “ ・・・・” > モジュール名 </ a > »» ヘルプ </ div > < h3 > ヘルプ < a href = “ ・・・・” > ( モジュール名 ) </ a ></ h3 > < div class = "help" >< {$contents}> </ div > ( /modules/hogehoge/language/japanese/help.html ) < h4 > XOOPS 2.0.x 操作移行リスト </ h4 > < ul > < li >< a href = " < {'xoops2.html'|helpurl}>"> こちら </ a > をご覧ください </ li > </ ul >

注意事項 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

おしまいご参考にしていただければ幸いです御清聴ありがとうございました

2006 07 29_xtc2006_x_cube_template

Recommended

Recommended

More Related Content

What's hot

What's hot (9)

Viewers also liked

Viewers also liked (8)

Similar to 2006 07 29_xtc2006_x_cube_template

Similar to 2006 07 29_xtc2006_x_cube_template (20)

More from Tom Hayakawa

More from Tom Hayakawa (20)

Recently uploaded

Recently uploaded (10)

2006 07 29_xtc2006_x_cube_template

Editor's Notes