Как переопределить CSS PrimeFaces по умолчанию с помощью пользовательских стилей?

Я создал свою тему, как отдельный проект Maven, и это правильно.

теперь я хочу изменить размер компонента. Например,<p:orderList>. У него есть класс ui-orderlist-list который определен в primefaces.css с фиксированным размером 200x200. Независимо от того, что я делаю в моем theme.css, он перезаписывается этим атрибутом, и я не могу сделать контент частью <p:orderList> шире.

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

может кто-нибудь пожалуйста, скажите мне, как я могу все это сделать?

54
css jsf override primefaces themes

4 ответов

есть несколько вещей, которые вам нужно принять во внимание, из которых один или несколько может иметь отношение к вашему конкретному случаю

загрузите CSS после на основе схемы PrimeFaces один

вам нужно убедиться, что ваш CSS загружен после на основе схемы PrimeFaces один. Вы можете достичь этого, поместив <h:outputStylesheet> ссылка на ваш файл CSS внутри <h:body> вместо <h:head>:

<h:head>
    ...
</h:head>
<h:body>
    <h:outputStylesheet name="style.css" />
    ...
</h:body>

JSF автоматически переместит таблицу стилей в конец сгенерированного HTML <head> и это, таким образом, обеспечит загрузку таблицы стилей после стили по умолчанию для PrimeFaces. Таким образом, селекторы в вашем CSS-файле, которые точно такие же, как в файле CSS PrimeFaces, получат приоритет над PrimeFaces.

вы, вероятно, также увидите предложения, чтобы положить его в <f:facet name="last"> of <h:head> который понимается PrimeFaces-specific HeadRenderer, но это излишне топорно и если у вас есть свой HeadRenderer.

понять специфику CSS

вам также необходимо убедиться, что ваш селектор CSS по крайней мере как конкретный, как селектор CSS по умолчанию PrimeFaces для конкретного элемента. Вы должны понять специфичность CSS и каскадирование и правила наследования. Например, если PrimeFaces объявляет стиль по умолчанию следующим образом

.ui-foo .ui-bar {
    color: pink;
}

и вы объявляете это as

.ui-bar {
    color: purple;
}

и конкретный элемент с class="ui-bar" есть родительском элементе class="ui-foo", тогда один из праймеров все равно получит приоритет, потому что это наиболее конкретное совпадение!

вы можете использовать инструменты разработчика webbrowser, чтобы найти точный селектор CSS. Щелкните правой кнопкой мыши элемент в webbrowser (IE9 / Chrome/Firefox + Firebug) и выберите Проинспектировать Элемент посмотреть он.

частичное переопределение

если вам нужно переопределить стиль только для определенного экземпляра компонента, а не для всех экземпляров одного и того же компонента, добавьте пользовательский styleClass и зацепить вместо этого. Это еще один случай, когда используется/применяется специфичность. Например: 

<p:dataTable styleClass="borderless">

.ui-datatable.borderless tbody,
.ui-datatable.borderless th
.ui-datatable.borderless td {
    border-style: none;
}

никогда не использовать !важно!--24-->

в случае, если вы не в состоянии правильно загрузить файл CSS в порядке или правильно CSS селектор, вы, вероятно, захватить !important временное решение. Это совершенно неправильно. Это уродливый обходной путь, а не реальное решение. Это только путает ваши правила стиля и себя больше в долгосрочной перспективе. The !important должны только используется для переопределения значений, жестко закодированных в элементе HTML из файла стилей CSS (это, в свою очередь, также является плохой практикой, но в некоторых редких случаях, к сожалению, неизбежны).

посмотреть также:

104

вы можете создать новый файл css, например cssOverrides.в CSS

и поместите все переопределения, которые вы хотите внутри него, таким образом, обновление версии primefaces не повлияет на вас ,

и в вашей голове h:добавьте что-то вроде этого 

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

если он не будет работать, попробуйте добавить его в ч:тело

чтобы проверить, работает ли он, попробуйте этот простой пример внутри файла css

.ui-widget {
   font-size: 90% !important;
}

это уменьшит размер всех primefaces компоненты /текст

4

Я использую PrimeFaces 6.0. Вот некоторая информация, которую я хотел бы по поводу этого:

если вы используете <h:outputStylesheet/>, он будет работать, но ваш CSS не будет загружен последним, даже если он последний в <h:head></h:head> теги (после этого будут включены другие CSS-файлы). Трюк, который вы можете сделать, который я узнал от здесь это поместить его внутрь <f:facet name="last"></f:facet>, который должен войти внутрь тела, например:

<h:body>
  <f:facet name="last">
    <h:outputStylesheet name="css/MyCSS.css" />
  </f:facet>
...

тогда ваш CSS будет последним загруженным. Примечание: вам все равно придется придерживаться правил специфики, как указано в BalusC.

Я поместил " MyCSS.css " в WebContent / resources/css/.

дополнительная информация о порядке загрузки ресурсов:http://www.mkyong.com/jsf2/primefaces/resource-ordering-in-primefaces

2

стили, используемые PrimeFaces / jQuery UI, могут быть довольно сложными. Элемент может получить свой стиль из нескольких правил CSS. Приятно знать, что вы можете использовать фильтрацию на вкладке стиль инспектора DOM для поиска в свойстве, которое вы хотите настроить:

этот скриншот был сделан с помощью Chrome, но фильтрация также доступна в Firefox и Safari.

когда вы нашли правило, которое вы хотите настроить, вы можете просто создайте более конкретное правило, добавив к нему префикс html. Например, вы можете переопределить .ui-corner-all как:

html .ui-corner-all {
  border-radius: 10px;
}
0