Main Tutorials

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&amp;v=1_0" 
Note
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&amp;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

References

  1. resource ordering in PrimeFaces.
  2. What does !important mean in CSS?

About Author

author image
Founder of Mkyong.com, love Java and open source stuff. Follow him on Twitter. If you like my tutorials, consider make a donation to these charities.

Comments

Subscribe
Notify of
11 Comments
Most Voted
Newest Oldest
Inline Feedbacks
View all comments
alexis
9 years ago

” 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

geekonspace
7 years ago

good

Priya
8 years ago

Thanks it worked! 🙂 Finally a solution to my problem. Relieved!

Mesut Can
9 years ago

great article

Jimmy Añazco
10 years ago

Thanks you for your information, It work when use library=”css” For Example <h:outputStylesheet library="css" name="your-custom.css"

Jimmy Añazco
10 years ago

Thanks you for your information 😀

Sary Al-Assad
10 years ago

Thanks a lot for the first part.

BalusC
11 years ago

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

Hitesh
11 years ago

It doesn’t work with default. Can you suggest some different way?

Michal Puzanov
9 years ago
Reply to  Hitesh

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

Kobie Williams
11 years ago

This does not work when I include library=”default”

but why does it work when I remove library=”default” like below.