TOC

PrimeFaces CSSをオーバーライドする方法は？

多くの場合、デフォルトのPrimeFaces CSSをかなりカスタマイズした値で上書きする必要があります。この例では、PrimeFacesエラーメッセージスタイルをオーバーライドする方法を示します。

FireBug でデバッグすると、PFのエラーメッセージスタイルは primefaces.css

primefaces.css 

.ui-message-info, .ui-message-error, .ui-message-warn, .ui-message-fatal {
border: 1px solid;
margin: 0px 5px;
padding: 2px 5px;
}
.ui-messages-error, .ui-message-error {
color: #D8000C;
background-color: #FFBABA;
}

1. CSS！important

最も簡単な解決策は、独自のスタイルを定義し、その値を `！important`で上書きすることです

あなたのcustom.css

…​./ override primefaces style /.ui-message-info,.ui-message-error,.ui-message-warn,.ui-message-fatal { border: 0!important; margin: 0!important; padding: 0!important; }

ui-messages-error,.ui-message-error { 
    color: #D8000C;
    background-color: #fff!important;
}
===  2. PrimeFacesでのリソースの順序付け

これはもっと「公式な」方法です。まず、link://jsf2/primefaces/primefaces/primefaces/resource-ordering in PrimeFacesの順序付けを理解し、 '**  last ** 'ファセットで独自のスタイルを定義します。

demo.xhtml

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:p="http://primefaces.org/ui">

<h:head> <!-- load other css, js and resources -→ </h:head>

<h:body> <f:facet name="last"> <h:outputStylesheet library="default" name="css/your-custom.css"/> </f:facet> …​ 

HTML出力を参照してください:

<!-- PF-JSF registered css -→ <link type="text/css" rel="stylesheet" href="/mkyong/javax.faces.resource/primefaces.css.jsf?ln=primefaces"/>

<!-- your css -→ <link type="text/css" rel="stylesheet" href="/mkyong/javax.faces.resource/css/your-custom.css.jsf?ln=default&v=1__0" 

** 注意** スタイルは、ブラウザによって読み込まれる順に適用されます。ですから、 `your-custom.css`の値は` primefaces.css`をオーバーライドします（同じidまたはクラス名の場合）。

===  3.よくある間違い

次のように `h:head`に` f:facet name = "last" `を入れてはいけません:

<h:head> 

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

</h:head> 

HTMLソースコードを見直すと、PFのスタイルの前に自分のスタイルが表示されていることがわかります。 「h:頭」と「最後」の間に葛藤があるかもしれません。

<!-- your css -→ <link type="text/css" rel="stylesheet" href="/mkyong/javax.faces.resource/css/your-custom.css.jsf?ln=default&v=1__0"

<!-- PF-JSF registered css -→ <link type="text/css" rel="stylesheet" href="/mkyong/javax.faces.resource/primefaces.css.jsf?ln=primefaces"/> 

__P.S PrimeFaces 3.3__でテスト済み

=== 参考文献

.  link://jsf2/primefaces/resource-ordering-in-primefaces/[resource

PrimeFacesで注文する]。

.  http://webdesign.about.com/od/css/f/blcssfaqimportn.htm[

CSSの重要な意味ですか？]

link://tag/css/[css]link://タグ/primefaces/[primefaces]link://tag/resources/[resources]
Related