テーマ19.04のカスタマイズ

Bootstrap 4へのアップグレード

Mahara 19.04では、MaharaはBootstrap 4に切り替えています。 これは、2015年10月のバージョンであるMahara 15.10以降、Maharaで使用されている人気のCSSフレームワークの最新版です。

Bootstrapチームは、フレームワークに広範囲にわたる変更を加え、切り替えを行うすべての人に影響を与えました。 このガイドでは、Bootstrap 3からBootstrap 4への移行を可能な限り簡単にするために役立つ情報を提供します。 カスタムテーマを作成するには、三つの一般的な方法があります。

  1. Maharaコアテーマの一つをコピーし、ロゴ、フォント、および色の値だけを調整します。
  2. 組み込みのMaharaテーマの一つの子テーマとしてカスタムテーマを作成し、ロゴ、フォント、および色の値だけを変更します。
  3. よりカスタムなテーマを作成し、広範囲に渡る変更を加えます。

オプション1と2で作成したテーマは、オプション3で作成したテーマよりもはるかに簡単にアップグレードできます。

このガイドは、オプション1と2を操作するSASSの基本的な知識があることを前提としています。オプション3は、経験豊富なフロントエンド開発者向けです。

オプション1:テーマをコピーする

注1:結果のテーマにすべてのファイルがあるため、このオプションが最も簡単ですが、維持するのはより困難です。 コピーした元のテーマに変更を加えても、テーマには反映されません。 これらの変更は自分で行う必要があります。 "Raw"で直接行われた変更だけが継承されます。

注2:/theme/raw/libフォルダの内容は変更しないでください。

現在のバージョンのMaharaで、既存のMaharaコアテーマの一つ(Default、Modern、Ocean、またはPrimary School)をコピーし、ロゴ、フォント、および色調整だけを変更した場合、次の手順を実行できます。

  1. Mahara 19.04にアップグレードします。
  2. 調整するテーマをコピーします。
  3. /theme/<your theme folder>/themeconfig.phpで、別の"displayname"を選択します。
  4. /theme/<your theme folder>/sass/utilities/_theme-variables.scssの変数値を変更します。
  5. /theme/<your theme folder>/sass/utilities/_theme-variables.scssの変数値を変更します。
  6. /theme/<your theme folder>/sass/utilities/_bootstrap-variables.scssの変数値、特に別の色を使用する場合はリンクの色とフォントを確認します。
  7. 必要に応じてその他の調整を行います。
  8. Gulp経由でテーマをコンパイルします。
  9. テーマをプレビューし、必要に応じて変更を加えます。

オプション2:組み込みのMaharaテーマから基本的なテーマを作成し、色を変更するだけ

インスティテューションで利用できる設定可能なテーマに沿って非常に基本的なテーマを作成する場合は、組み込みのMaharaテーマから子テーマを作成し、色の値を変更できます。

注:フォルダ/theme/raw/lib内の何も変更しないでください。

  1. Mahara 19.04にアップグレードします。
  2. "subthemestarter"フォルダをコピーして、新しい名前を付けます。フォルダ名にはスペースや特殊文字を使用しないでください。
  3. ファイル/theme/<your theme folder>/themeconfig.phpを開き、変数"displayname"でテーマに人間が読める名前を付けます。必要に応じて、スペースと特殊文字を使用できます。
  4. 親テーマが"Default"、"Modern"、"Primary School"、または"Ocean"の場合は、ファイル/utilities/style.scssの「親テーマがサブテーマである場合、たとえばModern...」というコメントの下にあるインポート行のコメントを外します。親テーマが"Raw"の場合、これを行う必要はありません。
  5. /theme/<your theme folder>/sass/utilities/_theme-variables.scssに変更を加えます。親テーマに基づいて、追加のテーマ変数を追加する必要がある場合があります。
    1. 親テーマの"_theme-variables.scss/"ファイルを開きます。
    2. すべての変数をファイルにコピーして、欠落がないようにします。
    3. 変数の色を変更します。
  6. 親テーマから画像フォルダをコピーする必要がある場合があります。
  7. 親テーマのフォントを使用する場合は、"fonts"フォルダを子テーマフォルダにコピーします。
  8. Gulp経由でテーマをコンパイルします。
  9. Maharaサイト管理インタフェースからロゴをアップロードします。
  10. テーマをプレビューし、追加の調整を行います。

