रिचफैस स्किन ओवरराइडिंग स्टाइलक्लास

Question

मेरे पास एक जेएसएफ 2/रिचफैस 4 प्रोजेक्ट है जिसमें मैं डिफ़ॉल्ट स्किन्स का उपयोग करना चाहता हूं, लेकिन मैं अपनी खुद की कस्टम स्टाइल शीट का उपयोग करके कुछ चीजों की शैली भी सेट करना चाहता हूं। यह बहुत सरल लगता है, लेकिन मुझे जो मिल रहा है वह यह है कि कम से कम कुछ मामलों में, मेरी अपनी शैली का उपयोग नहीं किया जा रहा है। स्पष्ट होना करने के लिए, यहाँ मेरी प्रासंगिक web.xml संदर्भ पैरामीटर हैं:

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

मेरे सीएसएस फ़ाइल शामिल किए जाने के:

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

एक ऐसी वास्तविक शैली परिभाषा:

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

और वास्तविक शैली का उपयोग कर बटन:

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

तो, कोई सोचता है कि मैं नीली स्की त्वचा से शैलियों का उत्तराधिकारी हूं, जहां से प्रासंगिक है, और तब से जब मैं स्टाइल क्लास निर्दिष्ट कर रहा हूं, तो कस्टम स्टाइल शीट में उल्लिखित किसी भी गुण को ओवरराइड किया जाएगा।

लेकिन इसके बजाय, जब मैं फायरबग में तत्व को देखता हूं, तो मुझे लगता है कि मेरी शैली क्लास त्वचा द्वारा निर्दिष्ट द्वारा ओवरराइड हो रही है, उदा। यह मेरे बजाय नीली स्की पृष्ठभूमि छवि का उपयोग करता रहता है।

मुझे पता है कि मैं इसे आसानी से डालकर इसे ठीक कर सकता हूं! स्टाइलशीट में मेरी सभी स्टाइल के बाद महत्वपूर्ण है, लेकिन यह इस समस्या से निपटने के लिए वास्तव में एक गंदे और अनावश्यक तरीके की तरह लगता है।

मैं यहाँ क्या गलत कर रहा हूं? क्या कोई और समाधान है?

Answer 1

रिचफेस input[type=submit] सीएसएस चयनकर्ता पर पहले से ही एक डिफ़ॉल्ट पृष्ठभूमि निर्दिष्ट है जो .obsOptBtnSel से अधिक मजबूत चयनकर्ता है।

1. यह अभी तक मजबूत बनाने के लिए input[type=submit].obsOptBtnSel करने के लिए अपने चयनकर्ता का नाम बदलें: मूल रूप से 2 विकल्प हैं।

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

2. पृष्ठभूमि गुणों के !important जोड़े सभी गैर ओवरराइड करने के लिए:

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

   ध्यान दें, उन 4 पृष्ठभूमि गुण color image position repeat क्रम में उप-गुणों के साथ एक background oneliner के रूप में स्थापित किया जा सकता है - !important अन्य सीएसएस चयनकर्ताओं द्वारा निर्धारित तत्व पर गुण।

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

   या, छोटे,

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