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)