適応テーマ

メインページ ►Moodleサイトの管理 ► サイトの外観 ► テーマ ► 適応可能なテーマ
テーマ
適応テーマ
タイプテーマ
セット該当なし
ダウンロード https://moodle.org/plugins/theme_adaptable
問題点 https://bitbucket.org/covuni/moodle-theme_adaptable/issues
討論 https://moodle.org/mod/forum/discuss.php?d=326234
メンテナ ヘズH

これは、さまざまな状況で動作するように設計された、 貢献度の高い（サードパーティの）カスタマイズ可能な2列のテーマです。それは人気のあるBCUテーマに基づいています。 Adaptableは多くの新機能とともにBCUのすべての機能を備えています。

内容

特徴

レイアウトビルダー！以下の管理者設定でカスタムレイアウトを定義できます。

  • ブロック領域（ドラッグアンドドロップ）
  • マーケティングブロック
  • フッターブロック
  • 完全にカスタマイズ可能：
    • フォント
    • 色
    • ブロックスタイル（アイコンを含む）
    • ボタン（半径を含む）
  • カスタマイズ可能な色でホームページ上の2つのJQueryスライダーの選択
  • ニュース/お知らせホーム / ダッシュボードのティッカー
  • 複数のフロントページコーススタイル
  • 豊富なカスタムメニュー（カスタムプロファイルフィールドに基づいてさまざまなユーザーをターゲットにすることができます）
  • 「私のコース」リストは、より古いコースをサブメニュー項目に入れるように編成することができます。
  • 却下可能なブートストラップアラート
    • さまざまなブートストラップスタイルを使用してサイト全体の通知を表示する
    • ユーザが一度読んだアラートを消すことを許可する（ページロード/ログインの間持続する）
    • アラートの再利用を許可する（ユーザーが却下しても再度表示する） "キー"フィールドの更新購入
  • 幅、スライダー幅、さまざまな要素の余白の追加レイアウト設定
  • ソーシャルアイコンまたはヘッダーの検索ボックス（管理者は2つのうちから選択できます）
  • Social Wall Courseフォーマットのサポート（Chris Kenniburg氏に感謝します）
  • モバイル設定（テーマがモバイルデバイス上でどのように見えるかをより詳細に制御）
  • フロントページのヘッダーにログインフォームを追加するオプション
  • Faviconアップローダ
  • 背景画像アップローダ

さらに、カスタムプロファイルフィールドを使用して多くのフィールド（メニュー、ニュース項目、アラート、およびヘルプリンク）をターゲティングすることができるため、さまざまなユーザーにさまざまなナビゲーション項目や通知を表示することができます。

カスタムプロファイルフィールドを使用して、トップメニューナビゲーションを表示する場所（無効、 ホームページのみ、サイト全体）を個々のユーザーがカスタマイズすることもできます。

デモビデオ

YouTubeビデオ

デモサイト

https://3-bits.com/demo/adaptable/

スクリーンショット

adaptable-select.png adaptable-front-page.png adaptable-alerts.PNG adaptable-colors.pngを減らす adaptable-fonts.png block-region-builder.png block-region-front-page.png 適応型モバイルソーシャルソーシャル.PNG

ダウンロード

Moodleプラグインデータベースから 。

インストール

  • 必要なバージョンがすべて揃っていることを確認してください。
  • モジュールをダウンロードして解凍します。
  • フォルダ（ "adaptable"）を "theme"サブディレクトリに置きます。
  • インストールを完了するためにhttps://yoursite.com/adminにアクセスしてください。

設定

Adaptableにはたくさんの設定があり、最初は気が遠くなるように思われるかもしれませんが、私たちのアドバイスは単にデフォルト設定でインストールし、その後それで遊ぶことです。

少しの時間で、CSSを知らなくても高度な個性を持った魅力的なMoodleサイトをセットアップできるはずです。

theme = adaptableまたはtheme = cleanをURLに入れることで、あなたのサイトにテーマを設定せずにテーマを設定することができます。 URLによるテーマ変更を許可するを参照してください。

このページのMoodleドキュメントにリンクされるテーマ設定

色

