TOC

Comment remplacer PrimeFaces CSS?

Souvent, vous devrez peut-être remplacer le CSS PrimeFaces par défaut par vos jolies valeurs de personnalisation. Dans cet exemple, nous allons vous montrer comment remplacer le style du message d’erreur PrimeFaces.

Déboguer avec FireBug , le style des messages d’erreur du PF provient de 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

La solution la plus simple est de définir son propre style et de remplacer la valeur par ! Important

votre-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. Classement des ressources dans PrimeFaces

C'est plus "officiel" façon. Commencez par comprendre le lien://jsf2/primefaces/classement des ressources dans primefaces/[classement des ressources dans PrimeFaces], puis définissez votre propre style dans la facette «**  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> …​ 

Voir la sortie 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" 

**  Remarque **  Les styles sont appliqués dans l'ordre où ils sont lus par le navigateur. Ainsi, les valeurs dans `your-custom.css` remplaceront le` primefaces.css` (si le même identifiant ou nom de classe).

===  3. Erreur commune

Ne mettez pas `f: facet name =" last "` dans `h: head` comme ceci:

<h:head> 

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

</h:head> 

En examinant le code source HTML, vous remarquerez que votre propre style apparaît toujours avant les styles de PF. Peut-être y a-t-il des conflits entre les facettes 'h: head' et 'last'.

<!-- 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 Testé avec PrimeFaces 3.3__

===  Références

. link://jsf2/primefaces/ordonnancement-des-ressources/[ressource

commande dans PrimeFaces].

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

! important en CSS?]

lien://tag/css/[css]lien://tag/primefaces/[primefaces]link://tag/resources/[ressources]
Related