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

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> 

- Johan Nordli

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

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

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

- Magnilex

---

如果您想要模糊背景，那么您可以覆盖此类：.ui-widget-overlay { background: none repeat scroll 0 0 #000000; opacity: 0.8 !important; } - Athar

Answer 2

请尝试以下步骤：

第一步：声明p:dialog的样式类为"overlayDialog"。

接下来，在css文件中， .overlayDialog div.ui-dialog-titlebar{background....}

- sathish

Answer 3

右键单击对话框并选择“检查元素”（在Chrome中，可以使用Firebug或相似工具），然后找到对话框的类，应该类似于.ui-dialog .ui-dialog-titlebar。

然后只需在CSS中按照您的喜好设置样式即可。

- drunkel