Style the Header on a PrimeFaces dialog

Question

I'm using a PrimeFace Dialog in JSF. The problem is that a PrimeFaces dialogs header is gray in color and my client thinks it similar to an inactive object because the windows uses gray to indicate that something is inactive.

So is there any way to style the Header background color of a PrimeFace dialog?

The code of a PrimeFace Dialog:

<p:commandButton id="modalDialogButton" value="Modal" onclick="dlg2.show();" type="button"/>  

<p:dialog id="modalDialog" header="Modal Dialog" widgetVar="dlg2" modal="true" height="100">  
<h:outputText value="This is a Modal Dialog." />  
</p:dialog> 

Solution 1

Primefaces has support for overriding styles using css. For p:dialog and at least since Primefaces 3.5, the following style options are available:

.ui-dialog - Container element of dialog
.ui-dialog-titlebar - Title bar
.ui-dialog-title-dialog - Header text
.ui-dialog-titlebar-close - Close icon
.ui-dialog-content Dialog - body

Just override the default style with your own css.

If you are using an older release (3.5), find the documentation for your version here.

Solution 2

Try the below process,

First step: declare styleclass for p:dialog as "overlayDialog".

And, In css file, .overlayDialog div.ui-dialog-titlebar{background....}

Solution 3

Right click on your dialog and 'Inspect Element' (in Chrome, can use Firebug or eq.) and find the class of your dialog, should be something similar to .ui-dialog .ui-dialog-titlebar.

Then just style that in your CSS how you like.

Comments

[Athar]

if you are looking to blur the backgroun then you can overide this class, .ui-widget-overlay { background: none repeat scroll 0 0 #000000; opacity: 0.8 !important; }