あなたはテーマを通して使用したい色を選択することができます。 16進数の色表記またはその他の標準表記を使用してください。代わりのオプションとして、トランスペアレントを使用し、値として継承することができます。

フォント

テーマ全体で使用したいGoogleフォントを選択できます。必要なサブセットを選択し（ラテン文字が常に含まれます）、正しいフォントの太さを入力すると、フォントは表示されません。

ボタン

このテーマで使用されているボタンの外観を変更します。必要に応じて設定してください。

ヘッダ

  • このテーマのヘッダをカスタマイズします。
  • あなたのファビコン 、ロゴをアップロードし、ヘッダーにログインフォームを設定し、ヘッダーのタイトルを調整します。
  • 「フォント」設定ページでタイトルのフォントサイズとスタイルを設定できます。

ヘッダーメニュー

  • ツールメニュー（ナビゲーションバー内）およびトップメニュー（上部ヘッダー）は、カスタムプロファイルフィールド（オプション）に基づいて制限できます。
  • 制限を追加するには、プロファイルフィールドの名前と期待値を入力します。
  • メニュー構造は一般的なMoodleフォーマットに従います。 
 Moodleコミュニティhttps://moodle.org
 - ムードルフリーサポート| https://moodle.org/support
ムードル開発https://moodle.org/development
--Moodleドキュメントhttps://docs.moodle.org
 - ドイツ語Moodle Docs | https://docs.moodle.org/de
Moodle.com | https://moodle.com/
  • トップメニューの表示設定
    • これらの設定により、メニューの表示場所を制御したり、必要に応じてユーザーが設定をカスタマイズしたりできます。

ヘッダーユーザー

ユーザナビゲーションドロップダウンに表示されるすべての要素を制御できます。

ヘッダーソーシャル

  • サイト全体の検索ボックスを無効にして、代わりにソーシャルアイコン/リンクを有効にすることができます。
  • アイコンを設定するには、下の[ソーシャルアイコンリスト]フィールドに限定リストを入力します。
  • これは次の形式になります。 
 URL |タイトル|アイコン
    • 例えば： 
 http：//localhost/moodle/course/search.php%7CSearch Moodle | fa-search
https://facebook.com/%7CFacebook%7Cfa-facebook-square
https://twitter.com/%7CTwitter%7Cfa-twitter-square
http：//instagram.com%7CInstagram%7Cfa-instagram

ヘッダーナビゲーション

...必要に応じてカスタマイズ...

ヘッダツールメニュー

...必要に応じてカスタマイズ...

ブロック設定

...必要に応じてカスタマイズ...

ブロック領域ビルダー

  • あなたはフロントページでブロック領域のためにあなた自身のレイアウトを構築することができます 。
  • これらの地域にコンテンツを追加するには、Moodleのフロントページで編集を有効にする必要があります。
  • そして、あなたが作成したリージョンにブロックをドラッグ＆ドロップし始めることができます！

コースセクション

...必要に応じてカスタマイズ...

マーケティングブロック

  • 使用できるスタイルが異なる2つの全角情報ボックスがあります。
  • これに加えて、あなたが必要とするブロックの数を決定し、あなた自身のレイアウトを定義することを可能にするレイアウトビルダーがあります。
  • このテーマに付属のREADMEファイルを参照してください。

フロントページ

コースボックスをフロントページに表示する方法を設定します 。

フロントページティッカー

  • ここであなたのMoodleサイトのフロントページを横切るようにニュースティッカーを設定することができます。
  • これは、スライダの邪魔にならない代替手段として意図されており、占有スペースはほとんどありません。
  • ティッカーを設定するには、箇条書きリストを入力し、そのテキストに必要なハイパーリンクを含めるだけです。
  • 注意：あなたは私たちのリストの周りにulタグを置いてはいけません。 Moodles テキストエディタはulタグを追加する傾向があります。
  • ティッカーが正しくロードされない場合は、 HTMLビューに切り替えて、liタグだけがあることを確認してください。 
 < li >お知らせ項目1 ..... </ li >
  < li >ニュース項目2 ..... </ li >

