更改面板组件的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>,以便在 PrimeFaces默认CSS 之后加载它.

也可以看看:

• 如何使用自定义样式覆盖默认的PrimeFaces CSS？