web-dev-qa-db-ja.com

デフォルトのPrimeFaces CSSをカスタムスタイルでオーバーライドするにはどうすればよいですか？

独自のテーマを別のMavenプロジェクトとして作成しましたが、正しくロードされています。

次に、コンポーネントのサイズを変更します。たとえば、 <p:orderList> 。 ui-orderlist-listというクラスがあり、primefaces.cssで200x200の固定ディメンションで定義されています。 theme.cssで何を実行しても、この属性によって上書きされ、<p:orderList>のコンテンツ部分をより広くする方法はありません。

他のコンポーネントについては、すべてではなく、コンポーネントの1つのインスタンスのみをオーバーライドしたい場合があります。

誰も私にこれをすべて行う方法を教えてもらえますか？

cssjsfprimefacesthemesoverriding
60
Samuel Tian

特定のケースに関連する可能性のあるものを考慮に入れる必要があることがいくつかあります

CSSを読み込むafter PrimeFaces one

CSSが読み込まれていることを確認する必要がありますafter PrimeFacesの1つ。これは、CSSファイルを参照する<h:outputStylesheet>を<h:body>ではなく<h:head>内に配置することで実現できます。

<h:head>
    ...
</h:head>
<h:body>
    <h:outputStylesheet name="style.css" />
    ...
</h:body>

JSFは、生成されたHTMLの[end]にスタイルシートを自動的に再配置します<head>。これにより、スタイルシートが読み込まれますafter PrimeFacesのデフォルトスタイル。これにより、PrimeFaces CSSファイルとまったく同じCSSファイルのセレクターがPrimeFacesのセレクターよりも優先されます。

また、PrimeFaces固有のHeadRendererによって理解される<f:facet name="last">の<h:head>に配置する提案も表示されますが、これは不必要に不器用であり、独自のHeadRendererがあると壊れます。

CSSの特異性を理解する

また、CSSセレクターが少なくとも特定の要素のPrimeFacesのデフォルトCSSセレクターと同じくらい固有であることを確認する必要があります。 CSS Specificity および Cascading and Inheritance rules を理解する必要があります。たとえば、PrimeFacesがデフォルトで次のようにスタイルを宣言する場合

.ui-foo .ui-bar {
    color: pink;
}

そしてあなたはそれを

.ui-bar {
    color: purple;
}

そして、class="ui-bar"を持つ特定の要素には、class="ui-foo"を持つ親要素がありますが、PrimeFacesの要素は、最も具体的な一致であるため、引き続き優先されます！

Webbrowser開発者ツールを使用して、正確なCSSセレクターを見つけることができます。 Webブラウザーで問題の要素（IE9/Chrome/Firefox + Firebug）を右クリックし、Inspect Elementを選択して表示します。

部分的なオーバーライド

同じコンポーネントのすべてのインスタンスではなく、コンポーネントの特定のインスタンスのみのスタイルをオーバーライドする必要がある場合は、代わりにカスタムstyleClassを追加して、フックします。特異性が使用/適用される別のケースです。例えば：

<p:dataTable styleClass="borderless">

.ui-datatable.borderless tbody,
.ui-datatable.borderless th
.ui-datatable.borderless td {
    border-style: none;
}

コンポーネントがstyleClassをサポートしておらず、jsf 2.2以降を使用している場合は、 passtrough attributes を使用してpt:classを追加し、出力に含めることもできます。

<p:clock pt:class="borderless" />

！importantを使用しないでください

CSSファイルを適切にロードするのに失敗した場合、または正しいCSSセレクターを見つけられなかった場合、おそらく!important回避策をつかむでしょう。これは明白な間違いです。これはい回避策であり、実際の解決策ではありません。それはあなたのスタイルルールとあなた自身を長期的に混乱させるだけです。 !importantは、CSSスタイルシートファイルからHTML要素のstyle属性にハードコーディングされた値をオーバーライドするためにonlyを使用する必要があります（これは悪い習慣ですが、まれに残念ながらやむを得ない）。