フロントページスライダー

  • 画像をアップロードし、 フロントページにカルーセルのリンクと説明を追加します。
  • スライダーキャプションのサンプルHTML ： 
 < div class = "span6 col-sm-6" >
<H3>ハンド-クラフト</ H3> <H4>ピクセルとのMoodleコミュニティのためのコード</ H4>
<HREF = "＃" クラス = "提出">してください私たちのテーマのお気に入り！</ A>

アラートボックス

  • アラートとしてサイトの上部に表示されるテキストを入力してカスタマイズします。
  • さまざまなユーザータイプをターゲットにして、複数のアラートを設定することができます。
  • サイト全体またはホームページのみにアラートを表示することもできます。

レイアウト

ユーザーに表示されるデフォルトのレイアウトを設定します。

フッター

フッターに表示する内容を設定します

モバイル設定

サイトがモバイルデバイス上でどのように見えるかを制御する

社会的な壁

ソーシャルウォールコースフォーマットの外観をカスタマイズする（あなたのサイトで使用されている場合）

カスタムCSSとJS

ここにあなた自身のCSSとJavaScriptコードをテーマに追加するための様々な設定があります 。

アナリティクス

Google Analytics用に複数のコードを設定し、それらをユーザープロファイルフィールドに割り当てることができます。

BCUからAdaptableへの移行

BCUからAdaptableへの移行に関するアドバイスはこちらにあります。

設定およびブロック領域用のHTMLコード

ここに、情報ボックスとマーケティングブロックをカスタマイズするのに役立つコードサンプルがいくつかあります。

Frontページブロックをカスタマイズするために任意のHTMLタグを挿入できます 。メインコンテナとして<div>を使用し、すべてのブロックで同じ値を維持するように高さを追加します。

Font Awesomeのアイコンセットはhttps://fortawesome.github.io/Font-Awesome/icons/にあります。あなたはそれらのどれでも挿入することができて、そしてhttps://fortawesome.github.io/Font-Awesome/examples/の例に従うことができます


フロントページのスライダースタイル

それぞれ異なるマークアップが必要な2つの可能なスライダースタイルがあります。

オリジナルのBCUスライダーのマークアップ 

 <div class = "span9" >

  <h4 >情報</ h4 >

    Lorem ipsum dolor座ってamet 、 concetetur adipisicing elit 、 sed do eiusmod温度を初期設定します。
    et Dolore magna aliqua。ユタenim広告ミニムveniam、QUISのnostrudのexercitation ullamcoのlaborisのNiSi UTのaliquip
    例えば、商品のコンコート。自信を持ってvelit esse cillum dolore eu fugiat nulla pariaturでの代理店でのDuis自動アイレア色。
  </ div >

  <div class = "span3" >

  <a hrefの= "#"クラス= "submit"> / 14 2013年コース<私のクラスは= "FA-シェブロン右FA"> </ I> </ A>

 </ div >

コベントリースタイルのスライダーマークアップ 

 <div class = "span6 col-sm-6" >
<h3 >手作りの</ h3 > <h4 >ピクセルとMoodleコミュニティ用コード</ h4 >
<aのHREF = "#"クラス= "submit">私たちのカスタムテーマの価格をチェックしてください！</ A>
</ div >

フロントページマーケティングブロックHTML構造コベントリー 

 <div > <img src = "https://somewebsite.com/2.jpg" class = "marketimage" > </ div >
<H4> <aのhref = "#">国際コース</ A> </ H4>
<p >リンクの下にあるテキスト ... </ p >

フロントページ情報ブロック

マーケティングブロックの上下にあるフロントページには、2つの情報ブロックがあります。 pix / layout.pngをご覧ください。


無地の背景とデフォルトの見出しを使用したシンプルなボックス 

 <div style = "text-align：center; background：＃f0f0f0;" >
    <h3 style = "text-align：center;" >ここにテキストを追加してください。</ h3 >
</ div >

純色の背景色、デフォルトの見出しh3、および白のテキスト色のシンプルなボックス 

 <div style = "text-align：center; background：＃009688; color：#ffffff;" >
    <h3 style = "text-align：center;" >ここにテキストを追加してください。</ h3 >
</ div >

