Primefaces घटकों सीएसएस अनुकूलन

Question

मैं primefaces दस्तावेज में देखने के रूप में,

1) To change the font-size of PrimeFaces components globally, use the `.ui-widget` style class. 
     An example with 12px font size. 

     .ui-widget, 
     .ui-widget .ui-widget { 
       font-size: 12px !important; 
     } 

मैं इस पर 2 प्रश्न हैं:

1. उपरोक्त कोड में .ui-widget लिखा तीन बार क्यों है?

2. tabView के दो अलग-अलग उदाहरणों के लिए मैं अपने शीर्षलेख पृष्ठभूमि-रंग को अलग-अलग अनुकूलित करना चाहता हूं, लेकिन मुझे ऐसा करने का कोई तरीका नहीं मिला। क्या यह भी संभव है?

Answer 1

शैली घोषणा में वे विभिन्न वर्ग ओवरराइड की सूची को सीमित करते हुए कॉमा हैं। विशेष रूप से सीएसएस का यह टुकड़ा कहता है:

कक्षाएं ui-widget और ui-widget कक्षा ui-widget श्रेणी वाले तत्व के बाल तत्व।

जहां तक ​​हेडर पृष्ठभूमि माना जाता है, आपको पृष्ठभूमि रंग को संशोधित करने के लिए सरल सीएसएस का उपयोग करके भाग्य नहीं हो सकता है क्योंकि मेरा मानना ​​है कि यह संभवतः विभिन्न अलग-अलग 1px चौड़े जीआईएफ या जेपीजी छवियों का उपयोग करके एक ठोस रूप से घोषित रंग के विपरीत दोहराया जा सकता है ।

यदि आप प्राइमफ़ेस घटकों के डिफ़ॉल्ट थीम को अपनी स्टाइलशीट के साथ कस्टमाइज़ करना चाहते हैं तो आप कक्षाओं, शैलियों का निरीक्षण करने और फ़ायरफ़ॉक्स के किसी भी वेब पेज पर वास्तविक समय को संशोधित करने के लिए फ़ायरबग, https://addons.mozilla.org/en-US/firefox/addon/firebug/ जैसे टूल को देखने के लिए सबसे अच्छे हैं। वर्तमान में देख रहे हैं। यह जावास्क्रिप्ट डीबगिंग में भी बनाया गया है।

Answer 2

टैब व्यू के दो अलग-अलग उदाहरणों के लिए मैं अपने शीर्षलेख पृष्ठभूमि-रंग को अलग-अलग अनुकूलित करना चाहता हूं, लेकिन मुझे ऐसा करने का कोई तरीका नहीं मिला। क्या यह भी संभव है?

टैबव्यू, अन्य सभी प्राइमफेस घटकों की तरह विशेषता styleClass है। इसके साथ आप अपनी खुद की सीएसएस स्टाइल क्लास को एक टैब व्यू इंस्टेंस (या किसी भिन्न घटक के किसी भी इंस्टेंस) में असाइन कर सकते हैं।

तो आप विभिन्न पृष्ठभूमि रंगों के साथ दो शैली कक्षाएं बना सकते हैं।

एक्सएचटीएमएल:

<p:tabView styleClass="myClass"> 
    ... 
</p:tabView> 

सीएसएस:

.myClass { 
    background-color: yellow; 
} 

आपको एक अधिक सटीक चयनकर्ता जरूरत हो सकती है, के बारे में css specificity

Answer 3

शायद एक छोटे से व्यक्तिपरक पढ़ा है, लेकिन जब तक आप अनुकूलित करने के लिए देख रहे हैं मौजूदा जेक्री यूआई आईडी पूर्व-मौजूदा/प्री-रोलेड प्राइमफेस थीम के भीतर हैं, तो आप कुछ भी छिपाने के लिए कुछ नहीं हैं। पैनल समूह, पैनलग्रिड्स और टैब व्यू, उदाहरण के लिए, अपने कंटेनरों को फटकारा और यहां तक ​​कि एक ओवरफ्लो भी नहीं: ऑटो इसे सुधार सकता है।

प्राइमफ़ेस लाइब्रेरी के बारे में सबसे अधिक परेशान चीजों में से एक यह है कि घटक W3C सत्यापन को कैसे पास नहीं करते हैं, जिससे "फ्रेमवर्क से लड़ने" के घंटों तक पहुंच होती है।