web-dev-qa-db-ja.com

PrimeFacesのスタイルシートを上書きする方法は？

単純に、FireBugを介して生成されたHTMLのコンポーネントの名前を調べようとしました。その後、JSFプロジェクトで手動で定義したcssでコンポーネントの名前を変更しましたが、PrimeFacesのCSS定義をオーバーライドできませんでした。アイデアを事前に感謝します。

cssjsfprimefaces
12
merveotesi

Primefaces 2.2.1を使用する場合は、h：outputStylesheetタグを使用し、h：headではなくh：bodyに含めて、h：outputScriptと同じようにprimefacesスタイルシートをオーバーライドします。

例：

<h:body>
  <h:outputStylesheet library="css" name="YOURSTYLES.css" />
  <h:outputScript library="javascript" name="YOURSCRIPT.js" target="head" />
</h:body>

Primefaces 3を使用している場合は、このブログエントリに従ってください https://www.primefaces.org/resource-rendering/

14
Ravi

@Raviがすでに回答したものに追加：

Primefaces 3.0以降では、リソースの順序をカスタマイズできます。しかし、私が試したところ、最初は機能していませんでした。

JSFコンポーネントを使用して次のようなcssを含めることができないことが判明しました。

<f:facet name="last">
    <h:outputStylesheet library="css" name="bootstrap.css" />
</f:facet>

代わりに私は使用しなければなりませんでした：

<f:facet name="last">
    <link rel="stylesheet" type="text/css" href="#{facesContext.externalContext.requestContextPath}/resources/css/bootstrap.css" />
</f:facet>

その後、注文が機能し始めました。

[〜＃〜] edit [〜＃〜]：facetをbody（headの代わりに）。ラビが彼の答えに書いたように。 （どういうわけかそれを逃したに違いありません。）

また、これを行うことはお勧めできません。リソースがFacesServletによって処理されず、css内のパスに問題が発生する可能性があるためです。これを比較してください answer BalusCから。

8
Jens

CSSファイルのリンクがコード内のPrimeFacesファイルの後にあることを確認してください。

<link type="text/css" rel="stylesheet" href="/showcase-labs/javax.faces.resource/theme.css.jsf?ln=primefaces-aristo" />
<link type="text/css" rel="stylesheet" href="/showcase-labs/javax.faces.resource/primefaces.css.jsf?ln=primefaces&amp;v=3.0-SNAPSHOT" />

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

さらに、これは一般的に推奨されるソリューションではありませんが、スタイルの後に！importantを追加して、スタイルに最高の優先順位を与えることができます： http://www.w3.org/TR/CSS2/cascade.html#important-rules

2
Gregg B

オーバーライドに対してより具体的なCSSルールを作成してみてください。

最も簡単な方法は、ページでのみ使用される特定のIDをPrimeFacesCSS定義の前に付けることです。

#tuxi_site .ui-widget-content .ui-icon {
   ...
}

CSSの特異性について詳しくは、「 CSSの特異性：知っておくべきこと "」の記事をご覧ください。

0
yatskevich

基本的に、より明確に定義された（より強力な）セレクターを使用する必要があります。 CSSが具体的であるほど、インタプリタがCSSに与える重要性が高くなります。 CSSカスケード順序に関するこの記事を参照してください： http://www.w3.org/TR/CSS2/cascade.html

または、急いでいる場合： http://ww.boogiejack.com/CSS_4.html

0
Authman Apatira

Primefaces.cssをオーバーライドする場合は、空白のresources/primefaces /primefaces.cssを作成することでオーバーライドできます。完璧ではありませんが、Primefaces5.0で動作します

0
Michal Puzanov