Содержание
Часто вам может понадобиться переопределить CSS PrimeFaces по умолчанию вашими довольно настраиваемыми значениями. В этом примере мы покажем вам, как переопределить стиль сообщения об ошибке PrimeFaces.
Отладка с FireBug , стиль сообщений об ошибках PF от primefaces.css
primefaces.css
.ui-message-info, .ui-message-error, .ui-message-warn, .ui-message-fatal {
border: 1px solid;
margin: 0px 5px;
padding: 2px 5px;
}
.ui-messages-error, .ui-message-error {
color: #D8000C;
background-color: #FFBABA;
}
1. CSS! Важно
Самое простое решение — определить собственный стиль и переопределить значение с помощью !important
ваш-custom.css
/*** override primefaces style ***/
.ui-message-info,.ui-message-error,.ui-message-warn,.ui-message-fatal {
border: 0!important;
margin: 0!important;
padding: 0!important;
}
.ui-messages-error,.ui-message-error {
color: #D8000C;
background-color: #fff!important;
}
2. Порядок ресурсов в PrimeFaces
Это более «официальный» способ. Сначала разберитесь с порядком ресурсов в PrimeFaces , затем определите свой собственный стиль в « последнем » аспекте.
demo.xhtml
...
Смотрите вывод HTML:
Заметка
Стили применяются в порядке их чтения браузером. Итак, значения в your-custom.css переопределит primefaces.css (если тот же идентификатор или имя класса).
3. Распространенная ошибка
Не ставит f:facet name="last" в h:head как это :
Изучив исходный код HTML, вы заметите, что ваш собственный стиль по-прежнему отображается перед стилями PF. Может быть, есть конфликт между «h: head» и «последним» аспектом.
PS Протестировано с PrimeFaces 3.3
Рекомендации
0.00 (0%) 0 votes
