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?
Tags :
Founder of Mkyong.com, love Java and open source stuff. Follow him on Twitter, or befriend him on Facebook or Google Plus. If you like my tutorials, consider make a donation to these charities.
My website mkyong.com is hosted by Liquid Web, I really like their fast and helpful support, it saved me a lot of time. Furthermore, their servers are extremely reliable, fast and stable, I don't remember when was the last time we had server downtime. Btw, they're offering $100 Coupon now, if you are sourcing for great hosting provider, go grab it.

Related Posts

Popular Posts