テーマのカスタマイズ #

概要 #

Liferayのテーマを変更する場合は、標準のLiferayのテーマとの差分を記述します。

以下の「deep blue」（濃い青）テーマ用ファイルのフォルダ構造です：

/deep-blue-theme/
    /docroot/
        /WEB-INF/
            liferay-plugin-package.properties
        /_diffs/ (標準ではサブフォルダは作成されていません)
            /css/
            /images/
            /js/
            /templates/
        /css/
            application.css
            base.css
            custom.css
            dockbar.css
            extras.css
            forms.css
            layout.css
            main.css
            navigation.css
            portlet.css
        /images/
            (複数のフォルダ)
        /js/
            main.js
        /templates/
            init_custom.vm
            navigation.vm
            portal_normal.vm
            portal_pop_up.vm

            portlet.vm

docrootフォルダ下の「_diffs」フォルダに注目してください。テーマを変更する場合は、標準であるファイルを変更せずに、標準のフォルダ構成を真似して変更するファイルをこのフォルダに置きます。

docrootフォルダの下にテーマをデプロイした時にLiferayから複写されたフォルダ／ファイルもあります。これらを元にして変更用のファイルを作成します。例えばナビゲーションを変更する場合は先ず、_diffsフォルダ下にtemplatesフォルダを作成して、templates/navigation.vmを_diffs/templatesに複写します。次の複写した_diffs/templates/navigation.vmを変更します。

スタイルを変更する場合は、_diffsフォルダ下にフォルダcssを作成して、custom.cssファイルを作成します。このファイルに新しいスタイル及び上書きするスタイルを定義します。このファイルはLiferay標準のスタイルシートが読み込まれた後に読み込まれ、スタイルを上書きします。

テーマを変更する場合はできる限りcustom.cssで行い、テンプレートを上書きすしないようにすることを推奨します。custom.cssの場合だと、Liferayをリビジョンアップ／バージョンアップする場合は、Liferay本体を入れ替えるだけで、テンプレートを書きかえる必要がありません。

テーマを変更した場合は、変更したテーマのフォルダ（例：themes/deep-blue-theme）にコマンドプロンプトを開き、「ant deploy」を実行すると、テーマがデプロイされます。Webブラウザを更新すると、変更が反映されます。

ヒント：変更を直ぐに見たい場合は、Liferay本体のテーマを修正することも可能です。例えば、liferay-portal-{バージョン}/tomcat-{バージョン}/webapps/deep-blue-theme/css/custom.cssを直接修正することができます。ただし、Webブラウザで変更を表示させるには開発者モードの設定が必要です。また、次回にテーマをデプロイした場合に修正を反映させるためには、修正したファイルを_diffsフォルダに複写してください。