通常,您可能需要使用漂亮的自定义值覆盖默认的PrimeFaces CSS。 在此示例中,我们将向您展示如何覆盖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
覆盖值
your-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
<!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
(如果具有相同的ID或类名)。
3.常见错误
不要像这样在h:head
放置f:facet name="last"
:
<h:head>
<f:facet name="last">
<h:outputStylesheet library="default" name="css/style.css" />
</f:facet>
</h:head>
查看HTML源代码,您会发现自己的样式仍然出现在PF样式之前。 'h:head'和'last'facet之间可能存在冲突。
<!-- 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" />
PS已通过PrimeFaces 3.3测试
参考文献
翻译自: https://mkyong.com/jsf2/primefaces/how-to-override-primefaces-css/