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>

Premises

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?

Gloriole

Thanks for your reply. But in my case there is a different situation. This panel is in a composite component. And I don't want to change all headers. If I do that you said; all of the headers will be changed. I only want to change the style in the composite component. – Premises

Then just use a more specific CSS selector? E.g. the ID selector. Just to be sure, have you never used CSS before? Have you really never learnt basic HTML/CSS/JS before beginning with JSF? Then I can better calculate what kind of answer you expect... – Gloriole

of course i used css before. but the problem is id can be changable. i know that i should use id selector but id of the div is like form_id:composite_componenet_id:panel_id_header. So composite component id can be different. I want to know that you really understood the problem. – Premises

You could also give it a specific style class, then you can just add it to the CSS selector. – Gloriole

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.

Soll

Answer 3

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

Anglo

Answer 4

Adding a header facet to the panel is a good solution if you just need to change one panel. Inside the facet add any styling you require.

        <p:panel>
            <f:facet name="header" style="font-size: medium">
            </f:facet>
        </p:panel>

I avoid messing with the primefaces styling as much as possible if I just want to change individual components.

Rimose