PrimeFaces Overrides My Own CSS Style

Question

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

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

And a component like this:

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

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

What is the correct way to do this?

Answer 1

A simple solution for you guys:

If you have a CommandButton in a panel (or form):

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

You simply define your css as follows:

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

It will work very well (I just tried)

Answer 2

While it is important to do this, you probably should override the themessbuilder css files. See the interface guide in the "How to use a custom style sheet" section. Surfaces are mostly built on jQueryUI http://jqueryui.com/ to override it. (In addition, you can simply download a special theme, which is often the best choice).

Just take the time to look at it, and if you really need a custom component, feel free to create a standard library and configure it. Since you are dealing with jQuery for starters, this is a simple update.

In reply

I think the best way is to simply use the standard button and create a composite component. It completely depends on how often you use it, how important it is for the site and what you need to do. Basically, jQueryUI will display the button and spacing, but due to the way the perforated elements are grouped, you will apply styles to OUTSIDE, so the internal rule will not apply.

As such, I would make a custom component line by line ->

 <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 end result is that you add "ajax" to the commandButton via the Primefaces API (which lives in the standard standard JSF2 API. I didn’t need to specifically check this at the moment, but I’m sure that some changes will do this, what you need without forcing an important cascade, which is usually bad practice.) To write, you need the jQueryUI styles on the page for this to work (obviously).

Hope this helps

Answer 3

This inheritance value may work:

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