Comment remplacer les feuilles de style de PrimeFaces?

Simplement j'ai essayé de regarder le nom d'un composant dans le code HTML généré par FireBug après que je change dans mon manuellement css définies dans le cadre du projet JSF, mais ne pouvait pas remplacer le PrimeFaces' CSS définition. Merci d'avance pour toute idée.

source d'informationauteur merveotesi

  1. 14

    Si l'aide de primefaces 2.2.1, Utilisez le h:outputStylesheet de la balise et de l'inclure dans h:corps n'est pas dans h:tête de remplacer primefaces les feuilles de style, même 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 l'aide de primefaces 3, suivez cette entrée de blog
    http://blog.primefaces.org/?p=1433

  2. 8

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

    De primefaces 3.0, vous pouvez personnaliser l'ordre des ressources. Cependant, quand j'ai essayé que ça ne fonctionnait pas au premier abord.

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

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

    Au lieu de cela j'ai eu à utiliser:

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

    Alors seulement l'ordre a commencé à travailler.

    MODIFIER: Ma réponse est superflu si vous mettez le facet dans le body (au lieu de head). Tout comme le Ravi a écrit dans sa réponse. (Je dois avoir raté quelque sorte.)

    Il est également conseillé de ne pas faire cela parce que les ressources ne sont pas traitées par le FacesServlet et des problèmes avec les chemins à l'intérieur de la css peut venir. Comparer cette réponse de BalusC.

  3. 3

    Assurez-vous que votre fichier CSS lien vient après la PrimeFaces fichier 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 qu'il n'est pas generallythe solution préférée, vous pouvez ajouter !important après vos styles, de leur donner la plus haute priorité: http://www.w3.org/TR/CSS2/cascade.html#important-rules

  4. 0

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

    Le plus simple est de la faire précéder de PrimeFaces définitions de CSS par un code spécifique qui est utilisé uniquement sur vos pages:

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

    Lire plus à propos de CSS Spécificité de la "CSS Spécificité: ce que Vous Devez Savoir" de l'article.

  5. 0

    Fondamentalement, vous devez utiliser un plus bien définie (plus fort) sélecteur. Le plus spécifique votre CSS est élevé, plus l'importance de l'interprète de la subvention. Veuillez consulter cet article sur le CSS Cascading Ordre: http://www.w3.org/TR/CSS2/cascade.html

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

  6. 0

    Si vous souhaitez remplacer primefaces.css, vous pouvez le faire en créant vide ressources/primefaces/primefaces.css . Il n'est pas parfait, mais en travaillant avec Primefaces 5.0