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 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
Kennedy Rodrigues
Guest
Kennedy Rodrigues

how to remove the default css only to one page?

Adam Samec
Guest
Adam Samec

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

Guest
Guest
Guest

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

Emerald214
Guest
Emerald214

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

ehab refaat
Guest
ehab refaat

i tried it, but it stops java-script also

trackback
Server returning incorrect file content when using Glassfish 3.1.2, JSF 2.0, PrimeFaces and ThemeRoller | Technology & Programming

[…] faces CSS contains my own css styling etc. I tried to disable default Prime Faces CSS styling ( http://www.mkyong.com/jsf2/primefaces/remove-all-default-css-styling-from-primefaces/ ) but that didnt help at all. What could be wrong […]

Chris
Guest
Chris

Did You find working solution for second CSS?

Jayul
Guest
Jayul

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.