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>

score 10 · Accepted Answer · edited May 23 '17 at 10:30

10

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.

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. – ogok Mar 29 '12 at 13:08
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... – BalusC Mar 30 '12 at 02:54
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. – ogok Mar 30 '12 at 06:23
You could also give it a specific style class, then you can just add it to the CSS selector. – BalusC Mar 30 '12 at 12:43

score 1 · Answer 2 · answered Feb 11 '13 at 15:05

1

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.

answered Feb 11 '13 at 15:05

AndyTheEntity

3,396
1
22
19

score 0 · Answer 3 · answered Apr 11 '14 at 05:29

0

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

answered Apr 11 '14 at 05:29

Mahammad Aziz Ajmeri

11

score 0 · Answer 4 · answered Sep 28 '22 at 09:03

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.

changing the primefaces header style of panel component

4 Answers4

See also: