xoops123さあ、いっしょに XOOPS はじめましょう！

説明（概要）

　HTML5+TwitterBootstrap2採用のXCL2.2用テーマです。シンプルで見やすいデザインを意識して作ってみました。PCでもiPhone 等のスマートフォンでも使えます。

　XOOPSらしい３カラムのテーマですが、ブロックの配置により１カラム～３カラムに変化します。また、閲覧環境に応じて柔軟に各カラムの幅が切り替わり、ブラウザの表示幅が480pxより狭くなると１カラムデザインとなるなど、表示環境に応じてページレイアウトを切り替えるレスポンシブ・ウェブデザイン（Responsive Web Design ）となっています。

　色合い設定用のファイルを用意して、簡単に変更できる仕組みを追加してしてみました。

　このテーマについては CreativeCommons ライセンスとさせていただきます。（TwitterBootstrap2については、Apache2ライセンス）

説明（詳細）

　とりあえず、utf8とeucのlanguageファイルは用意しましたが、HTML5ということで utf8ベースで動作すると思います。eucでの動作は確認していません。(d3forum用のテーマ下テンプレートについては、テンプレートに日本語部分を直書きしてるので、ご注意願います。)

　メニューは、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 という名称に変更しています。

　XCL2.2では、デフォルトで google code から jQuery を読み込むようになっていますが、ネット環境にない場合などを想定して、 google code から読み込めない場合には、ローカルにある jquery.js を読み込むようにしています。（多分、動作すると思いますが・・・余り、自信はありません。）

【画面表示について】

　このテーマは、TwitterBootstrap2のcssを採用しています。
　また、メディア・クエリ（Media Queries）を利用して、表示するデバイス（ブラウザ）の画面幅によりスタイル（CSS）の切替を行います。最大表示幅は1200pxでブラウザの幅を縮めるとそれに応じて横幅が狭まったりします。

