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

References

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

About the Author

author image
mkyong
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.

Comments

Leave a Reply

avatar
newest oldest most voted
geekonspace
Guest
geekonspace

good

Priya
Guest
Priya

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

Mesut Can
Guest
Mesut Can

great article

alexis
Guest
alexis

” 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

Jimmy Añazco
Guest
Jimmy Añazco

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

Jimmy Añazco
Guest
Jimmy Añazco

Thanks you for your information :D

Sary Al-Assad
Guest
Sary Al-Assad

Thanks a lot for the first part.

BalusC
Guest
BalusC

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
Guest
Hitesh

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

Michal Puzanov
Guest
Michal Puzanov

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
Guest
Kobie Williams

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

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