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

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

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

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

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

Источник

5 ответов

Решение

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

Загрузите свой 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 Specificity и Cascading and Inheritance. Например, если PrimeFaces объявляет стиль по умолчанию следующим образом

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

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

.ui-bar {
    color: purple;
}

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

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

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

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

<p:dataTable styleClass="borderless">

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

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

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

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

Источник

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

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

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

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

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

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

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

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

Источник

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

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

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

html .ui-corner-all {
  border-radius: 10px;
}
Источник

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

Источник

Следуя той же идее принятого ответа, но без использования

<h:outputStylesheet>

и используя шаблоны, и я должен достичь цели загрузки файлов .css после собственных Primefaces, но в блоке заголовка страницы.

template.xhtml:

      <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
    <h:head>
        <title><ui:insert name="title">TEST</ui:insert></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <ui:insert name="headcontent"></ui:insert>
    </h:head>
    <h:body>
        <div id="content">
            <ui:insert name="content"></ui:insert>
        </div>
        <div id="bottom">
            <ui:insert name="bottom"></ui:insert>
        </div>
    </h:body>
</html>

main.xhtml:

      <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition template="template.xhtml"
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://xmlns.jcp.org/jsf/html"
                xmlns:f="http://xmlns.jcp.org/jsf/core"
                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                xmlns:fn="http://xmlns.jcp.org/jsf/jstl/functions">

    <ui:define name="title">TEST</ui:define>
    <ui:define name="headcontent">
        <link type="text/css" rel="stylesheet" href="../resources/css/index.css"/>
    </ui:define>

    <ui:define name="content">
        ...
    </ui:define>
    
    <ui:define name="bottom">
        ...
    </ui:define>
</ui:composition>

Это пример того, как вставлять исходные файлы .css или .scripts с помощью

<ui: insert>

а также

<ui: define>

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

Источник
Другие вопросы по тегам