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

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

Теперь я хочу resize компонента. Например,

. Он имеет class под названием ui-orderlist-list который определен в primefaces.css с фиксированным размером 200×200. Независимо от того, что я делаю в моей theme.css , он перезаписывается этим атрибутом, и я не могу сделать часть содержимого

более широкой.

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

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

4 Solutions collect form web for “Как переопределить CSS PrimeFaces по умолчанию с пользовательскими стилями?”

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

Загрузите свой CSS после PrimeFaces

Вы должны убедиться, что ваш CSS загружен после PrimeFaces. Это можно сделать, разместив ссылаясь на ваш CSS-файл внутри вместо :

  ...    ...  

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

Вероятно, вы также увидите предложения поместить его в из который понимается в 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 будет по-прежнему иметь приоритет, потому что это наиболее конкретное совпадение!

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

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

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

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

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

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

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

  • Как ссылаться на ресурс CSS / JS / image в шаблоне Facelets?
  • Mozilla Developer Network> CSS> Специфика (отличная статья, обязательно прочитайте!)
  • Понимание приоритета стиля в CSS: специфика, наследование и каскад

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

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

и в вашей голове: добавьте что-то подобное

  

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

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

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

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

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

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

     ... 

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

Я разместил «MyCSS.css» в WebContent / resources / css /.

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

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

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

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

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

Является ли время заменой Safely Remove Hardware?

Ноутбук не выключается, когда крышка закрыта, но когда крышка открыта

Как передать вывод команды другим командам?

Ярлык в Word или Excel для специальной пасты?

Мой USB-накопитель просто умер?

Как переписать одну и ту же строку в командном выводе из командного файла

How To: Настольный компьютер как сервер, ноутбук как «тонкий клиент»?

Проблема с двойным слоем DVD + R – Ошибка ввода-вывода

Как отключить сжатие памяти Windows 10?

Помогите! Полосатый рейд, вызывающий bsod!

Отключить сенсорную панель для области кнопок мыши на новых моделях HP pavillion?

Как удалить верхний и нижний колонтитулы с определенных страниц в Microsoft Word

Можно ли настраивать значки на панели задач? Если да, то как?

Linux: несколько сетевых подключений – 3G / 4G / Wifi / LAN / etc; Как я могу установить предпочтительное сетевое подключение для использования?

Какие функции рабочего листа могут возвращать массив

Давайте будем гением компьютера.