web-dev-qa-db-fra.com

Comment remplacer les feuilles de style de PrimeFaces?

J'ai simplement essayé de rechercher le nom d'un composant dans le code HTML généré via FireBug après l'avoir modifié dans mon css défini manuellement dans le projet JSF, mais je n'ai pas pu remplacer la définition CSS de PrimeFaces. Merci d'avance pour toute idée.

cssjsfprimefaces
12
merveotesi

Si vous utilisez primefaces 2.2.1, utilisez la balise h: outputStylesheet et incluez-la dans h: body pas dans h: head pour remplacer les feuilles de style primefaces, comme avec h: outputScript.

Exemple: 

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

Si vous utilisez primefaces 3, suivez cette entrée de blog https://www.primefaces.org/resource-rendering/

14
Ravi

En ajoutant à ce que @Ravi a déjà répondu: 

À partir de primefaces 3.0, vous pouvez personnaliser l’ordre des ressources. Cependant, lorsque j'ai essayé, cela ne fonctionnait pas au début. 

Il s'est avéré que je ne pouvais pas utiliser le composant JSF pour inclure css comme ceci: 

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

Au lieu de cela, je devais utiliser:

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

Alors seulement, la commande a commencé à fonctionner.

EDIT: Ma réponse est superflue si vous mettez la facet dans la body (au lieu de head). Tout comme Ravi a écrit dans sa réponse. (Je dois avoir raté ça en quelque sorte.)

Il est également déconseillé de procéder ainsi car les ressources ne sont pas traitées par la variable FacesServlet et des problèmes de chemins à l'intérieur de CSS peuvent survenir. Comparez ceci réponse de BalusC. 

8
Jens

Assurez-vous que votre lien de fichier CSS vient après le fichier PrimeFaces dans votre code.

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

En outre, bien que ce ne soit généralement pas la solution préférée, vous pouvez ajouter! Important après vos styles pour leur donner la priorité la plus élevée: http://www.w3.org/TR/CSS2/cascade.html#important-rules

2
Gregg B

Essayez de créer des règles CSS plus spécifiques pour vos remplacements. 

Le moyen le plus simple consiste à ajouter des définitions CSS PrimeFaces à l'aide d'un identifiant spécifique utilisé uniquement sur vos pages:

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

Pour en savoir plus sur la spécificité CSS, consultez l'article " Spécificité CSS: Ce que vous devez savoir ".

0
yatskevich

Fondamentalement, vous devez utiliser un sélecteur plus défini (plus fort). Plus votre CSS est spécifique, plus l'interprète lui accordera une grande importance. Veuillez consulter cet article sur CSS Cascading Order: http://www.w3.org/TR/CSS2/cascade.html

Ou si vous êtes pressé: http://ww.boogiejack.com/CSS_4.html

0
Authman Apatira

Si vous souhaitez remplacer primefaces.css, vous pouvez le faire en créant des ressources/primefaces/primefaces.css vides. Ce n'est pas parfait, mais travailler avec Primefaces 5.0

0
Michal Puzanov