changing the primefaces header style of panel component

Question

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 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

You normally use CSS for styling. Use the .ui-panel .ui-panel-titlebar selector. 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 Element or press F12.

Here's an example how it look like in Chrome:

To start, you could set the padding to 0.

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

Put this in a .css file which you load by <h:outputStylesheet> inside <h:body>, so that it get loaded after PrimeFaces default CSS.

See also:

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

Answer 2

Enclose the p:panel in <h:form prependId="false">.

Then you can use the ID selector (as mentioned in the other reply), as the id will not change.