TOC

Wie kann ich PrimeFaces CSS überschreiben?

Oft müssen Sie das standardmäßige PrimeFaces-CSS mit Ihren ziemlich angepassten Werten überschreiben. In diesem Beispiel zeigen wir Ihnen, wie Sie den PrimeFaces-Fehlermeldungsstil überschreiben.

Debuggen mit FireBug , der Stil der PF-Fehlermeldungen stammt von 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! Wichtig

Die einfachste Lösung ist, den eigenen Stil zu definieren und den Wert mit "! Important" zu überschreiben

Ihre-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. Ressourcenbestellung in PrimeFaces

Dies ist mehr "offizieller" Weg. Verstehen Sie zuerst den Link://jsf2/primefaces/Ressourcenanordnung in Primefaces/[Ressourcenordnung in PrimeFaces], und definieren Sie dann Ihren eigenen Stil in der "**  last ** " -Facette.

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> …​ 

Siehe HTML-Ausgabe:

<!-- 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" 

**  Hinweis **  Die Stile werden in der Reihenfolge angewendet, in der sie vom Browser gelesen werden. Die Werte in `your-custom.css` überschreiben also` primefaces.css` (wenn dieselbe ID oder ein Klassenname).

3. Häufiger Fehler

Füge 'f: facet name = "last" "in" h: head "nicht so ein:

<h:head> 

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

</h:head> 

Überprüfen Sie den HTML-Quellcode. Sie werden feststellen, dass Ihr eigener Stil immer noch vor den Stilen von PF angezeigt wird. Möglicherweise gibt es Konflikte zwischen "h: head" und "letzter" Facette.

<!-- 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 getestet mit PrimeFaces 3.3__

===  Referenzen

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

Bestellung in PrimeFaces].

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

! wichtiges Mittel in CSS?]

link://tag/css/[css]link://tag/primefaces/[primefaces]link://tag/resources/[Ressourcen]
Related