Styling JSF ICEFaces ace:dialog

Can anyone tell me how do I add my own style to a ace:dialog component? It gives a styleClass attribute. but this ace:dialog has its own styles too. I'm not a good css guy, so can you help me with this?

Thank you.

Solution

Quite an obvious way is to use code inspector of any browser, preferrably Firebug of Firefox, inspect HTML markup generated by your UI Component Suite and CSS styles. This way you will be able to override the CSS you want easily.

More closely to the question, <ace:dialog> tag from showcase example

<ace:dialog id="dialog"
            header="A sample dialog overview example"
            widgetVar="sampleDialog"
            closable="false"
            modal="true"
            draggable="false"
            showEffect="clip"
            hideEffect="fade"
            width="400">
    <h:form>...</h:form>
</ace:dialog>

shows the following HTML markup and styles:

<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-resizable"
     style="display: block; z-index: 1002; outline: 0px none; position: absolute; height: auto; min-width: 150px; width: 400px; top: 409.5px; left: 488px;" tabindex="-1" role="dialog" aria-labelledby="ui-dialog-title-dialog_main">
    <div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
        <span id="ui-dialog-title-dialog_main" class="ui-dialog-title">A sample dialog overview example</span>
    </div>
    <div id="dialog_main" class="ui-dialog-content ui-widget-content" 
         style="width: auto; min-height: 0px; height: auto;" scrolltop="0" scrollleft="0">
        <form>...</form>
    </div>
    <div class="ui-resizable-handle ui-resizable-n" style="z-index: 1000;"></div>
    ...
</div>

So, the inspection tells us about the following styles:

ui-dialog for the base <div>;
ui-dialog-titlebar for the header container;
ui-dialog-title for the text in the header;
ui-dialog-content for the dialog content <div>.

Change CSS in inspector to achieve what you want and follow BalusC's example on how to override predefined theme CSS with your custom styles from How do I override those classes defined in primefaces.css? question.