How to override PrimeFaces CSS?
Often times, you may need to override default PrimeFaces CSS with your pretty customize values. In this example, we will show you how to override PrimeFaces error message style.
Debug with FireBug, the PF’s error messages style are from primefaces.css
primefaces.css
.ui-message-info, .ui-message-error, .ui-message-warn, .ui-message-fatal {
border: 1px solid;
margin: 0px 5px;
padding: 2px 5px;
}
.ui-messages-error, .ui-message-error {
color: #D8000C;
background-color: #FFBABA;
}
1. CSS !important
The simplest solution is define own style and override the value with !important
your-custom.css
/*** override primefaces style ***/
.ui-message-info,.ui-message-error,.ui-message-warn,.ui-message-fatal {
border: 0!important;
margin: 0!important;
padding: 0!important;
}
.ui-messages-error,.ui-message-error {
color: #D8000C;
background-color: #fff!important;
}
2. Resource Ordering in PrimeFaces
This is more “official” way. First, understand the resource ordering in PrimeFaces, then, define your own style in ‘last‘ facet.
demo.xhtml
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<h:head>
<!-- load other css, js and resources -->
</h:head>
<h:body>
<f:facet name="last">
<h:outputStylesheet library="default" name="css/your-custom.css" />
</f:facet>
...
See HTML output :
<!-- PF-JSF registered css -->
<link type="text/css" rel="stylesheet"
href="/mkyong/javax.faces.resource/primefaces.css.jsf?ln=primefaces" />
<!-- your css -->
<link type="text/css" rel="stylesheet"
href="/mkyong/javax.faces.resource/css/your-custom.css.jsf?ln=default&v=1_0"
Note
The styles are applied in order as they are read by the browser. So, values in
The styles are applied in order as they are read by the browser. So, values in
your-custom.css
will override the primefaces.css
(if same id or class name).
3. Common Mistake
Don’t puts f:facet name="last"
in h:head
like this :
<h:head>
<f:facet name="last">
<h:outputStylesheet library="default" name="css/style.css" />
</f:facet>
</h:head>
Review the HTML source code, you will noticed that your own style is still appear before PF’s styles. May be there is conflicts between ‘h:head’ and ‘last’ facet.
<!-- your css -->
<link type="text/css" rel="stylesheet"
href="/mkyong/javax.faces.resource/css/your-custom.css.jsf?ln=default&v=1_0"
<!-- PF-JSF registered css -->
<link type="text/css" rel="stylesheet"
href="/mkyong/javax.faces.resource/primefaces.css.jsf?ln=primefaces" />
P.S Tested with PrimeFaces 3.3
” The simplest solution is define own style and override the value with !important ”
How can you say that? !important is never a solution… A very bad practice
good
Thanks it worked! 🙂 Finally a solution to my problem. Relieved!
great article
Thanks you for your information, It work when use library=”css” For Example <h:outputStylesheet library="css" name="your-custom.css"
Thanks you for your information 😀
Thanks a lot for the first part.
The “3. Common Mistake” section is wrong. Perhaps you’re confusing head with body yourself?
See also http://stackoverflow.com/a/13917850/157882 and http://stackoverflow.com/a/8774997/157882
It doesn’t work with default. Can you suggest some different way?
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
This does not work when I include library=”default”
but why does it work when I remove library=”default” like below.