­

RSJoomla テンプレートで配色を増やすにはどうしたらよいでしょう。

私たちの Joomla! のテンプレート に付属している既定の配色セットは、本当によくあなたが心の内に持っている方向性とは合っていないのですか? あなた自身の配色を実装する方法を学ぶためにこの記事を読んでください。

テンプレートのスタイルシートには、配色の設定が含まれていません。色のスタイリングは、個別のスタイルシートで行われます。これらのスタイルシートはここで見つけることができます(記事では例として RSPenta! を使用しますが、私たちの Joomla! テンプレート はすべて同じ手順で変更できます)。

ルートフォルダ/templates/rspenta/css/theme

このフォルダにはいろいろなファイルが入っていますね。それぞれのファイルには説明的な名前がついています。例: blue_black.css

どのように Joomla! は適切なスタイルシートをロードするのでしょうか? それは単純で Joomla! のテンプレート には、テンプレートのオプション/パラメータを処理する XML ファイルがあり、ここで見つけることができます。

ルートフォルダ/templates/rspenta/templateDetails.xml

何が必要なの?


始めるにあたって必要なものは以下のとおり:

  • 基本的な CSS の知識 - この ウェブサイト に多くの情報が掲載されています。
  • コードエディタ - 私は Notepad++ をお勧めします;
  • FTP クライアント - FileZilla はあなたが使える良い FTP クライアントだと思います。

どのようにするの?


最も簡単な方法は、既存のスタイルシートを利用することです。テーマフォルダ(ルートフォルダ/templates/rspenta/css/theme) に移動し、テーマの 1 つをコピーして (この例では blue_black を参考にします)、別の名前 — magenta_black.css としましょう — で貼り付けてください。

新しいスタイルシート(magenta_black.css) を開き、(この場合は #0f8bb4;) の色を マゼンタ(例 #D51D55) に変更します。

注意

色を取得する最も簡単な方法は droplist.css(ルートフォルダ/templates/rspenta/css/theme) スタイルシートから取得することですが、第 1 色は常に :before に、第 2 色は :after セレクタにあります。

[class*="dd-color-"].blue_black:before {
  background-color: #0f8bb4;
}
[class*="dd-color-"].blue_black:after {
  background-color: #000000;
}

これは、スタイルシートウィンドウ(Notepad++ の場合)で CTRL + H を使用して #0f8bb4#D51D55 に簡単にで置き換えることがきます。

色の濃淡 (透明な背景の場合は RGBA カラーも) が使用されているので、それらも同じように変更してください。

色の追加が終わったら(たぶん、後で調整のためにこのステップに戻ってくると思います)、テンプレートオプションとして追加しましょう。

ルートフォルダ/templates/rspenta/templateDetails.xml を編集します。

106 行目あたりにこれがあるはずです。

<field name="templateTheme" ... >

他のオプションと同じ構文で新しい配色をリストに追加します。

<option value="magenta_black">Magenta Black</option>

オプションは追加したものの、現時点でテンプレートマネージャの配色設定を見てみると白い長方形が 2 つ表示されているだけです。これを修正するには droplist.css ファイルのスタイルシートの一番下の方 — Before End Theme Colors — のところに以下のようにテンプレートの色を追加する必要があります。

[class*="dd-color-"].magenta_black:before {
  background-color: #D51D55;
}
[class*="dd-color-"].magenta_black:after {
  background-color: #000000;
}

新しいテーマの選択


あなたの新しい配色がリストに表示されるはずです。最後のものを選択して '保存' をクリックします。上記の手順を踏めば、あなたのウェブサイトの画面はスタイルシートで使用した色と一致しているはずです。新しいテーマを試してみましょう。あなたの Joomla! サイトの管理パネルにログインして、テンプレートマネージャ > RSPenta! > 詳細タブ > 配色 へ移動します。

追記事項:

あなたがテンプレートを更新すると、これらのファイルは上書きされることに注意してください。私たちはバックアップを取ることをお勧めします。あなたが作ったファイルを失ってしまわないように。

テンプレートの新しい配色を選ぶ際は以下のウェブサイトが参考になるでしょう: Color CombosColor Lovers

この記事は 2015 年に書かれた RSJoomla 公式サイトのブログ の抄訳です。

­