0

I am trying to use some Primefaces functionality in my existing application. I do not want Primefaces to mess with my existing CSS now, so I have tried to disable the theme in my web.xml:

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

However, PrimeFaces is still rendering all sort of ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-left in my elements, which affects my current CSS styles. I do not think it is a good nor elegant solution to move my CSS to the body, and I don't think it is a good solution to use !important either. How can I stop PrimeFaces from inserting all sort of undesired styles?

Jasper de Vries
  • 19,370
  • 6
  • 64
  • 102
user1156544
  • 1,725
  • 2
  • 25
  • 51
  • Did you try the second answer? – Jasper de Vries Mar 20 '18 at 19:20
  • Overwritting a CSS file does not prevent JSF from tagging my elements – user1156544 Mar 20 '18 at 20:01
  • 1
    Tagging? You mean adding classes? What makes you think disabling the theme would prevent this? – Jasper de Vries Mar 20 '18 at 20:27
  • 1
    They are PrimeFaces elements and not yours...so adding the `ui-button` 'tags' is their 'right'. And many components need structural css to sort of work or be stylable to your liking with little effort. The second answer @JasperdeVries refers to might do what you effectively need (to a large extend) but it might also require you to do more work. And did you read https://stackoverflow.com/questions/8768317/how-do-i-override-default-primefaces-css-with-custom-styles? – Kukeltje Mar 20 '18 at 20:29
  • @Jasper de Vries that's why I have "tried" like said above, but obviously it didn't work. – user1156544 Mar 20 '18 at 20:50
  • @Kukeltje - yes, I know the question, but as I said putting the CSS in the body is not a good solution. PF has the right to do whatever they like, but it seems very inflexible. Now I want to reuse my button style with an icon (f.ex. my icon is bigger) and there is a lot of tunning to get it the way I want. It seems like you can get a lot of nice features but as long as it looks as they say (very little flexibility). It is probably a better design to give you the option to style your elements as you like, don't you think? Some people know how to use CSS – user1156544 Mar 20 '18 at 20:52
  • I don't see why putting the css somewhere where it works is not a good solution. Changing the core components of a suite just for this does not seem to be a good solution. And when you start off with one of their (not to expensive) commercial themes (more easy to 'tweak' especially the SASS based ones, and certainly not with limited flexibility) And providing the option to start fully from scratch has rarely been requested (you are the first one in 10 years), so taking that into account upfront is not logical. – Kukeltje Mar 21 '18 at 10:52
  • And even the default theme can be tweaked (I did it 5 years ago to match our internal theme). You are right about one thing though then, you need to know what you are doing if you tweak their default theme. And very often designers that start from scratch lack that capability – Kukeltje Mar 21 '18 at 10:53

1 Answers1

2

Your question was a bit confusing at first. The solution you found can only be used to prevent theming, which basically comes down to setting a custom style sheet. This does not change how the components are rendered. As you have noticed, the style classes will be rendered anyway. This cannot be "prevented" (like switched off), but you could override the renderer for the components you want to customize. But be careful though.. it might be that some style classes are needed by JavaScript features!

An other solution could be switching to JSF core HTML or a different component library like BootsFaces or ButterFaces. This depends on the components you need, and you might run into the same issue when using a different library.

Or, you could just stick with PrimeFaces and learn how to override the default PrimeFaces CSS with custom styles. This can be done without any CSS in the body or using !important. Just create a style sheet with more specific rules.

Jasper de Vries
  • 19,370
  • 6
  • 64
  • 102
  • And if you start off by using one of the commercial SASS based themes, tweaking is even more easy... color wise, border wise, padding wise... And the Harmony theme that comes with 6.2 btw also is SASS based. – Kukeltje Mar 21 '18 at 11:04
  • I started on a theme a while ago. It's not finished, but it might give you an idea / starting point https://github.com/jepsar/Jepsar-PrimeFaces-Theme/blob/master/src/main/resources/META-INF/resources/primefaces-jepsar/theme.scss – Jasper de Vries Mar 21 '18 at 12:46
  • Based on this I think the answer I was looking for is: **there is no way to remove them**. Either you override them or avoid same names in your CSS and any other CSS you use. – user1156544 Mar 21 '18 at 13:16