How to override stylesheets of PrimeFaces? [duplicate]

Question

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.

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

Answer 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.