フロントページの二次情報ブロックの例

二次情報ブロックに追加のスタイルを適用することができます。 

 <div class = "span2 personpic" >
    <div id = "person" class = "spn5" >
        <img src = "/urltoanimage.jpg" alt = "person" >
    </ div >
</ div >

<div class = "span10" >
    <h4 >スクールオブジュエリー</ h4 >
    Lorem ipsum dolorはamet 、 conittetur adipisicing elit 、およびabidの作業中に作業を開始します。
    最小限の努力で、運動障害を起こさないようにしなければなりません。
    自信を持ってvelit esse cillum dolore eu fugiat nulla pariaturでの代理店でのDuis自動アイレア色。
    <aのHREF = "#"クラス= "submit">詳細はこちら... <Iクラス= "FA-シェブロン右FA"> </ I> </ A>
</ div >

フロントページマーケティングブロックHTML

フロントページには最大12個のマーケティングブロックを追加できます 。ブロックは自動的に行に配置され、行あたり最大4ブロックです。全幅はブロック間で均等に分割されます。

白い背景と素晴らしいフォントアイコンでシンプルなブロック。デフォルトのテキスト色とh3見出しを使用 

 <div style = "text-align：center; background：#ffffff; height：240px; padding：7px;" >
    <i class = "fa fa-font fa-5x" > </ i >
    <h3 style = "color：＃333333;" >タイトル</ h3 >
    <div style = "text-align：center;" >ここにテキストを追加してください。</ div >
</ div >

純色の背景色、白のテキストの色とフォントの素晴らしいアイコンでブロック 

 <div style = "text-align：center; background：＃4b4b4b; color：#ffffff; height：240px; padding：7px;" >
    <i class = "fa fa-th fa-5x" > </ i >
    <h3 style = "color：#ffffff;" >タイトル</ h3 >
    <div style = "text-align：center; padding：5px;" >ここにテキストを追加してください。</ div >
</ div >

無地の背景、白いテキストの色、テキストを縦に揃えてブロックする（幅100％のブロックに便利） 

 <div style = "背景：＃c2185b;高さ：120px;" >
    <h1 style = "行の高さ：120px;色：#ffffff;テキストの整列：中央;" > <b > moodle 3.0対応!!! </ b > </ h1 >
</ div >

フッターブロック

コンタクト

 <Iクラス= "FA FA-建物"> </ I>高セント100 <br>
<span style = "マージン左：20px;" > 123456市> <br </ span>の<br>
<Iクラス= "FA FA-電話"> </ I> + 12（3）456 78 90 <br>
<Iクラス= "FA FA-封筒"> </ I> .COM <br @mailインフォメーション>
<i class = "fa fa-globe" > </ i > www .example .com

シェブロンのリスト

 <ul class = "ブロックリストホワイト" >
    <LI> <aのhref = "https://moodle.org/"> <スパンクラス= "アイコンを右オープンミニ"> </ span>の<スパン>アクセシビリティ</ span>を</ A> </李>
    <LI> <aのhref = "https://moodle.org/"> <スパンクラス= "アイコンを右オープンミニ"> </ span>の<スパン> Moodleのヘルプ</ span>を</ A> < / li >
    <LI> <aのhref = "https://moodle.org/"> <スパンクラス= "アイコンを右オープンミニ"> </ span>の<スパン> Moodleのフィードバック</ span>に</ A> < / li >
    <LI> <aのhref = "https://moodle.org/"> <スパンクラス= "アイコンを右オープンミニ"> </ span>の<span>のITは</ span>を</ A> <ヘルプ/ li >
    <LI>の<aのhref = "https://moodle.org/"> <スパンクラス= "アイコンを右オープンミニ"> </ span>の<スパン> ITフィードバック</ span>を</ A> < / li >
</ ul >
</ nowiki >

クレジット

サポート

購読しているサポートスレッドに質問を投稿してください。

直接支援はしておりません

関連情報

https://bitbucket.org/covuni/moodle-theme_adaptableの作者用ドキュメントページ

" https://docs.moodle.org/35/en/index.php?title=Adaptable_theme&oldid=123974 "より作成