CSS 更改面板组件的primefaces标题样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9911172/
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
changing the primefaces header style of panel component
提问by ogok
how can i set the header style of the p:panel component? i want to set the height of the panel_header div.
如何设置 p:panel 组件的标题样式？我想设置 panel_header div 的高度。
<p:panel id="panel"
toggleSpeed="500" toggleable="true">
<f:facet name="header" >
<p:outputPanel style="float:left;">
<p:commandButton process="@this" id="new"
oncomplete="dialog.show();" icon="ui-icon-plus" />
<p:spacer width="15px;" />
</p:outputPanel>
<h:outputLabel value="Title" />
</f:facet>
</p:panel>
回答by BalusC
You normally use CSS for styling. Use the .ui-panel .ui-panel-titlebarselector. You can find the CSS selectors and all its properties in every bit decent webbrowser developer toolset. In Chrome, IE9 and Firebug, rightclick the titlebar and choose Inspect Elementor press F12.
您通常使用 CSS 进行样式设置。使用.ui-panel .ui-panel-titlebar选择器。您可以在每个体面的 webbrowser 开发人员工具集中找到 CSS 选择器及其所有属性。在 Chrome、IE9 和 Firebug 中，右键单击标题栏并选择“检查元素”或按 F12。
Here's an example how it look like in Chrome:
下面是它在 Chrome 中的外观示例：
To start, you could set the paddingto 0.
首先，您可以设置padding到0。
.ui-panel .ui-panel-titlebar {
padding: 0;
}
Put this in a .cssfile which you load by <h:outputStylesheet>inside <h:body>, so that it get loaded afterPrimeFaces default CSS.
把它放在一个.css你通过<h:outputStylesheet>inside加载的文件中<h:body>，以便它在PrimeFaces 默认 CSS之后加载。
See also:
也可以看看：
回答by AndyTheEntity
Enclose the p:panelin <h:form prependId="false">.
将p:panelin括起来<h:form prependId="false">。
Then you can use the ID selector (as mentioned in the other reply), as the id will not change.
然后您可以使用 ID 选择器（如其他回复中所述），因为 id 不会更改。
回答by Mahammad Aziz Ajmeri
.ui-panel-titlebar {
//Your style-sheet code
}
