XoopsCubeLegacy テーマ : vgrid バージョン: 1.00 掲載日: 2011-6-5 Ver Up 2011-6-10 説明 XCL(HD1.04)・XCL2.2用の可変グリッドレイアウト・テーマです。
Xoops Cube Legacy 2.17 (HD1.04) ja_utf8 と XCL2.2 で動作確認しました。
domifaraさんがモディファイされた
XCL2.2RC2 を気軽に試せるローカル環境 WARP 公開!
http://www.xugj.org/modules/d3forum/index.php?topic_id=1122#post_id6351内にある Sakura をベースに作成しました。
下記リンク先のブログに掲載された可変グリッドレイアウトを実現する jQuery のプラグインを利用して、Xoopsには珍しい可変グリッドのテーマが出来上がりました。(ありがとうございます。>作者様)
http://blog.xlune.com/2009/09/jqueryvgrid.html jQuery等のjavascriptを利用しているので、javascript許可環境にて閲覧することを前提としています。
デザインは、いわゆるリキッドデザインで、ウィンドウ幅に応じて各ブロックが並び変わりますので、どんなウィンドウサイズでも縦スクロールだけで情報閲覧が可能となっています。
さらに、IE以外のブラウザだと、各ブロックのコーナーが丸角になります。
そして、横幅480px以下になると iPhone 用の1カラムのデザインに変わります。(IE以外)
他のテーマと同じく、xugj_assign.phpを用いた上部メニューを採用しており、メインメニュー項目を自動で表示します。
可変グリッドを実現するにあたり、従来のメインカラムやサイドカラムを廃し、全体をくるむラッパーの下にdivでくるんだブロックを配置しております。
ウィンドウ幅に応じて、ブロックの配置も変わりますので、思い通りの表示にするのは少々難しいかもしれませんが、色々とお試しください。
utf8とeucのlanguageファイルを用意しましたので、eucでも動作すると思います。
(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_vgrid.php という名称に変更しています。
jQuery.js + jquery.jgrowlプラグインを利用して、画面遷移せずにリダイレクト表示できるので、スピーディーでセンスの良い表示が可能となっています。
なお、本テーマには、domifaraさん作成のphpファイルによるインクルード方法を用いております。
domifaraさん、ありがとうございます。
(javascriptオフ時には、リダイレクトの文字などがボックス表示されます。)
jQueryについては、domifaraさんによるXCL2.2対応措置がとられており、jQueryの二重読み込み防止や他のjavascriptとのバッティングを可能な限り避ける仕組みが用いられております。
(xugj_already_js.phpをXCL2.1対応版に差し替えております。)
インストール インストールは通常のテーマと同様です。
解凍してできあがったディレクトリ(vgrid)をサイトのテーマ・ディレクトリへコピーして、管理画面の「互換モジュール」「テーマの管理」でこのテーマを使用する設定としてください。
このテーマをインストールして初回表示した時に、メインメニューの内容からメニュー項目を自動で引用してきます。
その後、項目名を変えたりした場合、タブメニューの名称が自動で変わらない場合は・・・
FTPソフトを使って、cacheフォルダ内の theme_vgrid_menus_****.php を削除してください。再度、サイトを表示した際に、新しくメニュー用のキャッシュファイルが自動生成されます。
別途、domifaraさん作成の「xugjメニューキャッシュリフレシュ 管理画面モジュール」を利用すると、FTPソフトを使わずにキャッシュファイルの削除ができるので、便利でしょう。(domifaraさん、ありがとうございます。)
http://xodomifara.lolipop.jp/doxo/modules/d3downloads/index.php?cid=2 カスタマイズ bodyには、ディレクトリ名に応じたclassが付加される設定となっておりますので、各ディレクトリ(モジュール)ごとの背景色やdiv幅など、自由な設定が可能となっております。
主要なモジュールに対応するディレクトリ名によるbody背景色などの設定済みです。
さらに、主要モジュールの項目で表示に支障の出る箇所は、テーマ下テンプレートと modules.css などを調整して、予め問題が出ないようにしていますが、すべての項目を確認した訳ではありませんので、その点はご了承願います。
style.cssとmodules.cssにて、色々と設定変更等をお試しください。
メニューの色合い等は、menu.cssを編集してください。
ウィンドウサイズ480px以下とiPhone用の表示については、iPhone.cssを編集してください。
バージョンアップ履歴2011-6-5 ver0.85
とりあえず、使える程度になったような気がするので、公開してみます。
2011-6-6 ver0.86
テーマ下のd3forumやd3pipesのテンプレートを修正、表示崩れを最小にした。
bodyに設定したディレクトリ名によるクラス名を利用して、モジュール別に表示幅を設定変更。d3downloadsなど横幅が必要なモジュールにおける表示を適正化。
2011-6-6 ver1.00
さらにテーマ下テンプレートとmodules.cssを修正・調整して、できるだけ違和感が少なくなるようにしてみました。また、iPhoneでの表示も調整しております。xugj_already_js.phpをXCL2.1対応版に差し替えました。
ということで、とりあえずこれで完成型とさせていただきます。
お願いできましたら、掲示板(ご訪問帳)
http://xoops123.com/modules/d3forum/?forum_id=1 に何か書き込んでいただけると嬉しいです~m(_ _)m