Richfaces Skin Overriding Styleclass - PullRequest
Новая
       10

Richfaces Skin Overriding Styleclass

11 голосов
/ 08 сентября 2011

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

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

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

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

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

1 Ответ

15 голосов
/ 08 сентября 2011

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

  1. Переименуйте ваш селектор в 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;

  2. Добавьте !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;
...