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

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



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



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



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

680   4  

4 ответов:

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

загрузите CSS после PrimeFaces one

вы должны убедиться, что ваш 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-файле, которые точно такие же, как и в файле PrimeFaces CSS, получат приоритет над PrimeFaces one.

вы, вероятно, также увидите предложения, чтобы положить его в <f:facet name="last"> на <h:head> что понимается под PrimeFaces-specific 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 все равно получит приоритет, потому что это самый конкретный матч!

вы можете использовать инструменты разработчика 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;
}

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

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

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

104  
2017-08-31 14:04:58

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

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

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

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

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

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

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

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

4  
2012-01-07 17:36:01

Я использую 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  
2017-01-26 21:38:14

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

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

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

html .ui-corner-all {
  border-radius: 10px;
}
0  
2018-03-05 21:43:28

Comments

    Ничего не найдено.
Click here to cancel reply.