テーマの配色の作成

テーマの配色の作成

ご覧のページは、お客様の利便性のために一部機械翻訳されています。また、ドキュメントは頻繁に更新が加えられており、翻訳は未完成の部分が含まれることをご了承ください。最新情報は都度公開されておりますため、必ず英語版をご参照ください。翻訳に問題がある場合は、こちらまでご連絡ください。

カラースキームは、テーマに追加のカラーパレットを提供します。 テーマのCSSを少し変更するだけで済みます。 これは、同じデザインと雰囲気を維持しながら、テーマの外観を微妙に変更する簡単な方法です。

テーマの配色を作成するには、次の手順に従います。

  1. テーマの css フォルダーにカラースキーム(たとえばcolor_schemes )を保持するフォルダーを作成し、テーマがサポートするカラースキームごとに .scss ファイルを追加します。

  2. CSSクラスを選択して各配色を識別し、配色のスタイルでこのクラスを指定します。 配色の名前は良い選択です。 このクラスは、サイトのに追加されます <body> カラースキームが適用されたとき、あなたがして、要素 必見 作品にそれらのためのカラースキームのスタイルでこのクラスを指定します。 たとえば、 _day.scssという名前の配色CSSファイルに .day を指定できます`

 body.day { background-color: #DDF; }
 .day a { color: #66A; }
`
| **注:** デフォルトの配色では、テーマの `_custom.scss` を使用します。スタイルを設定するため、スタイルで名前を指定する必要はありません。</li>

3

カラースキーム .scss ファイルをテーマの _custom.scss ファイルにインポートします。 以下の例では、 _day.scss および _night.scss ファイルをインポートします。

   @import "color_schemes/day";
   @import "color_schemes/night";

4

テーマの 画像 フォルダーに各配色のフォルダーを作成し、各配色のサムネイルプレビュー を追加します

。 フォルダ名 は、手順2で指定した配色のCSSクラス名と に一致する必要があります。

5 テーマの liferay-look-and-feel.xml ファイルを開き、以下のパターンに従ってデフォルトのカラースキームを追加します。 ユーザーが別の配色を選択した後、テーマのデフォルトのルックアンドフィールに戻ることができるように、デフォルトの配色が必要です。 注配色のこと 値は任意であるが、 <css-class> 要素の値 一致しなければならない 手順2で指定されたCSSクラス。 デフォルトの配色スタイルがテーマの _custom.scss ファイルにある場合、 <css-class>``デフォルト を使用します。 <color-scheme-images-path> 要素が含まれていることにも注意してください。 これは、テーマのサムネイル画像の場所を指定します。 この要素を最初の配色に配置して、すべての配色の画像パスを構成します。 本当 デフォルト $/ my_color_schemes_folder_name /$

| **Note:** Color schemes are sorted alphabetically by `name` rather than `id`. | For example, a color scheme named `Clouds` and `id` `02` would be selected | by default over a color scheme named `Day` with `id` `01`. The | `<default-cs>` element overrides the alphabetical sorting and sets the color | scheme that is selected by default when the theme is chosen.
  1. 次のパターンを使用して、デフォルトの配色の下に残りの配色を追加します。

    <color-scheme id="id-number" name="Color Scheme Name">
       <css-class>color-scheme-css-class</css-class>
    </color-scheme>
    

liferay-look-and-feel.xml ファイルの例を以下に示します。

<look-and-feel>
    <compatibility>
        <version>7.1.0+</version>
    </compatibility>
    <theme id="my-liferay-theme" name="My Liferay Theme">
        <template-extension>ftl</template-extension>
        <color-scheme id="01" name="Default">
            <default-cs>true</default-cs>
            <css-class>default</css-class>
            <color-scheme-images-path>
                ${images-path}/color_schemes/${css-class}
            </color-scheme-images-path>
        </color-scheme>
        <color-scheme id="02" name="Red">
            <css-class>red</css-class>
        </color-scheme>
        <color-scheme id="03" name="Green">
            <css-class>green</css-class>
        </color-scheme>
    </theme>
</look-and-feel>

図1:カラースキームにより、管理者はテーマの外観を選択できます。

そこにあります。 今、あなたはあなたのテーマで狂気の配色をすることができます!

関連トピック

レイアウトテンプレートの作成

テーマのサムネイルプレビューを作成する

この記事は役に立ちましたか?
0人中0人がこの記事が役に立ったと言っています