Remove all styling from Primefaces components?

Question

Is it possible to remove all styling from Primefaces components? I mean, the component set is good but having to manually override every tiny bit of each component to make t

Answer 1

PrimeFaces inserts two CSS files by default, theme.css and primefaces.css. You can remove theme.css by putting the following to web.xml:

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

Then you can overwrite primefaces.css by creating an empty file in:

WebContent/resources/primefaces/primefaces.css

Answer 2

Create own theme as @Daniel said. I just want to add :

For partial styling you don't have to firebug everything, primefaces user guide covers style classes for each element. It contains also other very useful info and tips (also part about skinning). So use it as your first source when you find yourself struggling with anything about primefaces.

Answer 3

Older PF versions (<6.0)

If you want to use the primefaces with your own css's wouldn't it be easier to create your own theme using the jQuery UI - ThemeRoller ?

Here's a link to how you create your own Theme for PrimeFaces

Newer PF versions (6.0 and up)

More recently PrimeFaces introduced the 'Designer API' Since PF components have more features, the themeroller is not that suitable anymore. The Designer API is SASS based and allows you to create really good themes

Answer 4

Set primefaces.THEME context parameter to none and you'll get a functional ui with no styles.

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

You don't need to spend hours editing styles. Styling of PrimeFaces is done via shared styles like ui-widget-header, ui-widget-content which you can customize via the themeroller web form. I don't think JSF and theming can get any easier than PrimeFaces.