　利用方法は、通常の３カラムテーマと殆ど同じですが、中央中央カラムについては、管理画面のブロック管理にてタイトルに指定文字を追記すると、TwitterBootstrap2のclassを追加するような仕組みを加えています。
　例えば、タイトルに [[span3 などと入力すると、TwitterBootstrap2のグリッドシステムのclass 「span3」のwidthが適用されます。（TwitterBootstrap2のグリッドシステムは12カラムで構成されており、span1からspan12までで、span12の場合全幅表示となり、span1の場合、1/12の横幅となります。つまり、中央中央カラムのブロックについて、同じ幅で３個横に並べたい場合は、３個ともタイトルに [[span4 を追加します。もちろん、３つのブロックのタイトルに [[span2 [[span4 [[span6 とそれぞれ違うクラスを指定しても結構です。ポイントは、合計で１２にすることですね。）

　さらに、中央中央カラムについては、ウェイト（並び順）で表示コントロールを行っており
　　ウェイト 0 の場合、メニュー下に全幅表示
　　ウェイト 1〜499 の場合、通常の３カラムの中央カラムとして表示（モジュールコンテンツの上に表示）
　　ウェイト 500〜1999 の場合、通常の３カラムの中央カラムとして表示（モジュールコンテンツの下に表示）
　　ウェイト 2000以上 の場合、フッター下に全幅表示
するように設定していますので、希望する表示となるようにウェイトを指定してください。（もちろん、タイトルにTwitterBootstrap2のclass [[span1 から [[span12 を指定すると、希望する幅で表示出来ます。）

　中央左、中央右ブロックは、中央カラム幅の５０％にて表示するようにしています。
　左カラム、右カラムは、タイトルにTwitterBootstrap2のクラスを記述しても適用されませんので、ご注意ください。

　また、カスタムブロック等で、HTMLとして記載する場合、TwitterBootstrap2のclass等を利用すると、自在に表示コントロールが出来ると思います。

■カスタムブロック内の記述例（spanは合計で12になるように設定するのがコツです。）

 <div class="row">
   <div class="span3">
     ブロック内の記述
   </div>
   <div class="span4">
     ブロック内の記述
   </div>
   <div class="span2">
     ブロック内の記述
   </div>
   <div class="span3">
     ブロック内の記述
   </div>
 </div>

インストール

　まずは、解凍してできあがったフォルダの最下層にある「green-label」をFTPにてサイトのテーマ・ディレクトリへコピーしてください。（場合によっては、/green-label/html/themes/green-label/ のように、解凍したフォルダの階層が深くなっていることもありますので、ご注意ください。html/themes/の下にある green-label フォルダをアップロードしてください。）

　このテーマではブロック幅をコントロールするための機能拡張を利用するために専用のプラグインを利用する設定としております。
　プラグインがない場合はエラーとなりますので、必ず導入してください。

　プラグインは、解凍してできあがったフォルダ下にある xoops_trust_path/libs/smartyplugins フォルダの modifier.xoops_blocktitleclass.php と modifier.xoops_blocktitleclassdel.php の２種類です。これをサイトのプラグインディレクトリにコピーしてください。（必須です。）
　また、テーマ下テンプレートで function.xugj_block.php と modifier.xugj_date.php を利用しているので、これも同様にコピーして下さい。

「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/
（最新のHyperCommonFuncモジュールを利用している場合、または preload「HdXoopsTplHook.class.php」か「HypXoopsTplHook.class.php」を使っている場合、このディレクトリが優先となります。）

カスタマイズ

【メニュー表示項目の変更】

○xugjメニューの場合
　このテーマでは、xugj_assign_phpを用いたメニュー表示を行いますが、インストールして初回表示した時に、メインメニュー表示する設定となっているメニュー項目を自動で引用してきます。（表示用のキャッシュファイルを自動作成して利用）

　従って、モジュールの管理にてモジュールの表示名を変えたり、並び順を「０」として非表示指定した場合でも、テーマのメニュー表示は以前作成したキャッシュファイルを利用することから、変更した表示となりません。

　そのような場合、FTPソフトを使って、cacheディレクトリ内の theme_green-label_menus_****.php を削除してください。再度、サイトを表示した際に、新しくメニュー用のキャッシュファイルが自動生成されます。

　なお、domifaraさん作成の「xugjメニューキャッシュリフレシュ　管理画面モジュール」を利用すると、FTPソフトを使わずにキャッシュファイルの削除ができるので、便利だと思います。（domifaraさん、ありがとうございます。）
　　http://xoops123.com/modules/d3downloads/index.php?page=singlefile&cid=10&lid=66

○マルチメニューを利用する場合
　theme.htmlの91行目にメニューに関する記述がありますので、マルチメニューを利用する場合は
　　<{include file="`$xoops_theme`/xugj_menu.html"}>
部分の記述を
　　<{include file="`$xoops_theme`/multi_menu.html"}>
に変更してください。

【色合いの調整等】

　色合い関するcssの記述については、color.php としてまとめています。
　この中の記述を変更すると、色合いの調整を行うことが可能となっています。

　下記の記述のように、phpで色を定義しておりますので、各々色に該当するコードを変更すると必要箇所に反映されるようになっています。（例：基本背景色の #f8fbf8 を #cccccc に変更するなど）

 //config
   define('_TC_BG_COLOR','#f8fbf8');	//基本背景色

　なお、全てを変更する場合は、TwitterBootstrap2のcssを修正する必要があります。
　TwitterBootstrap2のcssについては、オリジナルをそのまま採用していますので、当該サイトにおけるカスタマイズや関連サイトで紹介されている設定変更方法などを参照してください。

【cssの調整】

　表示をコントロールするため、style.cssとmodules.min.cssを追加読み込みさせています。
　bootstrap.cssで指定されたclassなどに上書きする形でcssが読み込まれることにより、元のbootstrap.cssを修正することなくテーマデザインの調整を行っています。
　もし、利用者において調整される場合は、style.cssまたはmodules.min.cssを修正・加筆されるのが良いでしょう。

バージョンアップ履歴

2013-9-2 ver0.1 まずは公開してみる。
2013-11-20 ver0.11 modules.min.cssを修正、コメント投稿欄のinputを調整した。
2013-12-7 ver0.12 CSS微調整