重要なテーマのヒント
Essentialは、Moodle 2.5用のブートストラップに基づいてJulian(Moodleman)Riddenによって書かれたMoodle用の3列のレスポンシブテーマです。これは、よりプロフェッショナルでクリーンなWebサイトに焦点を当てた外観を提供するように設計されています。
このページでは、ニーズに合わせてテーマをカスタマイズするために使用できるいくつかの高度なテクニックについて概説します。
このテーマの詳細については、必ずメインテーマのドキュメントをご覧ください。
内容
HTMLブロックのアイコンを変更する
ブロックのカスタムクラス名を有効にする
あなたは、あなたのMoodleインストールで最初にこの機能を有効にする必要があります。管理者としてログインして、にアクセスしてください。
- サイト管理>プラグイン>ブロック> HTML
ここでオプションを有効にする必要があります。
- 追加のCSSクラスを許可する
有効にすると、HTMLブロックにカスタムクラス名を追加できます。これは、それらを個別に識別してカスタムアイコンを配置できるようにするために必要です。
カスタムクラス名でHTMLブロックを作成する
HTMLブロックを作成するとき(または実際にアイコンを変更したいということであれば)、ここで選択したクラス名を指定します。この例では、 "customtest"という名前を使用しています
ご希望のアイコンのUnicodeを見つけてください
https://fortawesome.github.io/Font-Awesome/cheatsheet/にあるチートシートを使用してください 。これはあなたの希望するアイコンを生成するために私達のCSSに挿入するのに必要とされるでしょう。私は最近笑顔で私のモニターの隣にこれを印刷しておきます。
基本設定にカスタムCSSを追加する
Essentialテーマの「一般設定」の下に、次のカスタムCSSを追加できます。私たちが使用しているカスタムクラス名を緑色で強調表示し、地球アイコンのユニコードを赤色で強調表示していることに注意してください。
以下のようにフォーマットされていることを確認してください。必要に応じてコピーして貼り付けます。
<span style = "color:green;">カスタムテスト</span> .header .title h2:before { 内容: "\ <span style ="色:赤; "> f0ac </span>"; }
これらの手順を正しく実行した場合、保存をクリックすると、ブロックに新しいアイコンが表示されるはずです。