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 the component style fit the overall design of my application isn't good. I can't use hours on using Firebug to find which classes etc it uses and all that.

So is there no way to remove this and only use the components for their functionality and provide your own design instead of being forced to use the default....or one of the "themes"?

Answer 1

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.

Answer 2

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