Richfaces Skin Overriding Styleclass

Question

Ho un progetto JSF2/Richfaces 4 in cui voglio usare uno degli skin predefiniti, ma voglio anche impostare lo stile di alcune cose usando il mio foglio di stile personalizzato. Sembra piuttosto semplice, ma quello che sto scoprendo è che, almeno in alcuni casi, il mio stile non viene usato. Per essere espliciti, qui sono i miei rilevanti 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> 

mio file CSS di inclusione:

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

Una tale definizione stile attuale:

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

e l'effettivo pulsante utilizzando lo stile:

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

Quindi, si potrebbe pensare che erediterei gli stili dalla skin blueSky laddove rilevante, e quindi poiché sto specificando una classe di stile, tutte le proprietà menzionate nel foglio di stile personalizzato verranno sovrascritte.

Invece, quando guardo l'elemento in Firebug, vedo il mio styleClass essere sovrascritto da quello specificato dallo skin, ad es. continua a usare l'immagine di sfondo blueSky anziché la mia.

So che potrei risolvere questo problema semplicemente mettendo! Importante dopo tutto il mio stile nel foglio di stile, ma quello sembra un modo davvero schifoso e non necessario per affrontare questo problema.

Cosa sto facendo di sbagliato qui? C'è un'altra soluzione?

Answer 1

RichFaces ha già uno sfondo predefinito specificato sul selettore input[type=submit] CSS che è un selettore più potente di .obsOptBtnSel. Ci sono fondamentalmente 2 opzioni:

1. Rinominare il selettore per input[type=submit].obsOptBtnSel per rendere ancora più forte.

   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, quei 4 proprietà dello sfondo può essere impostato come un background oneliner con i sub-proprietà nell'ordine color image position repeat:

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

2. Aggiungi !important alle proprietà dello sfondo per ignorare tutti i non - !important proprietà sullo stesso elemento impostato da altri selettori 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, più breve,

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