PrimeFaces overrides my custom CSS style

Question

I am trying to create PrimeFaces commandButtons of different colors. In my stylesheet I have something like this:

.styleGreen {    
    background-color: #009900;
    font-family: Arial,Helvetica,sans-serif;
}

And the component like this:

 <p:commandButton value="Green Button" styleClass="styleGreen" ...

This works when the commandButton is not inside a PrimeFaces panel or some other container. But when I move it into the body of my page, all the custom CSS rules are overridden.

What is the right way of fixing this?

What is the actual html output for the component? Also, is there a default style sheet for PrimeFaces, and if so, what is contained in it? — ScottS, Mar 27 '12 at 15:45
PrimeFaces is based on JQuery's system and is fairly complex. Firebug is showing me that my style is getting applied then overridden. This question will probably be answered by someone who knows how PrimeFaces uses JQuery. — AlanObject, Mar 27 '12 at 18:07
Firebug should also be telling you what selector is overriding it. That is going to be the key to finding the solution to your css problem. Most likely it is being overridden by a selector with higher precedence (includes and `id` or another `class` combined with something else) or one defined _after_ your `class` designation in the page load order of the css. — ScottS, Mar 27 '12 at 19:20

score 8 · Accepted Answer · edited Sep 25 '12 at 09:24

8

Simple solution for you guys:

If you have a CommandButton in a Panel (or a Form) like that:

<h:form .... >
    <p:commandButton value="Green Button" styleClass="styleGreen" ... />
</h:form>

You just define your css like this:

form .styleGreen {    
    background-color: #009900;
    font-family: Arial,Helvetica,sans-serif;
}

It will work very well (I've just tried it)

edited Sep 25 '12 at 09:24

Raul Rene

10,014
9
53
75

answered Sep 02 '12 at 03:18

Ken

96
1
2

Daniel B. Chapman · Answer 2 · 2012-03-28T01:18:54.590

While the !important might do it you should probably override the themebuilder css files. View the Primefaces guide on how to use a custom style sheet. Primefaces is basically built on jQueryUI http://jqueryui.com/ so override it. (Also, you can just roll a custom theme which is often the better choice).

Just take some time to look at it and if you really need a custom component feel free to build off the standard library and customize it. Since you're dealing with jQuery to begin with it is an easy update.

In response

I think the best route might be to simply use a standard button and make a composite component. It totally depends on how often you're using it, how important it is to the site and what you need to do. Basically jQueryUI will render a button and a span but because of how primefaces is wrapped you're going to apply styles to the OUTSIDE of that so the inner rule won't apply.

As such, I'd make a custom component along the lines of ->

<h:commandButton styleClass="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only ui-state-hover" style="${myOverridesHere}">
  <p:ajax event="click" ... etc... read the manual/>
</h:commandButton>

The net result is that you're adding "ajax" to the commandButton via the Primefaces API (which lives ontop of the standard JSF2 API. I have not had the need to specifically test this as of yet, but I'm sure that some variation on this would do what you need without forcing an important cascade which is generally bad practice.) For the record, you need the jQueryUI Stylesheets in the page for this to work (obviously).

Hope this helps

I have looked at the theme stuff but I don't want to update all buttons, just ones that I designate. So a page can have one green button, one red button, one blue button etc. — AlanObject, Mar 27 '12 at 18:11
Good luck with it, I have not tried the above solution in my environment but logically it should work to override the text/color etc... You could always just make a "green" version of the offending classes. — Daniel B. Chapman, Mar 28 '12 at 01:20
OK I am going to give what you are suggesting a try tomorrow. The only thing I would balk at is making the style attribute filled in with an EL expression -- to me that is mixing the presentation layer with the model. I prefer to make all my styles constants in the XHTML file but we'll see how that works out. — AlanObject, Mar 28 '12 at 03:52
Sorry--that's a sketch --don't actually do that, just try the idea of it. Composite components are going to make your life a lot easier/more maintainable if you end up doing larger projects. The ${} would be your "hard" overrides. — Daniel B. Chapman, Mar 28 '12 at 13:14

score 2 · Answer 3 · answered Mar 27 '12 at 16:24

2

This inherit value may work:

.styleGreen {    
  background-color: #009900 !important;
  font-family: Arial,Helvetica,sans-serif !important;
}

answered Mar 27 '12 at 16:24

Dylan

495
1
6
19

Interesting -- I didn't know about the !important keyword. It seems kind of hacky though but I'll try it. – AlanObject Mar 27 '12 at 18:10
I tried this and it worked so I am going to mark it as the answer for now. BUt it still seems a bit hawkish. What I was looking for is the "JQuery/Primefaces" way of doing CSS. This is a workaround I'll just use it until I have a chance to figure that out. – AlanObject Mar 27 '12 at 19:46
If you don't want to use !important (and I suggest that you don't as it can become a maintenance nightmare) try to be more specific with your CSS classes. Check out this post: http://css-tricks.com/specifics-on-css-specificity/ we override the built in PF classes all the time without using !important. – jjross Apr 06 '12 at 21:25

PrimeFaces overrides my custom CSS style

3 Answers3

Linked