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

score 43 · Accepted Answer · edited Feb 10 '15 at 18:42

43

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.

edited Feb 10 '15 at 18:42

BalusC

1,082,665
372
3,610
3,555

answered Apr 15 '12 at 12:53

Cagatay Civici

6,406
1
29
34

5

http://www.mkyong.com/jsf2/primefaces/remove-all-default-css-styling-from-primefaces/ – Jun 21 '13 at 12:33
This doesnt work in my case because it seems that the classes are still rendered by Primefaces... I wanted to remove all style applied by Primefaces, which can be only done by taking away all the classes that PF applies – user1156544 Mar 20 '18 at 15:41

score 15 · Answer 2 · answered Jan 17 '15 at 20:28

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

score 11 · Answer 3 · edited Jun 05 '18 at 17:35

11

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

edited Jun 05 '18 at 17:35

Kukeltje

12,223
4
24
47

answered Apr 15 '12 at 09:35

Daniel

36,833
10
119
200

1

Sugar for the ones who don't know how to program in CSS – user1156544 Mar 20 '18 at 15:32

score 4 · Answer 4 · answered Apr 15 '12 at 10:04

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.

Remove all styling from Primefaces components?

4 Answers4

Linked

Related