Main Tutorials

Remove all default CSS styling from PrimeFaces

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

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
7 Comments
Most Voted
Newest Oldest
Inline Feedbacks
View all comments
ehab refaat
9 years ago

i tried it, but it stops java-script also

Kennedy Rodrigues
9 years ago

how to remove the default css only to one page?

Adam Samec
9 years ago

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

Guest
9 years ago

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

Emerald214
9 years ago

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

Chris
10 years ago

Did You find working solution for second CSS?

Jayul
10 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.