css - one - Richfaces Skin Overriding Styleclass

richfaces showcase

Question

Tengo un proyecto JSF2 / Richfaces 4 en el que quiero usar una de las máscaras predeterminadas, PERO también deseo configurar 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 parámetros de contexto web.xml relevantes:

<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 inclusión de archivo CSS:

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

Una de esas definiciones 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 el botón real usando el estilo:

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

Por lo tanto, uno pensaría que heredaré los estilos de la máscara blueSky cuando sea relevante y, 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 mi styleClass sobrescrito por el especificado por el skin, por ejemplo, sigue usando la imagen de fondo blueSky en lugar de la mía.

Sé que podría arreglar 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 la input[type=submit] CSS selector que es un selector más fuerte que .obsOptBtnSel . Básicamente hay 2 opciones:

1. Cambie el nombre de su selector para input[type=submit].obsOptBtnSel para hacerlo 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;
   }

   Tenga en cuenta que esas 4 propiedades de fondo se pueden configurar como un background líneas de background con las sub-propiedades en el orden de color image position repeat :

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

2. Agregue !important a las propiedades de fondo para anular todas las propiedades no !important 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;