java 在 PrimeFaces 对话框中设置标题样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16237681/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Style the Header on a PrimeFaces dialog
提问by Johan Nordli
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.
我在 JSF 中使用 PrimeFace Dialog。问题是 PrimeFaces 对话框标题是灰色的，我的客户认为它类似于非活动对象，因为窗口使用灰色来表示某些内容处于非活动状态。
So is there any way to style the Header background color of a PrimeFace dialog?
那么有什么方法可以设置 PrimeFace 对话框的 Header 背景颜色的样式吗？
The code of a PrimeFace Dialog:
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>
回答by Magnilex
Primefaces has support for overriding styles using css. For p:dialogand at least since Primefaces 3.5, the following style options are available:
Primefaces 支持使用css覆盖样式。对于p:dialog和至少从Primefaces 3.5，以下样式选项可供选择：
.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
.ui-dialog-对话框的容器元素
.ui-dialog-titlebar- 标题栏
.ui-dialog-title-dialog- 标题文本
.ui-dialog-titlebar-close- 关闭图标
.ui-dialog-content 对话框- 正文
Just override the default style with your own css.
只需使用您自己的 css 覆盖默认样式即可。
If you are using an older release (3.5), find the documentation for your version here.
如果您使用的是旧版本 (3.5)，请在此处找到您的版本的文档。
回答by sathish
Try the below process,
试试下面的过程，
First step: declare styleclass for p:dialog as "overlayDialog".
第一步：将 p:dialog 的样式类声明为“overlayDialog”。
And, In css file, .overlayDialog div.ui-dialog-titlebar{background....}
并且，在 css 文件中，.overlayDialog div.ui-dialog-titlebar{background....}
回答by drunkel
Right click on your dialog and 'Inspect Element' (in Chrome, can use Firebug or eq.) and find the class of your dialog, should be something similar to .ui-dialog .ui-dialog-titlebar.
右键单击您的对话框和“检查元素”（在 Chrome 中，可以使用 Firebug 或 eq.）并找到您的对话框的类，应该类似于.ui-dialog .ui-dialog-titlebar.
Then just style that in your CSS how you like.
然后在你的 CSS 中设置你喜欢的样式。
