当サイトでは、自作のXOOPS(XOOPS Cube Legacy 2.2)用テーマの無料配布を行っています。

機能をちょっとアップするプリロードなどもあるので、是非ともご利用くださいませ。

新着ダウンロード

テーマ選択

screenshot

(59 テーマ)

    このカテゴリには 21 件のファイルがあります

カテゴリ PC用
green-label 人気ダウンロード情報
バージョン: 0.12   掲載日:  2017/3/31
説明

【テーマ名 】 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 )となっています。

 

 トップのヘッダー部分にはグローバルメニューを配しておりugj_assign プラグインを利用して、インストールされたモジュールに対応するメニューバーを自動表示するようにしています。(簡単な設定変更で、マルチメニューを表示させることも可能)
 また、フッターにユーザーメニュー項目も自動表示するので、xoopsの互換モジュールである「メインメニュー」「ユーザーメニュー」を利用しない運用が可能となっています。

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

 このテーマについては 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については、オリジナルをそのまま採用していますので、当該サイトにおけるカスタマイズや関連サイトで紹介されている設定変更方法などを参照してください。

【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微調整


ダウンロード数 325   ファイルサイズ 0バイト   利用可能なOS/ソフト等 XOOPS Cube Legacy 2.2x   ライセンス CreativeCommons   ホームページ Xoops123

利用について  利用ライセンスは、クリエイティブ・コモンズ(CC)となっております。
 フッターのcopyright(Theme designed by marine/mistgreen)表示していただければ、非商用に限り無償で、自由に改変してご利用頂くことができます。(フッターのcopyright表示を消して利用したい場合は、商用利用扱いとなります。)

 なお、TwitterBootstrapのcssについては、Apache2ライセンスとなっておりますので、留意願います。
 
 雑誌・書籍への掲載の場合には、あらかじめ当サイト管理人へご一報ください。
  連絡先:http://xoops123.com/modules/liaise/
商用利用について  企業様、または営利個人様でのご利用は、原則商用とさせていただきます。
 個人利用であっても、著作権表示を削除してご利用される場合は、商用利用扱いとなります。

 商用利用の場合は有償とさせていただきたく、1サイト(ドメイン)につき3000円にてお願い致します。管理人へのご連絡のうえ、手続きをお願い申し上げます。
利用拒否について  違法行為を行っているサイト、公序良俗に反するサイトでの利用は、お断り申し上げます。
連絡先 http://xoops123.com/modules/liaise/
お願い  できましたら、当方のサイト掲示板(ご訪問帳)に何か書き込んでいただけると嬉しいです~m(_ _)m
   http://xoops123.com/modules/d3forum/?forum_id=1
| ファイル破損/リンク切れを報告 |  友達に伝える |  コメント (17)

コメント一覧

投稿ツリー


hiro   投稿日時 2014/1/27 23:39

marineさん
お返事ありがとうございます。
なるほど、私にはよくわかりませんが、ちゃんとした理由がおありでしたら仕方ありません。
素人目には『バージョンアップ=良いもの』と感じておりましたので失礼いたしました。
これからも、素敵なテーマ作成を応援しております。

yone   投稿日時 2014/2/28 11:06

XOOPS Cube Legacy 2.2.2を使っています。
今回、サイトのデザイン変更にtw_responsiveを導入させていただこうと、ローカルでセットアップし、メニューにはマルチメニューを使いたいと説明の通り

<{include file="`$xoops_theme`/multi_menu.html"}>

に書き換えましたが反映されません。
メニューバーが空欄のままになります。

以下のことを行いました。
・ローカルPCで試験運用中
・マルチメニューの導入
・上記部分の書き換え
・マルチメニューの設定でフローほか1~8にもリンクを追加
・ブロックのサイド表示の1~5に設定
・キャッシュのクリア

説明では導入と書換のみで使えるとのことでしたが、ブロックの設定などは必要ないのでしょうか?

marine  投稿日時 2014/3/1 9:31

yoneさん

うちのローカル環境で試してみましたけど、ちゃんと表示されましたねぇ・・・
設定:マルチメニュー01に3個ほどリンクを追加してます。

yoneさんのは、何が原因なのかなぁ・・・?

あ、あとお願いなんですが、今投稿されたのは、テーマ green-label のスレなんですよね。
今回は、tw_responsiveの話なので、できれば、tw_responsiveのダウンロードページにでもコメントいただけたらありがたかったですね〜(^_^;)

yone   投稿日時 2014/3/2 10:26

ご返答有難うございます。
こちら側の問題のようですので、もう一度まっさらからやり直してみようと思います。

それから投稿トピック違い、すみません。

引用:
marineさんは書きました:
yoneさん

うちのローカル環境で試してみましたけど、ちゃんと表示されましたねぇ・・・
設定:マルチメニュー01に3個ほどリンクを追加してます。

yoneさんのは、何が原因なのかなぁ・・・?

あ、あとお願いなんですが、今投稿されたのは、テーマ green-label のスレなんですよね。
今回は、tw_responsiveの話なので、できれば、tw_responsiveのダウンロードページにでもコメントいただけたらありがたかったですね〜(^_^;)

引用:
marineさんは書きました:
yoneさん

うちのローカル環境で試してみましたけど、ちゃんと表示されましたねぇ・・・
設定:マルチメニュー01に3個ほどリンクを追加してます。

yoneさんのは、何が原因なのかなぁ・・・?

あ、あとお願いなんですが、今投稿されたのは、テーマ green-label のスレなんですよね。
今回は、tw_responsiveの話なので、できれば、tw_responsiveのダウンロードページにでもコメントいただけたらありがたかったですね〜(^_^;)

けにぃ   投稿日時 2014/3/20 16:16

marineさんのgreen-labelを使わせて頂いております。
非常に気持ちの良いデザインで大変気に入っております。

ところで、画面上部に表示されるメニューですが、
ここに表示して欲しくないモジュールが表示されていまして、
なんとかこれを消去できないかと考えております。

具体的には、ALTSYS と プライベートメッセージ なんですが、
ALTSYSはユーザーに見せる物でもありませんし、
プライベートメッセージは使用しない設定になっております。

ソースを拝見致しますと、foreachでmoduleフォルダーを検索して
ある条件でメニューに追加している様に見えました。
phpやxoopsの仕組みには詳しくないので、どの様な条件下で
メニューに追加されるのか分かりませんが、なんとかこれらの
不要な項目を消す方法はありませんでしょうか?

宜しくお願い致します。

けにぃ   投稿日時 2014/3/20 16:22

すみません、問題が解決しました。
説明文に cacheフォルダーから メニュー関係のphpファイルを消去するという説明があるのを見逃しておりました。
大変失礼致しました。

marine  投稿日時 2014/3/21 9:31

けにぃ さん
まずは解決されたようで、良かったです。

基本は、モジュール管理で表示する設定になっているものを表示するのです。
ただし、それを変更すると、一旦キャッシュを削除する必要があるということなんですよね。



新しくコメントをつける

題名
ゲスト名
投稿本文
より詳細なコメント入力フォームへ