Question

I’m trying to change the backgraund-image of an element h:commandButton. It’s inside a RichFaces:panel.

I made a css file with the following rule:

.sButton
{
     background-image:url('../imgs/btnTexture2.jpg');
     background-repeat:repeat-x;
     color: white;
}

In the xhtml file

<h:commandButton id="btnTest" styleClass="sButton" ...../>

It doesn’t work with RichFaces, but it works fine with JSF.

When I checked in Chrome, I found the problem is a rule inside the file skinning.ecss:31.
How do I avoid that rule?

If I define the style attribute in the commandButton, it works, but I don’t want to put the style in the xhtml file.

How can I force the application of my rule?
How can I modify the background of h:commanButton in RichFaces?

Answer 1

I have solved the problem.

I use the next CSS style

input[type="button"].sButton
{
     background-image:url('../imgs/btnTexture2.jpg');
     background-repeat:repeat-x;
     color: white;
}

With that rule the background-image is changed.
I didn’t have to use a “styleclass definetion under /view/stylesheet/theme.css”(whatever that means).

like I said the problem is that RichFace’s style have more priority that a rule like

.sButton
{
     background-image:url('../imgs/btnTexture2.jpg');
     background-repeat:repeat-x;
     color: white;
}

The files were applied in the next order

panel.ecss
skinning.ecss
myStyleFile.css

for that reason, I did a rule with 2 conditions in order to have the more priority, with this change the final order was

myStyleFile.css
panel.ecss
skinning.ecss

It was easier than I had thought.