DISCOVER Build your web site, collaborate with your colleagues, manage your content, and more. DEVELOP Build applications that run inside Liferay, extend the features provided out of the box with Liferay's APIs. DISTRIBUTE Let the world know about your app by publishing it in Liferay's marketplace. PARTICIPATE Become a part of Liferay's community, meet other Liferay users, and get involved in the open source project.

Wiki

« Retour - テーマの概要

色

Détails

Imprimer

Étiquettes: theme color schemes

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　小沢仁
色はCSSクラス名で指定します。色だけではなく背景の画像や枠色などの指定もできます。

liferay-look-and-feel.xmlに以下のように色の設定ができます：

<theme id="deep-blue" name="Deep Blue">
    <settings>
        <setting key="my-setting" value="my-value" />
    </settings>
    <color-scheme id="01" name="Day">
        <css-class>day</css-class>
        <color-scheme-images-path>${images-path}/color_schemes/${css-class}</color-scheme-images-path>
    </color-scheme>
    <color-scheme id="02" name="Night">
        <css-class>night</css-class>
    </color-scheme>
</theme>

_diffs/cssフォルダ内に、フォルダ「color_schemes」を作成して、カラースキーマ毎の.cssファイルを作成してください。

上の例では、ファイル「night.css」を作成して、最初のカラースキーマ用にday.cssも作成することもできますが、作成せずにデフォルトのスタイルを利用することもできます。

day.cssとnight.cssを作成する場合は、custom.cssファイルの最後に以下の行を追加します：

@import url(color_schemes/day.css);
@import url(color_schemes/night.css);

カラースキーマCSSクラスは<body>タグに記述します。day.cssはCSSスタイルの接頭辞を以下のようにします：

body.day { background-color: #ddf; }
.day a { color: #66a; }

night.cssのCSSスタイルの接頭辞は以下のようにします：

body.night { background-color: #447; color: #777; }
.night a { color: #bbd; }

カラースキーマごとにサムネイルを作成することもできます。<color-scheme-images-path>タグにサムネイルの画像のフォルダを指定します。大きさについてはサムネイルを参照してください。

上の例用のサムネイルを作成する場合は、フォルダ「_diffs/images/color_schemes/day」とフォルダ「_diffs/images/color_schemes/night」を作成し、各フォルダにthumbnail.pngとscreenshot.pngファイルを作成します。

0 Pièces jointes

21589 vues

Moyenne (0 Voter)

Commentaires