How to override stylesheets of PrimeFaces? [duplicate]

Answer 1

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

Answer 2

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/

Answer 3

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.

Answer 4

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

Answer 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

Answer 6

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.