Question

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

那么有没有办法设置PrimeFace对话框的标题背景颜色？

PrimeFace对话框的代码：

<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>

Answer 1

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

.ui-dialog - 对话框的容器元素
.ui-dialog-titlebar - 标题栏
.ui-dialog-title-dialog - 标题文本
.ui-dialog-titlebar-close - 关闭图标
.ui-dialog-content Dialog - body

只需使用您自己的css覆盖默认样式。

如果您使用的是旧版本（3.5），请查找适用于您的版本here的文档。

Answer 2

尝试以下过程，

第一步：将p：对话框的styleclass声明为“overlayDialog”。

并且，在css文件中， .overlayDialog div.ui-dialog-titlebar {background ....}

Answer 3

右键单击对话框和“检查元素”（在Chrome中，可以使用Firebug或eq。）并找到对话框的类，应与.ui-dialog .ui-dialog-titlebar类似。

然后在你的CSS中设置你喜欢的样式。

在PrimeFaces对话框上设置标题样式

3 个答案: