【テーマ名 】 tw_basic
【作 成 者】 marine / mistgreen
【動作 環境】 XOOPS Cube Legacy 2.1x (HD1.04)、2.2
【ライセンス】 MIT
【公 開 日 】 2012-10-7
======================================================
説明(概要)
======================================================
HTML5+TwitterBootstrap採用のXCL2.1x(HD1.04)・XCL2.2用テーマです。PCでもiPhone 等のスマートフォンでも使えます。
XOOPSらしい3カラムのテーマですが、ブロックの配置により1カラム~3カラムに変化します。また、閲覧環境に応じて柔軟に各カラムの幅が切り替わり、ブラウザの表示幅が480pxより狭くなると1カラムデザインとなるなど、表示環境に応じてページレイアウトを切り替えるレスポンシブ・ウェブデザイン(Responsive Web Design )となっています。
ヘッダーには、xugj_assign プラグインを利用して、インストールされたモジュールに対応するメニューバーを自動表示するようにしています。(簡単な設定変更で、マルチメニューを表示させることも可能)
また、フッターにユーザーメニュー項目も自動表示するので、xoopsの互換モジュールである「メインメニュー」「ユーザーメニュー」を利用しない運用が可能となっています。
このテーマについては MIT ライセンスとさせていただきます。(TwitterBootstrapについては、Apache2ライセンス)
======================================================
説明(詳細)
======================================================
とりあえず、utf8とeucのlanguageファイルは用意しましたが、HTML5ということで utf8ベースで動作すると思います。eucでの動作は確認していません。
メニューは、Xoops Users Group Japan(XUGJ) で GIJOEさんが提唱された xugj_assign.php を利用したメニューを採用しています。
通常のメインメニューに表示されるのと同じ項目が自動で表示されるので、メニューの項目を編集する必要もありません。
http://www.xugj.org/modules/d3forum/index.php?topic_id=125 なお、同封しているものは、オリジナルの xugj_assign.php から少し変更しているので、xugj_assign_theme.php という名称に変更しています。
【画面表示について】
このテーマは、TwitterBootstrapのcssを採用しています。
また、メディア・クエリ(Media Queries)を利用して、表示するデバイス(ブラウザ)の画面幅によりスタイル(CSS)の切替を行います。最大表示幅は1200pxでブラウザの幅を縮めるとそれに応じて横幅が狭まったりします。
======================================================
インストール
======================================================
まずは、解凍してできあがったフォルダの最下層にある「tw_basic」をFTPにてサイトのテーマ・ディレクトリへコピーしてください。(場合によっては、/coffee_time/html/themes/tw_basic/ のように、解凍したフォルダの階層が深くなっていることもありますので、ご注意ください。html/themes/の下にある tw_basic フォルダをアップロードしてください。)
d3pipesの同期ブロックを利用する場合は、xugj_dateプラグインを使いますので、サイトのプラグインディレクトリにコピーしてください。
「plugin」ディレクトリは、XCL2.1x と XCL2.2 では場所が違うのでご注意ください。
XCL2.1xの場合 /XOOPS_ROOT_PATH/class/smarty/plugins/
XCL2.2の場合 /XOOPS_TRUST_PATH/libs/smarty/plugins/ または
/XOOPS_TRUST_PATH/libs/smartyplugins/
(preload「HdXoopsTplHook.class.php」または「HypXoopsTplHook.class.php」を使っている場合、このディレクトリが優先となります。)
======================================================
カスタマイズ
======================================================
【メニュー表示項目の変更】
○xugjメニューの場合
このテーマでは、xugj_assign_phpを用いたメニュー表示を行いますが、インストールして初回表示した時に、メインメニュー表示する設定となっているメニュー項目を自動で引用してきます。(表示用のキャッシュファイルを自動作成して利用)
従って、モジュールの管理にてモジュールの表示名を変えたり、並び順を「0」として非表示指定した場合でも、テーマのメニュー表示は以前作成したキャッシュファイルを利用することから、変更した表示となりません。
そのような場合、FTPソフトを使って、cacheディレクトリ内の theme_trend_menus_****.php を削除してください。再度、サイトを表示した際に、新しくメニュー用のキャッシュファイルが自動生成されます。
なお、domifaraさん作成の「xugjメニューキャッシュリフレシュ 管理画面モジュール」を利用すると、FTPソフトを使わずにキャッシュファイルの削除ができるので、便利だと思います。(domifaraさん、ありがとうございます。)
http://xoops123.com/modules/d3downloads/index.php?page=singlefile&cid=10&lid=66○マルチメニューを利用する場合
theme.htmlの63行目にメニューに関する記述がありますので、マルチメニューを利用する場合は
<{include file="`$xoops_theme`/xugj_menu.html"}>
部分の記述を
<{include file="`$xoops_theme`/multi_menu.html"}>
に変更してください。
【色合いの調整等】
本格的な調整は、TwitterBootstrapのcssを修正する必要があります。
TwitterBootstrapのcssについては、オリジナルをそのまま採用していますので、当該サイトにおけるカスタマイズや関連サイトで紹介されている設定変更方法などを参照してください。
======================================================
バージョンアップ履歴
======================================================
2012-10-7 ver0.1
とりあえず公開してみる。
2012-10-14 ver0.11
IEでデザイン崩れが出ていたのを改修。
2012-10-16 ver0.12
bootstrap.min.js、bootstrap.min.cssを利用する設定とした。
IEの互換表示アイコンが出ない設定とした。
xugjメニューとマルチメニューを選択表示可能とした。(デフォルトはxugjメニュー)
サブメニューをドロップダウンできるようにした。
2012-10-16 ver0.13
style.cssを調整
2012-10-16 ver0.14
style.cssを再調整
パンくずリストをtwitterbootstrapの様式に合わせた。
テキストエリアの調整と自動で伸びる機能を付加(jQueryプラグイン)
d3pipesの同期ブロックのみテーマ下テンプレート付けた(xugj_dateプラグイン同梱)
2014-3-29 ver0.15
テーマディレクトリにreadme.txtを追加