Remove all default CSS styling from PrimeFaces

by

By default, PrimeFaces will return total of four files, 2 css files and 2 Javascript files.


<link type="text/css" rel="stylesheet" 
href="/primefaces/faces/javax.faces.resource/theme.css?ln=primefaces-aristo" />
<link type="text/css" rel="stylesheet" 
href="/primefaces/faces/javax.faces.resource/primefaces.css?ln=primefaces" />

<script type="text/javascript" 
src="/primefaces/faces/javax.faces.resource/jquery/jquery.js?ln=primefaces"></script>
<script type="text/javascript" 
src="/primefaces/faces/javax.faces.resource/primefaces.js?ln=primefaces"></script>

Some people don’t like the default PrimeFaces CSS file and wonder how to remove it?

Solution

You are allow to remove only the theme.css file by following settings in web.xml. 


  <context-param>
    <param-name>primefaces.THEME</param-name>
    <param-value>none</param-value>
  </context-param>

See output : 


<link type="text/css" rel="stylesheet" 
href="/primefaces/faces/javax.faces.resource/primefaces.css?ln=primefaces" />

<script type="text/javascript" 
src="/primefaces/faces/javax.faces.resource/jquery/jquery.js?ln=primefaces"></script>
<script type="text/javascript" 
src="/primefaces/faces/javax.faces.resource/primefaces.js?ln=primefaces"></script>
Note
Instead of remove the theme.css, you really should consider create a custom theme in PrimeFaces.

Any Idea?

I don’t want hacks the code and still thinking an easy way to remove the rest of the js and css files, do comment if you know how, thanks.

Reference

  1. Remove all Styling from PrimeFaces Components

mkyong

Founder of Mkyong.com, passionate Java and open-source technologies. If you enjoy my tutorials, consider making a donation to these charities.

7 Comments
Most Voted
Newest Oldest
Inline Feedbacks
View all comments
ehab refaat
12 years ago

i tried it, but it stops java-script also

2
Reply
Kennedy Rodrigues
11 years ago

how to remove the default css only to one page?

0
Reply
Adam Samec
11 years ago

You can overwrite the default primefaces.css file by creating an empty file in: WebContent/resources/primefaces/primefaces.css

0
Reply
Guest
11 years ago

You can overwrite the default primefaces.css file by creating an empty file in: /resources/primefaces/primefaces.css

0
Reply
Emerald214
11 years ago

I tried this but the CSS isn’t removed. The button still uses JQuery UI CSS.

0
Reply
Chris
12 years ago

Did You find working solution for second CSS?

0
Reply
Jayul
12 years ago

thanks MKYOUNG for such wonderfull idea..
when i put code into web.xml so that default theme of primefaces is remove. but one problem arrive in my project radio button is not display which i am using at many palces.

0
Reply