Как переопределить 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

Как узнать, когда был записан / сожжен звуковой диск (CD)?

Отправка почты из командной строки автоматическим способом

Запустить приложение Metro при запуске?

Как выборочно маршрутизировать сетевой трафик через VPN на Mac OS X Leopard?

Пробуждение по локальной сети

Изменение домена поиска Google по умолчанию

Как найти качество JPG?

Хранение ноутбука на месяц

Скопируйте рабочий лист Excel и поддерживайте относительную ссылку на ячейки в формулах

Несмотря на то, что GIT НЕ хранит дельта файлов, можете ли вы откатить предыдущие версии файлов (неограниченное время?)

Как изменить формат даты с dd-mm-yyyy на dd-mm-yy в строке формул MS-EXCEL?

Плохое качество звука 3,5-мм наушников с микрофоном на ноутбуке

Как ввести символы с акцентом в MacOS?

Панель задач Windows 10 и меню «Пуск» не загружаются

Как контролировать папку для изменений и выполнять команду, если она есть, в Windows?

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