cssjsfprimefacesfacelets

changing the primefaces header style of panel component

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

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

    enter image description here

    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: