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?

Answer 1

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)

Answer 2

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