こちらもご覧ください：

113
BalusC

たとえば、cssOverrides.cssなどの新しいcssファイルを作成できます。

そして、あなたが望むすべてのオーバーライドをその中に配置します。そうすれば、primefacesバージョンのアップグレードはあなたに影響を与えません、

あなたのh：headにそのようなものを追加してください

<link href="../../css/cssOverrides.css" rel="stylesheet" type="text/css" />

うまくいかない場合は、h：bodyに追加してみてください

その動作を確認するには、cssファイル内でこの簡単な例を試してください

.ui-widget {
   font-size: 90% !important;
}

これにより、すべてのprimefacesコンポーネント/ textのサイズが小さくなります

4
Daniel

PrimeFaces 6.0を使用しています。これに関して私が望んでいた情報がいくつかあります。

<h:outputStylesheet/>を使用すると機能しますが、<h:head></h:head>タグの最後にある場合でもCSSは最後にロードされません（他のCSSファイルは後で含まれます）。 here から学んだあなたができるトリックは、<f:facet name="last"></f:facet>、をbodyの内部に配置することです：

<h:body>
  <f:facet name="last">
    <h:outputStylesheet name="css/MyCSS.css" />
  </f:facet>
...

次に、CSSが最後にロードされます。注：BalusCに概説されているように、あなたはまだ特異性ルールを順守する必要があります。

WebContent/resources/css /に「MyCSS.css」を配置しました。

リソースの読み込み順序の詳細： http://www.mkyong.com/jsf2/primefaces/resource-ordering-in-primefaces

3
Andrew

より具体的なルールを作成する方法

PrimeFacesで使用されるスタイルルールは非常に複雑になる場合があります。要素は、複数のCSSルールからスタイルを受け取ることができます。 DOMインスペクタの[スタイル]タブでフィルタリングを使用して、カスタマイズするプロパティを検索できることを知っておくと便利です。

このスクリーンショットはChromeを使用して撮影されましたが、フィルタリングはFirefoxおよびSafariでも利用できます。

カスタマイズするルールが見つかったら、htmlを前に付けることで、より具体的なルールを簡単に作成できます。たとえば、.ui-corner-all 好む：

html .ui-corner-all {
  border-radius: 10px;
}

ResourceHandlerを使用してテーマの値を置き換えます

私は通常、ある色を別の値に置き換えたいだけです。色はさまざまなルールで使用できるため、 ResourceHandler を作成すると便利です。

PrimeFacesテーマのハンドラーチェックで：

@Override
public Resource createResource(String resourceName,
                               String libraryName) {
  if (isPrimeFacesTheme(resourceName, libraryName)) {
    return new MyResource(super.createResource(resourceName, libraryName), this);
  }
  else {
    return getWrapped().createResource(resourceName, libraryName);
  }
}

protected boolean isPrimeFacesTheme(final String resourceName,
                                    final String libraryName) {
  return libraryName != null
                 && libraryName.startsWith("primefaces-")
                 && "theme.css".equals(resourceName);
}

リソースで、色を置き換えます。

public MyResource(Resource wrapped, ResourceHandler handler) {
  this.wrapped = wrapped;
  this.handler = handler;
  this.charset = Charset.forName(FacesContext.getCurrentInstance().getExternalContext().getResponseCharacterEncoding());
}

@Override
public InputStream getInputStream() throws IOException {
  if (cache == null) {
    cache = readInputStream(getWrapped().getInputStream());
    // Replace values
    cache = cache.replace("#007ad9", "#11dd99");
  }
  return new ByteArrayInputStream(cache.getBytes(charset));
}

そして、faces-config.xmlに次のように登録します。

<application>
  <resource-handler>com.example.MyResourceHandler</resource-handler>
</application>

リソースハンドラの詳細については、以下を参照してください。

1
Jasper de Vries