PrimeFacesのテーマは、jQuery UIのThemeRollerで作成します。
ThemeRoller | jQuery UI
バージョンはとりあえず1.10.0で。
ダウンロードでは、コンポーネントはダウンロードする必要がないので、「Components」の「Toggle All」のチェックをはずしておくといいです。
「Theme Folder Name」を「primefaces-テーマ名」という名前にしておくと捗ります。たとえばmythemeというテーマ名にするなら「primefaces-mytheme」という名前にします。
で、ドキュメントには、ここからダウンロードしたものをjarに固めてクラスパスに通せとか書いてあるのだけど、テーマを使いまわさないのであれば、そこまでする必要はありません。
ダウンロードして展開すると「css」フォルダにテーマ名のフォルダがあるので、これをWebドキュメントルートのresourcesというフォルダに「primefaces-テーマ名」という名前でコピーします。ダウンロード時にテーマ名を設定しておけば、そのままコピーするだけになります。
テーマフォルダには「jquery-ui-1.10.0.custom.css」と「jquery-ui-1.10.0.custom.min.css」がありますが、好みのほうを「theme.css」という名前にして、もう片方は消します。
CSSファイルの中で画像URLを指定している部分はJSFリソースを使うように変更する必要があります。
これには、次の２つの全置換を行えばいいです。
「url(images」→「url("#{resource['primefaces-mytheme:images」
「.png)」→「.png']}")」
2013/3/13追記
タブの初期表示がおかしくなるので、ui-tabs-panelのdisplay部分をコメントアウトします。
.ui-tabs .ui-tabs-panel { /* display: block; */ border-width: 0; padding: 1em 1.4em; background: none; }
http://d.hatena.ne.jp/nowokay/20130313#1363174744
最後に、次のようにテーマを指定するパラメータをweb.xmlに追加します。
<context-param> <param-name>primefaces.THEME</param-name> <param-value>mytheme</param-value> </context-param>
以上でテーマが反映されるはずです。
テーマを修正するときには、CSSファイルの先頭にパラメータが埋め込まれたURLが記載されているので、このURLから修正します。
