Richfaces Skin Overriding Styleclass

Question

I have a JSF2/Richfaces 4 project in which I want to use one of the default skins, BUT I also want to set some things' style using my own custom style sheet. This sounds pretty straightforward, but what I am finding is that in at least some cases, my own style is not being used. To be explicit, here are my relevant web.xml context-params:

<context-param>
    <param-name>org.richfaces.skin</param-name>
    <param-value>blueSky</param-value>
</context-param>
<context-param>
    <param-name>org.richfaces.control_skinning</param-name>
    <param-value>enable</param-value>
</context-param>
<context-param>
    <param-name>org.richfaces.control_skinning_classes</param-name>
    <param-value>enable</param-value>
</context-param>

My CSS file inclusion:

<h:outputStylesheet name="jsp-css.css" library="css" />

One such actual style definition:

.obsOptBtnSel{
background-color: transparent;
background-image: url('/images/circleY.gif');
background-repeat: no-repeat;
background-position: center;
border: none;
text-align: center;
width: 2em;
height: 2em;
}

And the actual button using the style:

<h:commandButton
value="?"
styleClass="#{obs.observation.observationExtent == -1.0 ? 'obsOptBtnSel' : 'obsOptBtnUns'}"
id="unknownButton"
/>

So, one would think that I'd inherit the styles from the blueSky skin where relevant, and then since I'm specifying a style class, any properties mentioned in the custom style sheet would be overridden.

But instead, when I look at the element in Firebug, I see my styleClass getting overridden by that specified by the skin, e.g. it keeps using the blueSky background image instead of mine.

I know I could fix this by simply putting !important after all my styling in the stylesheet, but that seems like a really crappy and unnecessary way to deal with this problem.

What am I doing wrong here? Is there another solution?

Answer 1

RichFaces has already a default background specified on the input[type=submit] CSS selector which is a stronger selector than .obsOptBtnSel. There are basically 2 options:

1. Rename your selector to input[type=submit].obsOptBtnSel to make it yet stronger.

   input[type=submit].obsOptBtnSel {
       background-color: transparent;
       background-image: url('/images/circleY.gif');
       background-repeat: no-repeat;
       background-position: center;
       border: none;
       text-align: center;
       width: 2em;
       height: 2em;
   }
   

   Note, those 4 background properties can be set as a background oneliner with the sub-properties in the order color image position repeat:

   background: transparent url('/images/circleY.gif') center no-repeat;
   

2. Add !important to the background properties to override all non-!important properties on the same element set by other CSS selectors.

   .obsOptBtnSel {
       background-color: transparent !important;
       background-image: url('/images/circleY.gif') !important;
       background-repeat: no-repeat !important;
       background-position: center !important;
       border: none;
       text-align: center;
       width: 2em;
       height: 2em;
   }
   

   or, shorter,

   background: transparent url('/images/circleY.gif') center no-repeat !important;