標準テーマ

メインページ ►Moodleサイトの管理 ► サイトのアピアランス ► テーマ ► 標準テーマ
テーマ


標準テーマ

Moodleは3つの標準的なテーマがありますBoost （以降3.2）を、 Clean 、responsiveは、ベースのテーマ、およびブートストラップより 、管理インターフェイス内からカスタマイズ可能なテーマを。

'Clean'

以前のバージョンのMoodleで標準的だったテーマを含む他のテーマは、Moodleプラグインディレクトリのテーマセクションから入手できます。

カスタマイズされたBoostテーマの例

SchoolDemoBoost.png

Moodle SchoolのデモサイトであるMount Orangeは 、以下のようにカスタマイズされた標準のBoostを使用しています。

  • フロントページの画像と背景画像をアップロードしてコードで参照する必要があります。
  • フロントページのトピックセクション： 
 < div class = "frontpage container-fluid" >

    < div class = "jumbotron jumbotron流体" style = "background-image：url（ 'あなたのアップロードしたフロントページIMAGE.jpg'）;"; >
        < div class = "texts" >
            < h2 >あなたの見出し</ h2 >
            < p class = "lead" >文/タグライン</ p >
        </ div >
    </ div >

    < div class = "row-fluid" >
        < div class = "fp-block col-md-6" >
            < h3 >小さい方の見出し</ h3 >
            < p >本文の段落</ p >
            <P クラス = "ボタン"> < クラス = "BTN BTN-主"のhref = "BUTTONリンクURL">ボタンのテキスト»</ A> </ P>
        </ div >
        < div class = "fp-block col-md-6" >
            < h3 >小さい方の見出し</ h3 >
            < p >本文の段落。</ p >
            <P クラス = "ボタン"> < クラス = "BTN BTN-主"のhref = "BUTTONリンクURL">ボタンのテキスト»</ A> </ P>
        </ div >
    </ div >

</ div >

*Boostテーマの詳細設定 - 生の初期SCSS： 

 $ brand - primary ： ＃0070a8;
 $ボディ -カラー： ＃336;
 $ font - family - sans - serif ： "Helvetica Neue" 、 Helvetica 、 Arial 、 sans - serif ;
$ breadcrumb - bg ： #fff;

*Boostテーマの詳細設定 - Raw SCSS： 

ボディー{
    background - image ： url （ "あなたのアップロードされた背景画像IMAGE.png" ） ;
    背景-サイズ：カバー;
    背景-リピート：なしを-繰り返し。
    背景-添付ファイル：固定。
    手紙-間隔：。 3px;
}
h1 、 h2 、 h3 、 h4 、 h5 、 h6 {
    カラー： ＃f98012。
フォント-重さ：通常;
}
。ナビゲーションバー-ブランド{
    表示：なし。
}
＃nav-drawer {
背景-色：RGBA（236、238、239、0.9）。
}
＃page-header.row {
余白-左： - 30ピクセル。
    マージン-右： - 30px 。
}
＃page-header .card {
背景-色：透明;
    国境：なし。
    マージン-ボトム： 0 。
}
＃page-header h1 { 
色： #fff;
フォント-重さ：500;
    テキスト-シャドウ：0PX 1ピクセルの1ピクセルのRGBA（0、0、0、0.2）。 
}
＃page-header .breadcrumb {
パディング： 。 50rem 1rem 。
}
。ブロック-地域。カード-ブロック。カード-タイトル{
    カラー： ＃f98012。
フォント-サイズ：1。 07レム。
    フォント-重さ：400;
}
＃ページフッターa {
カラー： ＃f98012。
 }
＃page-site-index＃ページヘッダ{
表示：なし。
}
＃page-site-index＃地域メイン.card.card-block {
パディング： ０ 。
    ボーダー： 0 。
    背景-色：透明;
}
＃page-site-index＃ブロック領域サイドプレ{
マージン-トップ：15ピクセル;
}
＃page-site-index .label {
パディング： ０ 。
}
＃page-site-index .activity> div {
パディング： ０ 。
}
＃page-site-index。mod  - インデント - 外側{
パディング-左： 0 。
}
＃page-site-index .contentwithoutlink {
パディング-右： 0 。
}
。フロントページ。コンテナ-流体{
    パディング： ０ 。
}
。フロントページ。ジャンボトロン{
    パディング： ０ 。
    国境-半径：0;
    背景：透明いいえ-右下/表紙を繰り返します。
    行-高さ：250ピクセル;
}
。フロントページ。ジャンボトロン。テキスト{
    色： #fff;
手紙-間隔：。 5pxの;
    背景-色：RGBA（255、99、0、0.70）。
    パディング： 0 20ピクセル。
    マージン-ボトム： 20px 。
    display ：インライン-ブロック;
    垂直- ALIGN：ボトム。
}
。フロントページ。ジャンボトロンh2 {
    色： #fff;
フォント-サイズ：32PX;
    フォント-重さ：300;
    テキスト-影：1pxの1pxの＃444 1ピクセル。
マージン-ボトム： 0 。
    マージン-トップ：10pxの;
}
。フロントページ。ジャンボトロン。リード{
    テキスト-影： 1px 1px 1px ＃333;
行-高さ：30px;
    フォント-サイズ：21px;
}
。フロントページ。行-流体{
    行-高さ：は24px;
    背景-色：#FFF;
パディング： 10px 20px 20px 。
    ボックス-サイズ：ボーダー-ボックス。
}
。フロントページ。 row - fluid :: after {
    表示：テーブル。
    内容： "" ;
    クリア：両方;
    行-高さ：0;
}
。フロントページ。 fp - block {
    パディング： 10px 20px 0 。
}
。フロントページh3 {
    フォント-サイズ：26px;
    行-高さ：30px;
    フォント-重さ：300;
    マージン-トップ：20ピクセル;
    マージン-ボトム： 20px 。
}
。フロントページ。ボタン{
    テキスト-整列：右;
}
。空-地域-サイド-プレ。空-地域-サイド-ポスト＃region-main-box、
 。空-地域-サイド-プレ。空-地域-サイド-ポスト＃region-main {
幅： 100 ％。
}

＃settingsnav.box.block_tree_box.py-1 {
パディング-トップ： 0 ！重要です。
}

テーマセレクタ

管理者は、 管理>サイト管理>アピアランス>テーマ>テーマセレクタでサイトのテーマを設定できます。

デフォルト、レガシー（古いブラウザ用）、モバイル、タブレットなど、さまざまなテーマを「デバイスタイプ」に応じて設定できます。

「 管理」>「サイト管理」>「アピアランス」>「テーマ」>「テーマセレクタ」に移動します。

  • 変更したいタイプの横にある[テーマを選択]ボタンをクリックします。
  • 利用可能なテーマのプレビューを見るためにスクロールして、テーマを選ぶために「テーマを使う」ボタンをクリックしてください
  • 次の画面はテーマに関する情報を提供します。 「続ける」をクリック

注意1：Moodleはテーマをキャッシュしているため、変更した設定がすぐに表示されない場合は、テーマセレクタページの上部にある[テーマキャッシュをクリアする]ボタンをクリックしてください。

注意2： テーマ設定でユーザー/コースまたはカテゴリのテーマが許可されている場合は、選択したテーマが上書きされることがあります 。

関連情報

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