更改面板组件的primefaces标题样式

Question

如何设置p：面板组件的标题样式？我想设置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>

Answer 1

您通常使用CSS进行样式设置。使用.ui-panel .ui-panel-titlebar选择器。您可以在每个体面的webbrowser开发人员工具集中找到CSS选择器及其所有属性。在Chrome，IE9和Firebug中，右键单击标题栏并选择 Inspect Element 或按F12。

以下是Chrome中的示例：

首先，您可以将padding设置为0。

.ui-panel .ui-panel-titlebar {
    padding: 0;
}

将此文件放在.css <h:outputStylesheet> <h:body>内加载{{1}}文件，以便在 PrimeFaces默认CSS之后加载。

另见：

• How do I override default PrimeFaces CSS with custom styles?

Answer 2

将p:panel括在<h:form prependId="false">。

然后你可以使用ID选择器（如其他回复中所述），因为id不会改变。

Answer 3

.ui-panel-titlebar {
 //Your style-sheet code
}