如何覆盖PrimeFaces CSS？

cyan20115

于 2020-05-26 07:51:28 发布

阅读量197

点赞数

文章标签： xhtml ui java

通常，您可能需要使用漂亮的自定义值覆盖默认的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&amp;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&amp;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/

cyan20115

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
如何覆盖PrimeFaces CSS？

通常，您可能需要使用漂亮的自定义值覆盖默认的PrimeFaces CSS。在此示例中，我们将向您展示如何覆盖PrimeFaces错误消息样式。使用FireBug进行调试，PF的错误消息样式来自primefaces.css primefaces.css .ui-message-info, .ui-message-error, .ui-message-warn, .ui-messag...
复制链接

扫一扫