注:以前にその方法でテーマを既に作成している場合は、このメソッドを使用できるはずです。既存のテーマフォルダをコピーするのではなく、/theme/<your theme folder>/themeconfig.phpおよび/theme//sass/utilities/_theme-variables.scssの変数だけをコピーします。

その他の変更を行う場合は、さらに調整を行う必要があり、スタイルを適切に使用したり上書きしたりできるように、親テーマからより多くのフォルダとファイルをコピーする必要がある場合があります。 subthemestarterテーマキットは、すべてのテーマで共有される共通の基盤を提供します。SASSの知識があれば、あらゆる種類のカスタマイズを行って、完全にカスタムのテーマを作成できます。

オプション3:カスタムテーマ

ここでの情報は、Maharaの最近サポートされているバージョン(例:17.10以降。古いバージョンを使用している場合は、変更する必要のある追加の要素がいくつかあるか、最初からやり直す方が簡単な場合があります。 高度にカスタマイズされたMaharaテーマは、カスタマイズのレベルによっては追加の変更が必要になる場合があります。

注:フォルダ/theme/raw/lib内の何も変更しないでください。

Maharaをインストールする

Mahara master codebase /19.04ブランチが利用可能になったらインストールし、Gulpを実行してテーマをコンパイルします。

ほとんどの場合、"Default"または"Raw"またはテーマのコピーを最初からコピーする場合にだけ必要です

"Default"または"Raw"のテーマをコピーして、カスタムテーマの内容を変更した場合、または独自のカスタムテーマを最初から作成した場合にのみ、この手順が必要になる可能性があります。

注:行の高さの値は計算でよく使用されるため、変更しないでください。

@import行を追加

/theme/<your theme folder>/sass/style.scssで、bootstrap-variablesインポートの真上に次の行を追加します(おそらく14行目):@import"../../raw/sass/utilities/bootstrap-variables.css";

つまり、"Raw"テーマの値は常に最初に定義され、他の変数ファイルで値を複製する必要はありません。

bootstrap-variables.scssのすべての変数を処理する

/theme/<your theme folder>/sass/utilities/_の変数を操作し、Bootstrap 4変数と一致しない変数名を/theme/<your theme folder>/sass/utilities/_custom-variables.scssに移動します。

注:ブートストラップ変数ファイルを使用して変数を見つけ、"Default"のテーマ変数をガイドとして使用してください。

ファイルには約20個の変数しか残っていない可能性があります。次の手順でそれらを最も簡単に確認できます。

  1. 安全のために、残りのすべての変数を/theme/<your theme folder>/sass/utilities/_bootstrap-variables.scssから/theme/<your theme folder>/sass/utilities/_custom-variables.scssに移動します。
  2. /theme/<your theme folder>/sass/utilities/_custom-variables.scssに移動し、bootstrap-variables.scssの"Raw"テーマバージョンにあるすべての変数を検索します。
  3. 名前が少し変わった変数がいくつかあります。「Bootstrap 3からBootstrap 4への変換」にリストがあります。残りのcustom-variables.scssファイルにこれらのBootstrap 3変数のいずれかがある場合、それらを同等のBootstrap 4に置き換えます。
  4. htdocs/theme/yourtheme/sassサブディレクトリ全体で、custom-variables.scss内のすべての変数を検索します。変数がどこでも使用されていない場合は、削除します。

検索と置換

/theme/<your theme folder>/sassフォルダ内を検索して置き換えます。

メディアブレークポイントを変更する

メディアブレークポイントを変更します。 "@media(min-width: $screen-sm-min)"が"@include media-breakpoint-up (sm)"に変更されました。新しいブレークポイントのマップについては、/theme/raw/sass/utilities/_bootstrap-variables.scssを参照してください。

scale-colorを使用

すべての暗くて明るい色の値は「スケールカラー」に変更されました。darkenおよびlightenの値は引き続き機能します。これらの残りすべての値について、時間の経過に応じてスケールカラーに移行しています。

注:Darkenlightenの値は、Bootstrapコアコードにまだあり、変更しません。

残っている問題を修正する

この時点で、Gulpはコンパイル中で、すべての変数は適切なファイルにあるはずです。これで、Maharaページの作業を開始し、見つかった問題を修正できます。最初に開始するのに適した場所は、ナビゲーション、続いてダッシュボードです。

注:/theme/styleguide.phpのスタイルガイドは、一つの中心的な場所でスタイルを使用するため、主要な変更の概要を示しています。

このステップでは、比較可能なマスターを使用して2番目のインスタンスをセットアップすると役立ちます。あるいは、すべてのページが同じになるわけではありませんが、demo.mahara.orgを使用することもできます。可能な場合は変数を使用してください。テーマディレクトリにあるBootstrap 4を上書きすることを恐れないでください。

一般的注意事項

ナビゲーションの新しい変数と変更された変数

新しい/変更された変数とその値は、メインナビゲーションと第3レベルのナビゲーション、つまり「矢印バー」で使用されている場所を示します。

ナビゲーションバー

  1. $navbar-default-color - ナビゲーションバーのテキストの色
  2. $navbar-default-bg - ナビゲーションバーの背景色
  3. $navbar-default-border - ナビゲーションバーの境界線の色
  4. $navbar-default-link-color - ナビゲーションバーボタンのテキストの色
  5. $navbar-default-link-bg - ナビゲーションバーボタンのテキストの背景色

メインナビゲーションバーのホバー

  1. $navbar-default-link-hover-color - ホバー時のメニューボタンテキストの色
  2. $navbar-default-link-hover-bg - ホバー時のメニューボタンの背景色
  3. $navbar-default-active-color - アクティブなときのメニューボタンの色
  4. $navbar-default-active-bg - アクティブなときのメニューボタンの背景色

メインナビゲーションメニュー

  1. $navbar-inverse-bg - サブメニューのテキストの色
  2. $navbar-inverse-link-color - サブメニューのメニュー項目の背景色
  3. $navbar-inverse-link-hover-color - サブメニューのホバー時のテキストの色
  4. $navbar-inverse-link-hover-bg - ホバー時のサブメニューのメニュー項目の背景色
  5. $navbar-inverse-link-active-color - アクティブ時のサブメニューのメニュー項目のテキストの色
  6. $navbar-inverse-link-active-bg - アクティブなときのサブメニュー項目の背景色

メインナビゲーションメニューのホバー

  1. $navbar-inverse-toggle-color - 標準のトグルアイコン、シェブロンの色
  2. $navbar-inverse-toggle-bg - 標準のトグルアイコンの背景色
  3. $navbar-inverse-toggle-hover-color - ホバー時のトグルアイコンの色
  4. $navbar-inverse-toggle-hover-bg - ホバー時のトグルアイコンの背景色
  5. $navbar-inverse-toggle-active-color - アクティブ時のトグルアイコンの色
  6. $navbar-inverse-toggle-active-bg - アクティブ時のトグルアイコンの背景色

矢印バーナビゲーション

  1. $arrow-color - 矢印バーのメインカラー
  2. $arrow-bar-bg - 矢印バーで使用される明るい色合い
  3. $arrow-text-color - 矢印バーのテキストの色
  4. $arrow-link-color - 矢印バーのリンクの色
  5. $arrow-link-hover-color - 矢印バーのホバー時のテキストの色
  6. $arrow-link-active-color - 矢印バーでアクティブになっているときのテキストの色
  7. $arrow-link-background-color - ホバー時および矢印バーでアクティブなときのテキストの背景色