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