Как переопределить таблицы стилей PrimeFaces?

Просто я попытался посмотреть имя компонента в сгенерированном HTML через FireBug после того, как я изменил его в моем определяемом вручную css в проекте JSF, но не смог переопределить определение CSS PrimeFaces. Заранее благодарю за любую идею.

Ответ 1

При использовании простых элементов 2.2.1 используйте тег h: outputStylesheet и включите его в h: body, а не в h: head, чтобы переопределить таблицы стилей, аналогичные h: outputScript.

Пример:

<h:body>
  <h:outputStylesheet library="css" name="YOURSTYLES.css" />
  <h:outputScript library="javascript" name="YOURSCRIPT.js" target="head" />
</h:body>

При использовании перформансов 3 следуйте этой записи в блоге http://blog.primefaces.org/?p=1433

Ответ 2

Добавление к тому, что уже ответил @Ravi:

Из перформансов 3.0 вы можете настроить порядок ресурсов. Однако, когда я попробовал, он не работал вначале.

Оказалось, что я не могу использовать компонент JSF для включения css следующим образом:

<f:facet name="last">
    <h:outputStylesheet library="css" name="bootstrap.css" />
</f:facet>

Вместо этого мне пришлось использовать:

<f:facet name="last">
    <link rel="stylesheet" type="text/css" href="#{facesContext.externalContext.requestContextPath}/resources/css/bootstrap.css" />
</f:facet>

Только после этого порядок начал работать.

EDIT. Мой ответ лишний, если вы поместите facet в body (вместо head). Так же, как писал Рави в своем ответе. (Я, должно быть, пропустил это как-то.)

Также не рекомендуется делать это, потому что тогда ресурсы не обрабатываются FacesServlet, и проблемы с путями внутри css могут возникнуть. Сравните этот ответ с BalusC.

Ответ 3

Убедитесь, что ссылка на файл CSS появилась после файла PrimeFaces в вашем коде.

<link type="text/css" rel="stylesheet" href="/showcase-labs/javax.faces.resource/theme.css.jsf?ln=primefaces-aristo" />
<link type="text/css" rel="stylesheet" href="/showcase-labs/javax.faces.resource/primefaces.css.jsf?ln=primefaces&amp;v=3.0-SNAPSHOT" />

<link type="text/css" rel="stylesheet" href="YOURSTYLES.CSS" />

Кроме того, хотя это не является предпочтительным решением, которое вы можете добавить! важно после ваших стилей, чтобы придать им наивысший приоритет: http://www.w3.org/TR/CSS2/cascade.html#important-rules

Ответ 4

Попробуйте создать более конкретные правила CSS для ваших переопределений.

Самый простой способ - добавить определения CSS PrimeFaces определенным идентификатором, который используется только на ваших страницах:

#tuxi_site .ui-widget-content .ui-icon {
   ...
}

Подробнее о CSS Специфика в Специфика CSS: вещи, которые вы должны знать.

Ответ 5

В принципе, вам нужно использовать более четко определенный (более сильный) селектор. Чем конкретнее ваш CSS, тем выше значение, которое интерпретатор ему предоставит. Пожалуйста, ознакомьтесь с этой статьей о CSS-каскадировании: http://www.w3.org/TR/CSS2/cascade.html

Или, если вы в спешке: http://ww.boogiejack.com/CSS_4.html

Ответ 6

Если вы хотите переопределить файл primefaces.css, вы можете сделать это, создав пустые resouces/primefaces/primefaces.css. Он не идеален, но работает с Primefaces 5.0