Richfaces Skin Overriding Styleclass

Question

Tôi có một dự án JSF2/Richfaces 4, trong đó tôi muốn sử dụng một trong các giao diện mặc định, NHƯNG tôi cũng muốn thiết lập phong cách của một số thứ bằng cách sử dụng tờ tùy chỉnh của riêng tôi. Điều này nghe có vẻ khá đơn giản, nhưng những gì tôi tìm thấy là trong ít nhất một số trường hợp, phong cách riêng của tôi không được sử dụng. Để được rõ ràng, đây là web.xml có liên quan của tôi bối cảnh 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> 

My file CSS bao gồm:

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

Một trong những nét phong cách thực tế:

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

Và thực tế bằng cách sử dụng kiểu:

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

Vì vậy, người ta sẽ nghĩ rằng tôi sẽ kế thừa phong cách từ da blueSky khi có liên quan, và sau đó kể từ khi tôi chỉ định một lớp phong cách, bất kỳ thuộc tính nào được đề cập trong bảng kiểu tùy chỉnh sẽ bị ghi đè.

Nhưng thay vào đó, khi tôi nhìn vào phần tử trong Firebug, tôi thấy styleClass của tôi bị ghi đè bởi phần tử được chỉ định bởi da, ví dụ: nó tiếp tục sử dụng hình nền blueSky thay vì của tôi.

Tôi biết tôi có thể khắc phục điều này bằng cách đơn giản là quan trọng sau tất cả kiểu dáng của tôi trong biểu định kiểu, nhưng điều đó có vẻ giống như một cách thực sự khao khát và không cần thiết để giải quyết vấn đề này.

Tôi đang làm gì sai ở đây? Có giải pháp nào khác không?

Answer 1

RichFaces đã có nền mặc định được chỉ định trên bộ chọn CSS input[type=submit] là bộ chọn mạnh hơn .obsOptBtnSel. Về cơ bản có 2 tùy chọn:

1. Đổi tên công cụ chọn thành input[type=submit].obsOptBtnSel để làm cho công cụ mạnh mẽ hơn.

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

   Lưu ý, những 4 tính chất nền có thể được thiết lập như là một oneliner background với thuộc tính con theo thứ tự color image position repeat:

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

2. Thêm !important đến các tính chất nền để ghi đè lên tất cả không - !important thuộc tính trên cùng một phần tử được thiết lập bởi các bộ chọn CSS khác.

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

   hay, ngắn hơn,

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