Richfaces Skin Overriding Styleclass

Question

Tengo un proyecto JSF2/Richfaces 4 en el que quiero usar una de las máscaras predeterminadas, PERO también deseo establecer el estilo de algunas cosas con mi propia hoja de estilos personalizada. Esto suena bastante sencillo, pero lo que estoy descubriendo es que, al menos en algunos casos, mi propio estilo no se usa. Para ser explícito, aquí están mis relevante Web.xml contexto 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> 

Mi archivo CSS inclusión:

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

Un tal definición de estilo real:

.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; 
} 

y lo actual botón con el estilo:

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

Entonces, uno pensaría que heredaré los estilos de la máscara blueSky cuando sea relevante, y luego, como estoy especificando una clase de estilo, se anularán todas las propiedades mencionadas en la hoja de estilos personalizada.

Pero, en cambio, cuando miro el elemento en Firebug, veo que mi estiloClass se ve anulado por el especificado por el aspecto, p. Ej. sigue usando la imagen de fondo blueSky en lugar de la mía.

Sé que podría solucionar esto simplemente poniendo! Importante después de todo mi estilo en la hoja de estilos, pero eso parece una manera realmente horrible e innecesaria de lidiar con este problema.

¿Qué estoy haciendo mal aquí? ¿Hay alguna otra solución?

Answer 1

RichFaces ya tiene un fondo predeterminado especificado en el selector CSS input[type=submit] que es un selector más fuerte que .obsOptBtnSel. Básicamente, existen 2 opciones:

1. cambiar el nombre del selector para input[type=submit].obsOptBtnSel para que sea aún más fuerte.

   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; 
   } 
   

   Nota, esos 4 propiedades de fondo se puede configurar como un oneliner background con los sub-propiedades en el orden color image position repeat:

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

2. Añadir !important a las propiedades de fondo para anular todos los no - !important propiedades en el mismo elemento establecido por otros selectores de CSS.

   .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; 
   } 
   

   o, más corto,

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