在 PrimeFaces 对话框中设置标题样式答案

【问题标题】：Style the Header on a PrimeFaces dialog在 PrimeFaces 对话框中设置标题样式
【发布时间】：2013-04-20 16:49:41
【问题描述】：

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

那么有什么方法可以设置 PrimeFace 对话框的标题背景颜色吗？

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>

【问题讨论】：

标签： java jsf primefaces dialog

【解决方案1】：

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

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

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

如果您使用的是旧版本 (3.5)，请查找您的版本的文档here。

【讨论】：

如果你想模糊背景，那么你可以覆盖这个类， .ui-widget-overlay { background: none repeat scroll 0 0 #000000;不透明度：0.8！重要； }

【解决方案2】：

试试下面的流程，

第一步：将 p:dialog 的 styleclass 声明为“overlayDialog”。

而且，在 css 文件中， .overlayDialog div.ui-dialog-titlebar{背景....}

【讨论】：

【解决方案3】：

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

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

【讨论】：