<link rel="stylesheet" type="text/css" media="screen" href="<{$xoops_imageurl}>modules.css" charset="utf-8" />
// define('_THEME_CONFIG_BG_OUTERWRAPPER_COLOR','background:#ccc'); //コンテンツ背景
// define('_THEME_CONFIG_BG_OUTERWRAPPER_COLOR','background:url(images/b005bcg.gif)'); //コンテンツ背景
define('_THEME_CONFIG_d3f_ICONNOTE_IMG','images/s001.png'); //d3forum ヘッダノートアイコン
define('_THEME_CONFIG_d3f_ICONPOST_IMG','images/b001.png'); //d3forum ヘッダ新規投稿アイコン
define('_THEME_CONFIG_d3f_ICONVISITORS_BOOK_IMG','images/c001.png'); //d3forum ヘッダ訪問帳アイコン
/* example
body.pico #Container {
max-width:1274px;
min-width:980px;
margin:0 auto;
}
*/
body.pico #Container {
max-width:1274px;
min-width:980px;
margin:0 auto;
}
【テーマ名 】 green-label
【バージョン】 0.12
【作 成 者】 marine / mistgreen
【動作 環境】 XOOPS Cube Legacy 2.2
【ライセンス】 CC
【公 開 日 】 2013-9-02
HTML5+TwitterBootstrap2採用のXCL2.2用テーマです。シンプルで見やすいデザインを意識して作ってみました。PCでもiPhone 等のスマートフォンでも使えます。
XOOPSらしい3カラムのテーマですが、ブロックの配置により1カラム~3カラムに変化します。また、閲覧環境に応じて柔軟に各カラムの幅が切り替わり、ブラウザの表示幅が480pxより狭くなると1カラムデザインとなるなど、表示環境に応じてページレイアウトを切り替えるレスポンシブ・ウェブデザイン(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でブラウザの幅を縮めるとそれに応じて横幅が狭まったりします。
利用方法は、通常の3カラムテーマと殆ど同じですが、中央中央カラムについては、管理画面のブロック管理にてタイトルに指定文字を追記すると、TwitterBootstrap2のclassを追加するような仕組みを加えています。
例えば、タイトルに [[span3 などと入力すると、TwitterBootstrap2のグリッドシステムのclass 「span3」のwidthが適用されます。(TwitterBootstrap2のグリッドシステムは12カラムで構成されており、span1からspan12までで、span12の場合全幅表示となり、span1の場合、1/12の横幅となります。つまり、中央中央カラムのブロックについて、同じ幅で3個横に並べたい場合は、3個ともタイトルに [[span4 を追加します。もちろん、3つのブロックのタイトルに [[span2 [[span4 [[span6 とそれぞれ違うクラスを指定しても結構です。ポイントは、合計で12にすることですね。)
さらに、中央中央カラムについては、ウェイト(並び順)で表示コントロールを行っており
ウェイト 0 の場合、メニュー下に全幅表示
ウェイト 1〜499 の場合、通常の3カラムの中央カラムとして表示(モジュールコンテンツの上に表示)
ウェイト 500〜1999 の場合、通常の3カラムの中央カラムとして表示(モジュールコンテンツの下に表示)
ウェイト 2000以上 の場合、フッター下に全幅表示
するように設定していますので、希望する表示となるようにウェイトを指定してください。(もちろん、タイトルにTwitterBootstrap2のclass [[span1 から [[span12 を指定すると、希望する幅で表示出来ます。)
中央左、中央右ブロックは、中央カラム幅の50%にて表示するようにしています。
左カラム、右カラムは、タイトルに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 の2種類です。これをサイトのプラグインディレクトリにコピーしてください。(必須です。)
また、テーマ下テンプレートで 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を用いたメニュー表示を行いますが、インストールして初回表示した時に、メインメニュー表示する設定となっているメニュー項目を自動で引用してきます。(表示用のキャッシュファイルを自動作成して利用)
従って、モジュールの管理にてモジュールの表示名を変えたり、並び順を「0」として非表示指定した場合でも、テーマのメニュー表示は以前作成したキャッシュファイルを利用することから、変更した表示となりません。
そのような場合、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については、オリジナルをそのまま採用していますので、当該サイトにおけるカスタマイズや関連サイトで紹介されている設定変更方法などを参照してください。
表示をコントロールするため、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微調整
<{if $xoops_dirname == ""}>
<{include file="`$xoops_theme`/theme_slider.html"}>
<{/if}>
【テーマ名 】 x-mas
【作 成 者】 marine / mistgreen
【動作 環境】 XOOPS Cube Legacy 2.2
【ライセンス】 MIT
【公 開 日 】 2012-12-15
===================================
説明(概要)
===================================
クリスマスに相応しいデザインで、PCでもiPhone 等のスマートフォンでも使える XCL2.2用テーマです。HTML5で作ったbasic5・trend2012 をベースに作成しました。
閲覧環境に応じて、柔軟にページレイアウトを切り替えるレスポンシブ・ウェブデザイン(Responsive Web Design )を採用。Xoops Cube Legacy 2.2 で動作確認しました。
ヘッダー画像下には、xugj_assign プラグインを利用して、インストールされたモジュールに対応するメニューバーを自動表示するようにしています。
また、フッターにユーザーメニュー項目も自動表示するので、xoopsの互換モジュールである「メインメニュー」「ユーザーメニュー」を利用しない運用が可能となっています。
このテーマについては MIT ライセンスとさせていただきます。
===================================
説明(詳細)
===================================
とりあえず、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 という名称に変更しています。
jQuery.js + jquery.jgrowlプラグインを利用して、画面遷移せずにリダイレクト表示できるので、スピーディーでセンスの良い表示が可能となっています。 なお、本テーマには、domifaraさん作成のphpファイルによるインクルード方法を用いております。domifaraさん、ありがとうございます。(javascriptオフ時には、リダイレクトの文字などがボックス表示されます。)
jQueryについては、domifaraさんによるXCL2.2対応措置がとられており、jQueryの二重読み込み防止や他のjavascriptとのバッティングを可能な限り避ける仕組みが用いられております。 (xugj_already_js.php をXCL2.1対応版に差し替えております。)
【画面表示について】
このテーマでは、メディア・クエリ(Media Queries)を利用して、表示するデバイス(ブラウザ)の画面幅によりスタイル(CSS)の切替を行います。
基本は、左メイン・右サイドカラムの2カラム表示となっており、最大表示幅は980pxでブラウザの幅を縮めるとそれに応じて横幅が狭まり、デバイスの幅が480px以下になると1カラム表示に切り替わります。
なお、中央・中央カラムについては、表示順設定に応じて、トップとボットムに幅一杯にボックス表示することができます。:hammer:
にっ :-D
■ 中央中央カラム 表示順 0 (トップカラム)
■ 中央中央カラム 表示順500以上 (ボットムカラム)
詳しい表示ロジックについては、同封の layout2012.jpg をご覧下さい。
ヘッダー画像下のメニューバーは、スクロールすると自動でトップにFIXするようにしています。また、検索窓をクリックするとキーワード入力部が横に広がるギミックも装備してみました。(jQuery利用)
===================================
インストール
===================================
インストールは通常テーマと同じです。
プラスアルファとして、テーマ下テンプレートを利用して、主要モジュールのテンプレートを本テーマに最適化させ、テーマ下テンプレートとして利用する設定を行っています。
まずは、解凍してできあがったフォルダ「x-mas」をFTPにてサイトのテーマ・ディレクトリへコピーしてください。(場合によっては、解凍したフォルダの階層が深くなっていることもありますので、ご注意ください。)
完了したら通常のテーマと同様、管理画面の「互換モジュール」「テーマの管理」でこのテーマを使用する設定としてください。
===================================
カスタマイズ
===================================
【メニュー表示項目の変更】
このテーマでは、xugj_assign_phpを用いたメニュー表示を行いますが、インストールして初回表示した時に、メインメニュー表示する設定となっているメニュー項目を自動で引用してきます。(表示用のキャッシュファイルを自動作成して利用)
従って、モジュールの管理にてモジュールの表示名を変えたり、並び順を「0」として非表示指定した場合でも、テーマのメニュー表示は以前作成したキャッシュファイルを利用することから、変更した表示となりません。
そのような場合、FTPソフトを使って、cacheディレクトリ内の theme_****_menus_****.php を削除してください。再度、サイトを表示した際に、新しくメニュー用のキャッシュファイルが自動生成されます。
なお、domifaraさん作成の「xugjメニューキャッシュリフレシュ 管理画面モジュール」を利用すると、FTPソフトを使わずにキャッシュファイルの削除ができるので、便利だと思います。(domifaraさん、ありがとうございます。)
http://xoops123.com/modules/d3downloads/index.php?page=singlefile&cid=10&lid=66
===================================
バージョンアップ履歴
===================================
2012-12-15 ver0.81
とりあえず公開してみる。
2012-12-20 ver0.82
d3downloads向けcss調整、OGP対応追加
2014-3-29 ver0.83
テーマディレクトリにreadme.txtを追加
===================================
お願い
===================================
できましたら、当方のサイト掲示板(ご訪問帳)に何か書き込んでいただけると嬉しいです~m(_ _)m
http://xoops123.com/modules/d3forum/?forum_id=1