How to override stylesheets of PrimeFaces?

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.

score 15 · Accepted Answer · edited Oct 25 '18 at 13:58

15

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/

edited Oct 25 '18 at 13:58

Nicola Isotta

202
3
10

answered Dec 20 '11 at 20:02

Ravi Kadaboina

8,494
3
30
42

hi, thanks for reply, i can understand **nothing** from advised blog even tough it is on primefaces domain. i want to ask: should i write my style.css including line in a facet, shuld i name it with first. but it is in head. there is a late order "head content" entry in the queue, blog writer defined. thanks for any little explanation – merveotesi Dec 21 '11 at 12:48
If you are using primefaces3, then currently this feature is not working with resource API so refrain from using h:outputStylesheet and h:outputScript tags. You can use middle/last depending on ur need. The way you can get this to work is like this Webapp – Ravi Kadaboina Dec 21 '11 at 16:21
By the way if you do not want it to be in the middle of PF-CSS and PF-JS, and your only need is to be at the last. Then use the solution for primefaces 2.2.1. That way you can use resource API too. It works for primefaces 3 also. – Ravi Kadaboina Dec 21 '11 at 17:39
Please do not forget to mark the answer accepted, if it has helped you in solving the problem – Ravi Kadaboina Jan 30 '12 at 04:26

score 8 · Answer 2 · edited May 23 '17 at 12:22

8

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.

edited May 23 '17 at 12:22

Community

1
1

answered Apr 04 '12 at 15:44

Jens

6,243
1
49
79

Thanks, that worked. Did you find a way in the meantime to do this with an h:outputStylesheet? – Dominik Obermaier Jun 26 '12 at 13:33
No, I haven't looked into this again. – Jens Jun 27 '12 at 08:19
@DominikObermaier: I edited my answer. You can use `h:outputStylesheet` but you will have to put it into the `body`. – Jens May 03 '13 at 09:33
To me when I used I had to use the css include in the JSF format. Not like – Jonathas Pacífico May 17 '13 at 13:47

score 2 · Answer 3 · answered Dec 20 '11 at 16:28

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

thanks for reply but there is no line like in my project. even i searched — merveotesi, Dec 21 '11 at 14:45

score 0 · Answer 4 · answered Dec 17 '14 at 12:15

0

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

answered Dec 17 '14 at 12:15

Michal Puzanov

1

score 0 · Answer 5 · answered Dec 20 '11 at 16:24

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.

score 0 · Answer 6 · answered Dec 20 '11 at 16:25

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

How to override stylesheets of PrimeFaces?

6 Answers6

Linked