Richfaces Skin Overriding Styleclass

У меня есть проект JSF2/Richfaces 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>

Включение моего CSS файла:

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

Итак, можно было бы подумать, что я бы наследовал стили из синей кожи, где это необходимо, а затем, поскольку я указываю класс стиля, любые свойства, упомянутые в пользовательской таблице стилей, будут переопределены.

Но вместо этого, когда я смотрю на элемент в Firebug, я вижу, что мой стильClass становится переопределенным тем, что указан на скине, например. он продолжает использовать фоновое изображение blueSky вместо моего.

Я знаю, что могу исправить это, просто поставив! важно после моего стилизации в таблице стилей, но это похоже на действительно дрянной и ненужный способ справиться с этой проблемой.

Что я здесь делаю неправильно? Есть ли другое решение?

Ответы

Ответ 1

RichFaces уже имеет фон по умолчанию, указанный в селекторе input[type=submit] CSS, который является более сильным селектором, чем .obsOptBtnSel. Есть в основном 2 варианта:

  • Переименуйте селектор в input[type=submit].obsOptBtnSel, чтобы он еще сильнее.

    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 свойства фона могут быть установлены как background oneliner с суб-свойствами в порядке color image position repeat:

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

  • Добавьте !important в свойства фона, чтобы переопределить все свойства не !important для одного и того же элемента, заданного другими селекторами 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;
}

    или, короче,

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