在PrimeFaces对话框上设置标题样式 [英] Style the Header on a PrimeFaces dialog

问题描述

我在JSF中使用PrimeFace对话框。问题是PrimeFaces对话框标题是灰色的，我的客户认为它类似于非活动对象，因为Windows使用灰色表示某些非活动对象。

I'm using a PrimeFace Dialog in JSF. The problem is that a PrimeFaces dialogs header is gray in color and my client thinks it similar to an inactive object because the windows uses gray to indicate that something is inactive.

所以有什么方法可以设置PrimeFace对话框的Header背景颜色？

So is there any way to style the Header background color of a PrimeFace dialog?

PrimeFace对话框的代码：

The code of a PrimeFace Dialog:

<p:commandButton id="modalDialogButton" value="Modal" onclick="dlg2.show();" type="button"/>  

<p:dialog id="modalDialog" header="Modal Dialog" widgetVar="dlg2" modal="true" height="100">  
<h:outputText value="This is a Modal Dialog." />  
</p:dialog> 

推荐答案

Primefaces支持使用 css覆盖样式。对于 p：dialog ，至少从Primefaces 3.5起，可以使用以下样式选项：

Primefaces has support for overriding styles using css. For p:dialog and at least since Primefaces 3.5, the following style options are available:

。 ui-dialog -对话框的容器元素

.ui-dialog-titlebar -标题栏

.ui- dialog-title-dialog -标题文本

.ui-dialog-titlebar-close -关闭图标

。 ui-dialog-content对话框-正文

.ui-dialog - Container element of dialog
.ui-dialog-titlebar - Title bar
.ui-dialog-title-dialog - Header text
.ui-dialog-titlebar-close - Close icon
.ui-dialog-content Dialog - body

只需使用您自己的CSS覆盖默认样式即可。

Just override the default style with your own css.

如果您使用的是旧版本（3.5），请在此处找到相应版本的文档。

If you are using an older release (3.5), find the documentation for your version here.

这篇关于在PrimeFaces对话框上设置标题样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！