TOC

Как переопределить PrimeFaces CSS?

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

Самое простое решение - определить собственный стиль и переопределить значение с помощью!

ваш-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

Это более «официальный» способ. Сначала разберитесь по ссылке://jsf2/primefaces/order-in-prime -faces/[упорядочение ресурсов в PrimeFaces], затем определите свой собственный стиль в last **  last **  ‘facet.

demo.xhtml

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:p="http://primefaces.org/ui">

<h:head> <!-- load other css, js and resources -→ </h:head>

<h:body> <f:facet name="last"> <h:outputStylesheet library="default" name="css/your-custom.css"/> </f:facet> …​ 

Смотрите вывод HTML:

<!-- PF-JSF registered css -→ <link type="text/css" rel="stylesheet" href="/mkyong/javax.faces.resource/primefaces.css.jsf?ln=primefaces"/>

<!-- your css -→ <link type="text/css" rel="stylesheet" href="/mkyong/javax.faces.resource/css/your-custom.css.jsf?ln=default&v=1__0" 

**  Примечание **  Стили применяются в порядке их чтения браузером. Таким образом, значения в `your-custom.css` будут переопределять` primefaces.css` (если тот же идентификатор или имя класса)

===  3. Распространенная ошибка

Не помещайте `f: facet name =" last "` в `h: head` следующим образом:

<h:head> 

<f:facet name="last">
    <h:outputStylesheet library="default" name="css/style.css"/>
</f:facet>

</h:head> 

Изучив исходный код HTML, вы заметите, что ваш собственный стиль по-прежнему отображается перед стилями PF. Может быть, есть конфликт между «h: head» и «последним» аспектом.

<!-- your css -→ <link type="text/css" rel="stylesheet" href="/mkyong/javax.faces.resource/css/your-custom.css.jsf?ln=default&v=1__0"

<!-- PF-JSF registered css -→ <link type="text/css" rel="stylesheet" href="/mkyong/javax.faces.resource/primefaces.css.jsf?ln=primefaces"/> 

__P.S Протестировано с PrimeFaces 3.3__

===  Рекомендации

, ссылка://jsf2/primefaces/ресурсы упорядоченность-в-primefaces/[ресурс

заказ в PrimeFaces.

, http://webdesign.about.com/od/css/f/blcssfaqimportn.htm[What делает

! важное значение в CSS?]

ссылка://tag/css/[css]ссылка://tag/primefaces/[primefaces]ссылка://тег/ресурсы/[ресурсы]
Related