it-swarm.com.ru

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

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

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

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

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

60
Samuel Tian

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

Загрузите свой 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"> из <h:head>, что понимается специфичным для PrimeFaces HeadRenderer, но это излишне неуклюже и сломается, когда у вас будет свое собственное HeadRenderer.

Понимать специфику CSS

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

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

и вы объявляете это как

.ui-bar {
    color: purple;
}

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

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

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

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

<p:dataTable styleClass="borderless">
.ui-datatable.borderless tbody,
.ui-datatable.borderless th
.ui-datatable.borderless td {
    border-style: none;
}

Если компонент не поддерживает styleClass и вы используете jsf 2.2 или выше, вы также можете использовать атрибуты прохода и добавить pt:class и получить его в конце.

<p:clock pt:class="borderless" />

Никогда не используйте! Важно

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

Смотрите также:

111
BalusC

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

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

а в твою ч: голову добавь что то подобное

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

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

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

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

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

4
Daniel

Я использую 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

3
Andrew

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

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

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

html .ui-corner-all {
  border-radius: 10px;
}
1
Jasper de Vries