Change the title bar style of a toolbox

Question

how to set p: panel component header style? I want to set the height of div_ panel_header.

<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

Usually you use CSS for styling. Use the .ui-panel .ui-panel-titlebar selector. You can find the CSS selector and all of its properties in every web browser developer toolkit. In Chrome, IE9, and Firebug, right-click the title and select "Check Item" or press "F12".

Here's an example of what it looks like in Chrome:

To get started, you can set padding to 0 .

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

Put this in the .css file that you load using <h:outputStylesheet> inside <h:body> so that it loads after CSS by default PrimeFaces.

See also:

• How to override default PrimeFaces CSS with custom styles?

Answer 2

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

Then you can use the ID selector (as indicated in another answer) as the identifier will not change.

Answer 3

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