How to abandon the transparency of a PrimeFaces Dialog?

Question

I'm trying to display an alert using Primefaces Dialog component in my JSF page. I could display the dialog, but my problem is with the transparency/opacity of this dialog. I have overridden the style property of the dialog by setting opacity: 1.0, but it didn't work. I want to abandon the dialog's transparency. How can I achieve this in a simple way?

My JSF page:

<f:view xmlns="http://www.w3.org/1999/xhtml"
....
renderKitId="PRIMEFACES_MOBILE">
....
<pm:page title="Mobile Reports">
<pm:view id="reports" swatch="b">
<h:form>
<pm:content>
<div>
<h:form>
    ....
    <p:dialog id="myDialog"
        header="ERROR"
        widgetVar="dlg"
        modal="true"
        style="opacity: 1.0;"
        appendToBody="true">
        <p:commandButton id="decline" value="Couldn't display the report!"
            onclick="dlg.hide()" type="button" />
    </p:dialog>
    ....
    <p:commandButton id="contractInfo" action="ContractInfo.xhtml"
        value="Contract Information" style="width:100%;"
        onerror="dlg.show();">
    </p:commandButton>
    ....
</h:form>
</div>
</pm:content>
</h:form>
</pm:view>
</pm:page>
</f:view>

Output:

GPRS is displayed in JSF page, it's not a part of the dialog. However, it is visible since the dialog is transparent.

Note: I'm using primefaces-mobile-0.9.3.jar

Answer 1

I've tried overriding css style of the dialog component in my JSF page like that (Remark the !important expression):

<p:dialog id="myDialog" header="ERROR" widgetVar="dlg" modal="true"
        style="background: gray !important;" appendToBody="true">
        <p:commandButton id="decline" value="Couldn't display the report!"
            onclick="dlg.hide()" type="button" />
</p:dialog>

And somehow the dialog is better now, it looks like:

However, overriding the general stylesheet of PrimeFaces library in my project might help me more for customizing the dialog.

The stylesheet's path in my dynamic web project: WebContent/assets/css/style.css This could be reference for whom facing a similar problem.

Answer 2

When supplying a customized theme you're supposed to create a theme file. PrimeFaces' default theme is Aristo. For more info about how to create a custom theme see the PrimeFaces Guide or the mobile PrimeFaces Guide.

If you however don't want to create a complete theme the default theme is applied. To override styles in the applied theme you need to use !important. (You already discovered this though.)

A useful tool I use is FireBug. FireBug shows which CSS rules are applied to an element and also which rules are overridden.