web-dev-qa-db-ja.com

Primefacesコンポーネントからすべてのスタイリングを削除しますか？

Primefacesコンポーネントからすべてのスタイリングを削除することは可能ですか？つまり、コンポーネントセットは適切ですが、コンポーネントスタイルをアプリケーションの全体的なデザインに適合させるために、各コンポーネントのすべての小さなビットを手動でオーバーライドする必要があるのは適切ではありません。 Firebugを使用して、使用しているクラスなどを見つけるのに何時間も費やすことができません。

したがって、これを削除して、コンポーネントの機能のみを使用し、デフォルトの....または「テーマ」の1つを使用する代わりに、独自のデザインを提供する方法はありませんか？

jsfprimefaces
25
LuckyLuke

primefaces.THEMEコンテキストパラメーターをnoneに設定すると、スタイルのない機能的なUIが得られます。

<context-param>
    <param-name>primefaces.THEME</param-name>
    <param-value>none</param-value>
</context-param>

スタイルの編集に何時間も費やす必要はありません。 PrimeFacesのスタイリングは、ui-widget-header、ui-widget-contentなどの共有スタイルを介して行われます。これは themeroller Webフォームを介してカスタマイズできます。 JSFとテーマがPrimeFacesよりも簡単になるとは思いません。

41
Cagatay Civici

PrimeFacesは、デフォルトでtheme.cssとprimefaces.cssの2つのCSSファイルを挿入します。 theme.cssに以下を入力すると、web.xmlを削除できます。

<context-param>
  <param-name>primefaces.THEME</param-name>
  <param-value>none</param-value>
</context-param>

次に、次の場所に空のファイルを作成して、primefaces.cssを上書きできます。

WebContent/resources/primefaces/primefaces.css
14
Adam

古いPFバージョン（<6.0）

独自のCSSでプライムフェイスを使用したい場合は、 jQuery UI --ThemeRoller を使用して独自のテーマを作成する方が簡単ではないでしょうか。

これがあなたの作成方法へのリンクです PrimeFacesの独自のテーマ

新しいPFバージョン（6.0以降）

最近、PrimeFacesは 'Designer API' PFコンポーネントがより多くの機能を備えているため、themerollerはもはやそれほど適切ではありません。 Designer APIはSASSベースであり、次のことができます 本当に良いテーマを作成する

11
Daniel

@Danielが言ったように、独自のテーマを作成します。追加したい：

部分的なスタイリングの場合、すべてをファイアバグする必要はありません。primefaces ユーザーガイド 各要素のスタイルクラスをカバーしています。また、他の非常に役立つ情報とヒント（スキニングに関する部分）も含まれています。したがって、primefacesについて何かに苦労していることに気付いたときは、最初のソースとして使用してください。

4
Fallup