【テーマ名 】 tw_responsive
【作 成 者】 marine / mistgreen
【動作 環境】 XOOPS Cube Legacy 2.1x (HD1.04)、2.2
【ライセンス】 MIT
【公 開 日 】 2012-10-17
======================================================
説明（概要）
======================================================
HTML5+TwitterBootstrap採用のXCL2.1x(HD1.04)・XCL2.2用テーマです。PCでもiPhone 等のスマートフォンでも使えます。
XOOPSらしい３カラムのテーマですが、ブロックの配置により１カラム～３カラムに変化します。また、閲覧環境に応じて柔軟に各カラムの幅が切り替わり、ブラウザの表示幅が480pxより狭くなると１カラムデザインとなるなど、表示環境に応じてページレイアウトを切り替えるレスポンシブ・ウェブデザイン（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 という名称に変更しています。
XCL2.2では、デフォルトで google code から jQuery を読み込むようになっていますが、ネット環境にない場合などを想定して、 google code から読み込めない場合には、ローカルにある jquery.js を読み込むようにしています。
domifaraさん、ありがとうございます。
【画面表示について】
このテーマは、TwitterBootstrapのcssを採用しています。
また、メディア・クエリ（Media Queries）を利用して、表示するデバイス（ブラウザ）の画面幅によりスタイル（CSS）の切替を行います。最大表示幅は1200pxでブラウザの幅を縮めるとそれに応じて横幅が狭まったりします。
======================================================
インストール
======================================================
まずは、解凍してできあがったフォルダの最下層にある「tw_responsive」をFTPにてサイトのテーマ・ディレクトリへコピーしてください。（場合によっては、/coffee_time/html/themes/tw_responsive/ のように、解凍したフォルダの階層が深くなっていることもありますので、ご注意ください。html/themes/の下にある tw_responsive フォルダをアップロードしてください。）
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を用いたメニュー表示を行いますが、インストールして初回表示した時に、メインメニュー表示する設定となっているメニュー項目を自動で引用してきます。（表示用のキャッシュファイルを自動作成して利用）
従って、モジュールの管理にてモジュールの表示名を変えたり、並び順を「０」として非表示指定した場合でも、テーマのメニュー表示は以前作成したキャッシュファイルを利用することから、変更した表示となりません。
そのような場合、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から、主要な部分に関する記述を抜き出して、color_min.php としてまとめてみました。
この中の記述を変更すると、色合いの調整を行うことが可能となっています。
下記の記述のように、phpで色を定義しておりますので、各々色に該当するコードを変更すると必要箇所に反映されるようになっています。（例：基本背景色の #fafafa を #cccccc に変更するなど）
<?php
header('Content-Type: text/css');
//config
//基本色
define('_TC_BG_COLOR','#fafafa'); //基本背景色
define('_TC_BASE_COLOR','#333333'); //基本文字色
define('_TC_NAV_COLOR','#777777'); //navbar 文字色
define('_TC_NAVBG_COLOR','#fafafa'); //navbar background color
define('_TC_NAVBG_IMAGE1','#ede4e1'); //navbar background image color 1
define('_TC_NAVBG_IMAGE2','#e5c1cd'); //navbar background image color 2
define('_TC_BREADCRUMB_BG_COLOR','#f5ecf4'); //パンくずリスト背景色
define('_TC_BREADCRUMB_DIVIDER_COLOR','#8d6449'); //パンくずリスト区切り
define('_TC_BREADCRUMB_ACTIVE_COLOR','#999999'); //パンくずリスト アクティブ
define('_TC_A_COLOR','#c85179'); //基本a
define('_TC_A_HOVER_COLOR','#9a493f'); //基本a hover
?>
なお、全てを変更する場合は、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を追加
295
0バイト
XOOPS Cube Legacy 2.2x
MIT
