How to override stylesheets of PrimeFaces?

问题:

Simply i tried to look the name of a component in generated HTML through FireBug after that i change it in my manually defined css in JSF project, but could not override the PrimeFaces' CSS definition. Thanks in advance for any idea.

回答1:

If using primefaces 2.2.1, Use the h:outputStylesheet tag and include it in h:body not in h:head to override primefaces stylesheets, same with h:outputScript.

Example:

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

If using primefaces 3, follow this blog entry https://www.primefaces.org/resource-rendering/

回答2:

Adding to what @Ravi already answered:

From primefaces 3.0 on you can customize the order of the resources. However when I tried that it was not working at first.

It turned out that I could not use the JSF component to include css like this:

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

Instead I had to use:

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

Only then the ordering started to work.

EDIT: My answer is superfluous if you put the facet into the body (instead of head). Just like Ravi wrote in his answer. (I must have missed that somehow.)

It also not advisable to do this because then the resources are not processed by the FacesServlet and problems with paths inside of css can come up. Compare this answer from BalusC.

回答3:

Make sure your CSS file link comes after the PrimeFaces file in your 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" />

In addition, while it is not generallythe preferred solution you can add !important after your styles to give them the highest priority: http://www.w3.org/TR/CSS2/cascade.html#important-rules

回答4:

Try to create more specific CSS rules for your overrides.

The easiest way is to prepend PrimeFaces CSS definitions by a specific id which is used only on your pages:

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

Read more about CSS Specificity in "CSS Specificity: Things You Should Know" article.

回答5:

Basically, you have to use a more well defined (stronger) selector. The more specific your CSS is, the higher importance the interpreter will grant to it. Please see this article on CSS Cascading Order: http://www.w3.org/TR/CSS2/cascade.html

Or if you are in a rush: http://ww.boogiejack.com/CSS_4.html

回答6:

If you want to override primefaces.css, you can do it by creating blank resouces/primefaces/primefaces.css . It's not perfect but working with Primefaces 5.0